Jump to content

Problem with ajax driven content - Please help!


ro-bo
 Share

Recommended Posts

Hi there.

I have an annoying problem with a page where I load content dynamically with AJAX. (ProcessWire 3.0.148)
I'm using MarkupRegions with the following code fragments:

PHP template-files

// +++ _main.php +++

if( !$useMain || $config->ajax ) return;
...



// +++ page with the dynamic AJAX content +++

...
if ($config->ajax) {
	wireIncludeFile('./_includes/wine.inc.php', $arrOut);
   return $this->halt();
}//endif
...

JS file

// +++ main.js

(function(){
		
   	var dynamicModals = document.querySelectorAll('[data-toggle="ajaxModal"]');

	if (!dynamicModals.length) return;
		
	for (var i = 0, len = DynamicModals.length; i < len; i++) {
			
		dynamicModals[i].addEventListener('click', function(e) {

			e.preventDefault();

			var url = this.getAttribute('href');
			
			var ajaxModal = document.getElementById('ajaxModal');
			if( ajaxModal ) {
				var modalDiv = AjaxModal;
			} else { 

				// +++ modal
				var modalDiv 	= document.createElement('div');
				modalDiv.id 	= 'ajaxModal';
				modalDiv.setAttribute('data-uk-modal', '');
				modalDiv.classList.add('uk-modal-center', 'uk-flex-top', 'uk-modal');
				document.body.appendChild(modalDiv);
					
			}//end if

			var xhttp = new XMLHttpRequest();
			xhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {

					var modal = document.getElementById(modalDiv.id);

					var data = this.responseText;

					var html = '<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">';
					html += '<button class="uk-modal-close-full uk-close-large" type="button" data-uk-close></button>';
					html += data;
					html += '</div>';

					modal.innerHTML = html;

					UIkit.modal(modal).show();
				}
			};
			xhttp.open('GET',  url + '?q=notUsed', true);
			xhttp.send();
				
		});
	}//endforeach
      
 })();

The problem is that sometimes the

$config->ajax

does not work or is ignored and the entire _main.php template file is loaded with AJAX-request.


No error is displayed in the browser console. The content is also shown in the modal box, only sometimes with the data of _main.php.

I've tried so much, but nothing helps!
Does anyone have a similar problem???

Robert

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...