Fancybox making an unwanted synchronous request?

I have a formular that I want to submit via ajax. So I am using jquery form plugin . ok this works great.

I am getting html page as result and want to pass it to fancybox (v2.0) . but if i'm going to open fancybox i get this famous chrome warning:

Synchronous XMLHttpRequest on the main thread is deprecated due to its detrimental effects on the end user. For more help, check out http://xhr.spec.whatwg.org/ .

hence I am wondering about two things:

  • Why is this warning showing up, because if fancybox is not using my ajax request, async = false

    or the like. well this is as far as i know and i checked the fancybox source code so ...
  • why am i getting the following error when i try to submit the form a second time?

    Uncaught TypeError: $ (...). ajaxSubmit is not a function.

    I have a feeling that after the alert is raised, the function that triggers the alert is removed from the context and therefore cannot be called ...?!

If I don't use fancybox - when I, for example, just call console.log(result)

- I don't get the error. so there is something wrong with fancybox i guess.

Why don't I immediately call the url of the page I want to load in fancybox content like regular people do? good because fancybox has no way of passing post data to url, so I need to submit a form. sending data-data is out of the question.


here is the problematic code :)

$(domObject).ajaxSubmit({
    dataType: "html",
    success:  function(result) {
        $.fancybox.open({
            padding:    0,
            margin:     0,
            content:    result,
            autoSize:   false
        });
    }
});

      

+3


source to share


2 answers


I found out that if there are script tags with src attribute in the content you pass to fancybox, an error appears.

My guess is that fancybox is buffering the content and waiting for all the javascript files to load ... but this is just a bad assumption because no behavior occurs in link tags with href attribute.



At the moment I can work around the problem easily, but I will open the problem for fancybox.

0


source


Try using below code:



$(domObject).ajaxSubmit({
   dataType: "html",
   async: true,
   success:  function(result) {
     $.fancybox(result, {
        padding:    0,
        margin:     0,
        content:    result,
        autoSize:   false
     });
   }
});

      

-1


source







All Articles