How to get item id in PHP variable

Question

Is it possible to get the id element in a PHP variable?

Let's say I have several elements with identifiers:

 <span id="1" class="myElement"></span> <span id="2" class="myElement"></span> 

How do I get this in a PHP variable to send a request. I guess I have to resubmit the page, and everything is fine. I would like to use POST. Can I do something like:

 <script language="JavaScript"> $(document).ready(function(){ $(".myElement").click(function() { $.post("'.$_SERVER['REQUEST_URI'].'", { id: $(this).attr("id") }); }); }); </script> 

I need to pass $(this).attr('id') to $newID to run

 SELECT * from t1 WHERE id = $newID 

jQuery is a very powerful tool, and I would like to figure out a way to combine its power with server code.

Thanks.

Answer 1

This is similar to your question: Ajax post with jQuery

If you want everything in one file (sending to the active file), here is what you need in the general case:

 <?php // Place this at the top of your file if (isset($_POST['id'])) { $newID = $_POST['id']; // You need to sanitize this before using in a query // Perform some db queries, etc here // Format a desired response (text, html, etc) $response = 'Format a response here'; // This will return your formatted response to the $.post() call in jQuery return print_r($response); } ?> <script type='text/javascript'> $(document).ready(function() { $('.myElement').click(function() { $.post(location.href, { id: $(this).attr('id') }, function(response) { // Inserts your chosen response into the page in 'response-content' DIV $('#response-content').html(response); // Can also use .text(), .append(), etc }); }); }); </script> <span id="1" class="myElement"></span> <span id="2" class="myElement"></span> <div id='response-content'></div> 

Here you can configure the requests and response and what you would like to do with the answer.

Answer 2

I have two "good" options.

The first is to initiate a mail request every time you change an order. You can reorder using jQuery UI sortable . Most libraries that support drag and drop also allow you to place an event callback with a simple initialization function.

In this callback, you initiate $.post as you wrote it in your code (although I would strongly recommend that you look at the actual documentation on this subject to make sure you send POSTing to the right place).

The second strategy is to contrailize when you submit the form. If you use jQuery Form Plugin to process your forms, they allow you to specify before the serialization callback, where you can simply add a field to your form that sets the order of the elements.

In both cases, you need to write your own function that actually serializes the identifiers of the elements. Something like the following will be fine (completely untested, may contain syntax errors):

 var order = []; $('span.myElement').each(function(){ // NB, "this" here is a DOM element, not a jQuery container order.push(this.id); }); return order.join(','); 

Answer 3

You are absolutely right, something along these lines will work. Here is an example:

(btw, using $.post or $.get does not $.get sending the page, but sends an AJAX request, which can call the callback function after the server returns, which is pretty neat)

 <script language="JavaScript"> $(document).ready(function(){ $(".myElement").click(function() { $.post(document.location, { id: $(this).attr("id") }, function (data) { // say data will be some new HTML the server sends our way // update some component on the page with contents representing the element with that new id $('div#someContentSpace').html(data); }); }); }); </script> 

Answer 4

Your approach looks great to me, but jQuery does not have the $ _SERVER variable, as PHP does. The URL you would like to provide would be window.location (I believe that an empty string will work as well, or you can just provide the URL yourself). It seems you are just sending an identifier, so this will work.

If you want the page to respond to this change, you can add a callback function to $.post() . You can do different things.

 $.post(window.location, {id: this.id}, function (data) { //one location.reload(); //two $("#responsedata").html(data); //three $("#responsedata").load("affected_page.php #output"); }); 

I think number 2 is the most elegant. It does not require a page reload. Ask the server-side php script to cancel all the data you want to return (json, html, whatever) and it will be placed in the data above for jQuery to process as you like.

By the way, on the server side performing the request, do not forget to sanitize $ id and put it in quotation marks. You do not want someone SQL injecting you.