passing php variable to modal window with click function

Question

I have a click function that launches a modal window. Inside of the modal window I load modal_window.php. The click function look like this:

$('a#testmodal').click(function(e){
<? $id = $_GET['id']; ?>
varid = <? echo $id; ?>;
        $.get('modal_window.php?id=' + varid, function(data){
modal.open({content: data});});
                e.preventDefault();
            });

And the link that I'm using to trigger it looks like this:

<a id="testmodal" href="modal_2.php?id=5">Test</a>

The strange thing is when I click on the link the first time nothing happens. However when I click on it the second time everything works as it should. The reason for this seems to be that the jquery piece of my code runs the first time before the php variable $id is set (the jquery section runs and then the php section runs). Then when I click on the link the second time (the php variable $id within the click function is set at this point) everything works perfectly.

So my question is is there a different way to pass a variable from my link to my click function that does not depend on php. Something like this:

<a id="testmodal" href="" var id ="5">Test</a>

omma2289 · Accepted Answer · 2013-07-03 06:38:11Z

1

Your code won't work the first time because there won't be any data on $_GET so the function will have a syntax error and the link will act "normally". On second click you will have the id parameter so it will open the modal.

Now, I don't quite understand the logic behind your implementation but if you simply want to pass a value to your click handler you could use data attributes:

HTML

<a id="testmodal" href="#" data-id ="5">Test</a>

Javascript

$('#testmodal').click(function(e){
    e.preventDefault();
    $.get('modal_window.php?id=' + $(this).data('id'), function(data){
        modal.open({content: data});}); 
});

That would work, but I assume you'll have multiple links to different modal windows so you may want to give a class to your links and use that as your selector in the click handler, something like:

$('.open-modal').click(function(e){
    ...
});

answered Jul 3, 2013 at 6:38

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

matt tuman Over a year ago

Thanks so much. That almost solves the problem. My only issue now is when I have multiple links like this: '<a id="testmodal" href="#" data-id ="5">Test</a> <a id="testmodal" href="#" data-id ="6">Test</a>' (eventually these links would be generated dynamically within a while loop). Now the first link works but the second one doesn't.

omma2289 Over a year ago

ids must be unique in your HTML, that's why I suggested using a class instead: <a class="open-modal" href="#" data-id ="5">Test</a> and use the class selector as I mentioned above to bind the handlers

matt tuman Over a year ago

Thanks again. It works perfectly...and thanks for taking the time to explain the class versus ids approach.

Community · Accepted Answer · 2017-05-23 11:58:33Z

0

PHP runs before the client is even sent the data (PHP is run by your server). If you inspect the source, you won't see any

That said, see this question: How can I get query string values in JavaScript?.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jul 3, 2013 at 3:55

Travis DePrato

4124 silver badges9 bronze badges

Collectives™ on Stack Overflow

passing php variable to modal window with click function

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related