Load data in a popup using Ajax

Question

I'm using magnificient popup on my website, and I would like to execute ajax function when a link is clicked and the result of the query should be the content od the popup.

this is my code (I'm pretty new in JQuery) :

<script>
  function showPics(str)
  {
    if (str=="")
    {
      document.getElementById("displayPics").innerHTML="";
      return;
    } 

    xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("displayPics").innerHTML=xmlhttp.responseText;
      }
    }

    xmlhttp.open("GET","getpics.php?q="+str,true);
    xmlhttp.send();
  }
</script>

<a class="1-popup" href="#">Guerlain</a>

<script type="text/javascript">
    $('a').click(function() {
        showPics($(this).attr('class').charAt(0)), //Ajax function call
        $(this).magnificPopup({ //Popup call
            type:'inline',
            midClick: true,
            closeBtnInside:true
        });
    });
</script>

<div id="displayPics"><b>Pictures will be listed here.</b></div>

The content is loaded, but the popup not.

any necessity for you use `XmlHttpRequest` over `ajax`? If you were just using JS you could use `XmlHttpRequest`, seeing that youre using jQuery, I wonder why.. — krishwader, Jul 13 '13 at 17:16
And if you're using jQuery you should use their AJAX functions — turnt, Jul 13 '13 at 17:16
@Cygwinnian thank you.. But normally I should be able to call a JS function from a JQuery code.. — , Jul 13 '13 at 17:22

score 0 · Accepted Answer · answered Jul 13 '13 at 21:57

Here's the solution of my issue :

<a class="1-popup" href="#displayPics">Guerlain</a>

<script type="text/javascript">
    $('a').click(function(){
        showPics($(this).attr('class').charAt(0)) //Ajax function call
    });
</script>

<script type="text/javascript">
    $('a').magnificPopup({ //Popup call
        type:'inline',
        midClick: true,
        closeBtnInside:true
    });
</script>

<div id="displayPics" class="white-popup mfp-hide"><b>Pictures will be listed here.</b></div>

Thank you all.

Load data in a popup using Ajax

1 Answers1