Nanonano 1 Posted January 14, 2012 Report Share Posted January 14, 2012 (edited) Hello everyone. I was wondering if some of you might help a beginner with an issue concerning AJAX with jQuery 1.7.1 and an external PHP-file. I want to have a div, which by clicking on it will work as a trigger for an ajax-request to a PHP-file.Then I want to have second div, which by clicking on it will also work as a trigger for an ajax-request, however it gets a different response from the PHP-file. In other words, the response from the PHP-file should depend on which of the two div's was actually clicked. I have done an attempt as shown below.I know that it's missing a way to give my paramter (AjaxParameter) the correct nodevalue, depending on which of the divs was clicked.That is also what I am asking your help for. Apologies for my English, I hope that you understand. So, this is my html-file: <html><head> <script type="text/javascript" src="jquery-1.7.1.js" /> /* Including the jQuery library */ <script type="text/javascript"> var AjaxParameter /* The paramter which I want to pass to UpdatePage.php */ $(document).ready(function (){ $("#TriggerA, #TriggerB").click(function(){ /* If either TriggerA or TriggerB is clicked, */ $.ajax( url:"UpdatePage.php", /* an AJAX request is sent to the file UpdatePage.php , */ type: POST, data: AjaxParameter, /* and the variable AjaxParamter is passed to UpdatePage.php . */ success: function (result){ /* When complete, */ $("#AjaxResponse").html(result); /* put the response in the div with id="AjaxResponse" . */ }); }); }); </script></head> <body> <div id="TriggerA" value="A" style="background-color:green;width:80px;height:60px;" /> <div id="TriggerB" value="B" style="background-color:red;width:80px;height:60px;" /> <div id="AjaxResponse"></div> /* The AJAX response is put here. */ </body></html> This is my UpdatePage.php file: <?php $q=$_POST["AjaxParameter"]; if ($q=='A') {echo "You used TriggerA";} else if ($q=='B'){echo "You used TriggerB";}?> Edited January 14, 2012 by Nanonano Quote Link to post Share on other sites
Nanonano 1 Posted January 15, 2012 Author Report Share Posted January 15, 2012 (edited) Hello again. I found a pretty well working solution to the problem by using the onclick-event: <html><head><script type="text/javascript" src="jquery-1.7.1.js" /> /* Including the jQuery library */<script type="text/javascript">function AjaxFunction(AjaxParameter){$.post("UpdatePage.php", /* a POST request is sent to the file UpdatePage.php , */ {contentVar: AjaxParameter}, /* and the variable AjaxParamter is passed to UpdatePage.php . */function (data){ /* When complete, */$("#AjaxResponse").html(data); /* put the response in the div with id="AjaxResponse" . */});}</script></head><body><div id="TriggerA" style="background-color:green;width:80px;height:60px;" onclick="AjaxFunction('A')" /><div id="TriggerB" style="background-color:red;width:80px;height:60px;" onclick="AjaxFunction('B')" /><div id="AjaxResponse"></div> /* The AJAX response is put here. */</body></html> <?php $q=$_POST["contentVar"]; if ($q=='A') {echo "You used TriggerA";} else if ($q=='B'){echo "You used TriggerB";}?> Edited January 15, 2012 by Nanonano Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.