Menu icon Foundation
Using AJAX and the Reveal Modal (Foundation 6)

So here's the problem.

I use ajax to switch between two different views on my cricket website (Team 1 and Team 2). I can get the modals to work, before I change views, but when I do, they don't work (Clicking on the result).

I'm am using php, along with this ajax.

I know that Foundation 6 stopped using it:

 

"Please note that we removed the option for AJAX loaded modals in Foundation 6. We did make it very easy to implement on your own though, check out a sample in the Advanced section."

I've tried to implement it, but I don't understand it.

Can someone please give me a working example?

As you can see, after changing team, the modals won't display, after an ajax request. How do I solve this?

 

This is an example of the code from my php file that gets sent from the server. Along with the button to open it, it won't open.

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Here's the ajax method:

function displayFixtures(val) {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log("Is this shit hit? ");
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("fixtures-container").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","get-fixtures.php?f="+val,true);
        xmlhttp.send();
    }

 

Please give a working code example on how to solve this.

 

Thanks.

 

AJAXrevealmodalfoundation 6

So here's the problem.

I use ajax to switch between two different views on my cricket website (Team 1 and Team 2). I can get the modals to work, before I change views, but when I do, they don't work (Clicking on the result).

I'm am using php, along with this ajax.

I know that Foundation 6 stopped using it:

 

"Please note that we removed the option for AJAX loaded modals in Foundation 6. We did make it very easy to implement on your own though, check out a sample in the Advanced section."

I've tried to implement it, but I don't understand it.

Can someone please give me a working example?

As you can see, after changing team, the modals won't display, after an ajax request. How do I solve this?

 

This is an example of the code from my php file that gets sent from the server. Along with the button to open it, it won't open.

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Here's the ajax method:

function displayFixtures(val) {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log("Is this shit hit? ");
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("fixtures-container").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","get-fixtures.php?f="+val,true);
        xmlhttp.send();
    }

 

Please give a working code example on how to solve this.

 

Thanks.

 

Glenn Philp about 3 years ago

@Edward I started a discussion on this matter a few months ago. Check-out "Reveal Modal with AJAX Content", I hope this can provide some help.