Jump to content

Using Ajax With Jquery 1.7.1 And External Php-File.


Recommended Posts

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 by Nanonano
Link to post
Share on other sites

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 by Nanonano
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...