0

Why do I get these errors below after adding jquery mobile to my WordPress website?

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js?ver=3.1.1:4
ajax @ jquery.min.js?ver=3.1.1:4
a.ajax @ jquery-migrate.min.js?ver=3.0.0:2
r._evalUrl @ jquery.min.js?ver=3.1.1:4
Ia @ jquery.min.js?ver=3.1.1:3
append @ jquery.min.js?ver=3.1.1:3
r.fn.(anonymous function) @ jquery.min.js?ver=3.1.1:3
_include @ jquery.mobile.js:4790
(anonymous) @ jquery.mobile.js:890
(anonymous) @ jquery.mobile.js:4997
e @ jquery.min.js?ver=3.1.1:2
i @ jquery.min.js?ver=3.1.1:2
fireWith @ jquery.min.js?ver=3.1.1:2
A @ jquery.min.js?ver=3.1.1:4
(anonymous) @ jquery.min.js?ver=3.1.1:4

my-wordpress:1 IntersectionObserver.observe(target): target element is not a descendant of root.

The WP just stopped working - when I click to the menu and I can see that URL has changed but the page content stay the same.

Any ideas?

This is how I add the jquery stuff in the function.php:

    // Load latest compiled and minified jquery.
    wp_enqueue_script( 'jquery-min', get_template_directory_uri() . '/node_modules/jquery/dist/jquery.min.js', array(), '3.1.1' );

    // Load latest compiled and minified jquery migrate.
    wp_enqueue_script( 'jquery-migrate-2', get_template_directory_uri() . '/node_modules/jquery-migrate/dist/jquery-migrate.min.js', array(), '3.0.0' );

    // Load latest compiled and minified jquery mobile.
    wp_enqueue_script( 'jquery-mobile', get_template_directory_uri() . '/node_modules/jquery-mobile/dist/jquery.mobile.min.js', array(), '1.4.1' );

Notes: I don't have any AJAX call on my WP site.#

I found something odd at the bottom of my page - Loading:

enter image description here

What's that? Is not from me!

I use jQuery mobile because I need to touch and swipe images on mobile devices:

// bind scroll to anchor links
// http://stackoverflow.com/questions/11397028/document-click-function-for-touch-device
$(document).on("click touchstart", "a[href^='#']", function (e) {
  var id = $(this).attr("href");
  if ($(id).length > 0) {
    e.preventDefault();

    // trigger scroll
    scrollMagicController.scrollTo(id);

      // if supported by the browser we can even update the URL.
    if (window.history && window.history.pushState) {
      history.pushState("", document.title, id);
    }
  }
});

// Add swipe to carousel.
$("#myCarousel").swiperight(function() {
  $(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
  $(this).carousel('next');
});
Run
  • 54,938
  • 169
  • 450
  • 748

3 Answers3

1

I ran in the same issue with adding jQuery Mobile 1.4.5 to the wordpress admin area.

The error can by fixed by changing the following lines of code in your jQuery Mobile file (lines 681-682 in jQM Version 1.4.5):

    // Automatically handle clicks and form submissions through Ajax, when same-domain
    ajaxEnabled: true,

to

    ajaxEnabled: false,
Examizer
  • 11
  • 3
1

Just to add to Examizer's answer, if you prefer not to amend the jQueryMobile code directly you can run your own custom script to set defaults on jQueryMobile. Just make sure you queue it before jQueryMobile's script is queued.

This worked for me:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

From this answer: https://stackoverflow.com/a/8684532

wesgardner
  • 71
  • 5
0

The main thread is used for UI rendering. Here you're trying to make synchronous requests on this same thread, which would result in screen freezes while you waiting for the HttpResponse.

Kujey
  • 1,122
  • 6
  • 17
  • `You didn't give any information about the devices you use` what do you mean? – Run Mar 31 '17 at 08:20
  • do you mean the info on my meta tags - ``? – Run Mar 31 '17 at 08:20
  • My mistake. Did you look at kroolk's answer here : http://stackoverflow.com/questions/24639335/javascript-console-log-causes-error-synchronous-xmlhttprequest-on-the-main-thr ? – Kujey Mar 31 '17 at 08:30
  • yes i have but it does not help. apart from the same error message. – Run Mar 31 '17 at 08:41
  • I would try one last thing: update all your query imports to the last stable release version and update wordpress if not done already. – Kujey Mar 31 '17 at 09:09
  • they all are the latest stable versions. – Run Mar 31 '17 at 11:22