$.fancybox is not a function (fancybox pop up ajax response)

Question

I want to pop up the ajax response by fancybox, I saw the network section in console, the response is ok. But I am getting $.fancybox is not a function. thanks in advance!

$("#mysubmit").click(function(){
 var myvar = {
"secure_key":"41561541561561","username":$("#username").val(),"password" :$("#password").val()};

$.ajax({

    type: "POST",
    url: "http://127.0.0.1/ajaxtest.php",
    async: false,
    data: myvar,
    success: (function (response) {
        var result =
            "<div id='result'>" +
            "<p>" + response + "</p>" +
            "</div>";
        //$.facybox is not a function HERE
        $.fancybox(result, {
            type: "html",
        }); // show formated response
      })
   })

});

Did you add fancybox.min.js file? I think your fancybox js isn't loaded. — Mizanur Rahman Khan, Aug 20 '17 at 18:29
of course!!! and it's is working on my page, but not is this function — Zain Deeb, Aug 20 '17 at 18:33

score 0 · Accepted Answer · answered Aug 20 '17 at 18:35

0

FancyBox has to be instanciated on an element.
You actually try to instanciate it on jQuery...

Try this:

success: (function (response) {
  var result =
    "<div id='result'>" +
    "<p>" + response + "</p>" +
    "</div>";

  $("body").append( $(result) );

  $(document).find("#result").fancybox(); // show formated response
})

answered Aug 20 '17 at 18:35

Louys Patrice Bessette

33,375
6
36
64

but in this way it will not close! – Zain Deeb Aug 20 '17 at 18:42
Add some options (I didn't)... See [here](http://fancybox.net/howto) for an example (at the bottom) and [here](http://fancybox.net/api) for the complete option list. – Louys Patrice Bessette Aug 20 '17 at 18:43

score 0 · Answer 2 · answered Aug 20 '17 at 21:32

in case if anyone searching for the same problem, here is the solution:

$("#mysubmit").click(function(){
var myvar = {
"secure_key":"41561541561561","username":$("#username").val(),"password" :$("#password").val()};

 $.ajax({

    type: "POST",
    url: "http://127.0.0.1/ajaxtest.php",
    async: false,
    data: myvar,
    success: (function (response) {
      var result =
        "<div id='result' style='display: none;'>" +
        "<p>" + response + "</p>" +
        "<a class='btn' data-fancybox-close=''>OK!</a>"+
        "</div>";

      $("body").append(result);
    })
})

});

and then I added the #result as a data-scr to tag, works perfectly.

<a data-fancybox type="Submit" id="mysubmit" class="btn" data-src="#result" >Submit </a>

according to what Mr @Louys Patrice Bessette taught me. – Zain Deeb Aug 20 '17 at 21:34 — Zain Deeb, Aug 20 '17 at 21:34

$.fancybox is not a function (fancybox pop up ajax response)

2 Answers2