Passing PHP variable to Jquery without refresh

Question

I apologize upfront for my lack of jquery knowledge. In this website I am building, a user is presented with a number of thumbnail images representing plants. When a thumbnail is clicked, a jquery popup is initiated. What I would like to be able to do is pass a php variable that has the ID of the plant over to the jquery popup to display the prper information. Any help would be greatly appreciated. Thank you.

EDIT: http://www.plantcombos.com/header/main_index.php?display=random_mix

can you post your html as well as jquery code. Or make a sample of you are trying to achieve at jsfiddle.net or jsbin.com — DG3
– DG3, Commented Mar 30, 2012 at 14:34
I would advise you post some code, or you will probably be voted down! We are here to help, not write for you! — Ben Carey
– Ben Carey, Commented Mar 30, 2012 at 14:35
To pass a PHP (server side) variable to Jquery (client side), you will need to make an AJAX call. Look at Jquery ajax (api.jquery.com/jQuery.ajax) — Ayush
– Ayush, Commented Mar 30, 2012 at 14:36
Easy Ben, I'm not looking for anyone to write the code for me. I accidentally forgot to post the url — Ryan Beaulieu
– Ryan Beaulieu, Commented Mar 30, 2012 at 14:37
What he means is to post the relevant code in your question. Very few of us will want to navigate to another page, click to view source, and then try to find the relevant section. — Michael
– Michael, Commented Mar 30, 2012 at 14:39

Manse · Accepted Answer · 2012-03-30 14:47:22Z

1

Im pretty sure you dont need to query PHP each time ... something like this would work :

<img class-"imgclick" src="/small-plant.jpg" data-id="123" />

This would be the output from your server side (php if thats what your using) - it stores the ID of the image in the data attribute

JavaScript :

$(document).ready(function() {
   $('.imglink').click(function(event) {
      event.preventDefault();
      $('dialogid')
        .data('image_id', $(this).data('id'))
        .dialog('open');
   })
})

the image id from the data attribute is then passed to the data attribute of the dialog. This attribute can be accessed using $(this).data('image_id') form within the dialog then

edited Mar 30, 2012 at 14:47

answered Mar 30, 2012 at 14:39

Manse

38.1k11 gold badges88 silver badges112 bronze badges

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

1 Comment

Colin Brock Over a year ago

I'm assuming you wanted a " instead of a : at the end of that data attribute

Manse · Accepted Answer · 2012-03-30 14:57:21Z

0

Use the jQuery AJAX method to gather data from a PHP file and display it on the page. It is very easy and you can pass any variables (parameters) you like to the page.

http://api.jquery.com/jQuery.ajax/

For example:

// This will send a request to a PHP page
$.ajax({
    url: "http://example.com/test.php",
    dataType: "html",
    success: function(data){
        // Place the returned data into your content
        $('#image').html(data);
    }
});

edited Mar 30, 2012 at 14:57

Manse

38.1k11 gold badges88 silver badges112 bronze badges

answered Mar 30, 2012 at 14:39

Ben Carey

17k20 gold badges95 silver badges181 bronze badges

Collectives™ on Stack Overflow

Passing PHP variable to Jquery without refresh

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related