Jump to content

Problem with ajax driven content - Please help!

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();

JS file

// +++ main.js

   	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) {


			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');
			}//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;

			xhttp.open('GET',  url + '?q=notUsed', true);

The problem is that sometimes the


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???



Share this post

Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...