Nanonano Posted January 14, 2012 Share Posted January 14, 2012 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";}?> Link to comment Share on other sites More sharing options...
Nanonano Posted January 15, 2012 Author Share Posted January 15, 2012 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";}?> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.