Databases
StackOverflow2013
Postsdbo
POAJAX request callback using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAJAX request callback using jQuery
    primarykey
    data
    text
    <p>I am new to the use of jQuery for handling AJAX, and have written a basic script to get the basics down. Currently I am POSTing an AJAX request to the same file, and I wish to do some additional processing based on the results of that AJAX call. </p> <p>Here is my code:</p> <pre><code>**/*convertNum.php*/** $num = $_POST['json']; if (isset($num)) echo $num['number'] * 2; ?&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; td {border:none;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="800" border="1"&gt; &lt;tr&gt; &lt;td align="center"&gt;Number To Send&lt;br /&gt;&lt;input type="text" id="numSend" size="40%" style="border:2px solid black;"&gt;&lt;/td&gt; &lt;td align="center"&gt;Number Returned&lt;br /&gt;&lt;input type="text" id="numReturn" size="40%" readonly&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td align="center" colspan="4"&gt;&lt;input type="button" value="Get Number" id="getNum" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;script&gt; $(document).ready(function () { $('#getNum').click(function () { var $numSent = $('#numSend').val(); var json = {"number":$numSent}; $.post("convertNum.php", {"json": json}).done(function (data) { alert(data); } ); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here is the response I get if I submit the number '2':</p> <pre><code>4 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; td {border:none;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="800" border="1"&gt; &lt;tr&gt; &lt;td align="center"&gt;Number To Send&lt;br /&gt;&lt;input type="text" id="numSend" size="40%" style="border:2px solid black;"&gt;&lt;/td&gt; &lt;td align="center"&gt;Number Returned&lt;br /&gt;&lt;input type="text" id="numReturn" size="40%" readonly&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td align="center" colspan="4"&gt;&lt;input type="button" value="Get Number" id="getNum" /&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;script&gt; $(document).ready(function () { $('#getNum').click(function () { var $numSent = $('#numSend').val(); var json = {"number":$numSent}; $.post("convertNum.php", {"json": json}).done(function (data) { alert(data); } ); }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Obviously I'm only interested in receiving and using the number '4', hence my question: <strong>What is the best way to specify exactly what data I want returned?</strong></p> <p>Some thoughts I've had:</p> <ul> <li>wrapping all my HTML inside a if statement (i.e., if $num isset, do NOT output html; else output HTML) but then I'm echoing HTML, and I'd rather not do that.</li> <li>Setting up a separate PHP script to receive my AJAX call: That was what I did originally, and it works just fine. However, I am interested in keeping everything inside one file, and wanted to explore possible ways of doing so.</li> </ul> <p>I'm sure there is an elegant way to do this. Thanks for any suggestions!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJRizz
    1. USJRizz
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAJAX request callback using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAJAX request callback using jQuery
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POAJAX request callback using jQuery
      1. USjezzipin
      1. VTFavorite
    1. COwhy would you like to keep everything in one file. You should structurize your code. Otherwise you will get very lage files with confusing code. And what about css and javascript? Do you want to have it all in one file, too? You can do it but i think this wouldn't be elegant.
      singulars
      1. POAJAX request callback using jQuery
      1. USsteven
    2. COSteven - fair enough. The reaon I want to explore keeping all the calls in one file is because I am working on a project where we will have multiple php pages making AJAX calls, and I am attempting to determine best practices for handling this case. Now, I will say that each script that utilizes an AJAX call like this will have a corresponding .inc include file - perhaps it would be best to make the POST call to that include file, rather than using the same page or a different script. I'm in the exploratory phase of development right now, and the answers I'm getting are enormously helpful.
      singulars
      1. POAJAX request callback using jQuery
      1. USJRizz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload