Databases
StackOverflow2013
Postsdbo
PONested Ajax problem. How to debug/solve?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONested Ajax problem. How to debug/solve?
    primarykey
    data
    text
    <p>There is a lot of <a href="https://stackoverflow.com/questions/2548241/jquery-nested-ajax">posts</a> about nested Ajax problems, but I can't figure out whats wrong with my own.</p> <p>The problem I see is that the server side script doesn't receive the form values in the nested Ajax call.</p> <p>On the client side I get that <code>result2</code> is null.</p> <p>The nested Ajax code is encapsulated with <code>// problem</code>.</p> <p>Can anyone see why the nested Ajax doesn't receive the form values?</p> <pre><code>$(document).ready(function(){ $('form').live('submit', function(){ // ... $.ajax({ type: "GET", url: "/cgi-bin/ajax_confirm.pl", contentType: "application/json; charset=utf-8", dataType: "json", // async: false, data: $(this).serialize(), error: function(XMLHttpRequest, textStatus, errorThrown) { $('div#create_result').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown); $('div#create_result').addClass("error"); alert("Error occured in ajax.js confirm code."); }, success: function(result){ if (result.error) { $('div#create_result').text("result.error: " + result.error); $('div#create_result').addClass("error"); } else { // server side script says everything is okay var users = $.parseJSON(result.users); var owners = $.parseJSON(result.owners); $("#dialog:ui-dialog").dialog("destroy"); $("#dialog-confirm").dialog({ resizable: false, height: 600, modal: true, open: function() { $(this).children('div.dialog-text').replaceWith("&lt;h3&gt;&lt;b&gt;Users&lt;/b&gt;&lt;/h3&gt;" + makeDialogTable(users) + "&lt;h3&gt;&lt;b&gt;Owners&lt;/b&gt;&lt;/h3&gt;" + makeDialogTable(owners)); }, buttons: { Okay: function() { $(this).dialog("close"); // problem $.ajax({ type: "GET", url: "/cgi-bin/ajax.pl", contentType: "application/json; charset=utf-8", dataType: "json", // generate and send parameters to server-side script data: $(this).serialize(), // script call was *not* successful error: function(XMLHttpRequest, textStatus, errorThrown) { $('div#create_result').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown); $('div#create_result').addClass("error"); }, success: function(result2){ if (result2.error) { // script returned error $('div#create_result').text("result2.error: " + result2.error); $('div#create_result').addClass("error"); } else { // perl script says everything is okay $('div#create_result').text("result2.success: " + result.success + ", result2.id: " + result.id); $('div#create_result').addClass("success"); } //else } // success }); // ajax } else { // if (is_okay) { ... $('div#create_result').text("Fill out the form to create an activity"); $('div#create_result').addClass("error"); } // else }, // Okay // problem Cancel: function() { is_okay = 0; $(this).dialog("close"); } } // buttons }); // dialog } //else } // success }); // ajax // ... </code></pre> <p><strong>Update</strong> Here is the HTML, when shown looks like <a href="http://img197.imageshack.us/img197/2647/93719315.png" rel="nofollow noreferrer">this</a></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html dir="ltr"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;script src="http://code.jquery.com/jquery-1.6.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.core.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.widget.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/ajaxv2.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/external/jquery.bgiframe-2.1.2.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.core.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.widget.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.mouse.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.button.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.draggable.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.position.js"&gt;&lt;/script&gt; &lt;script src="http://jqueryui.com/ui/jquery.ui.dialog.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="page-body"&gt; &lt;div class="create-new"&gt; &lt;div id="create_result" style="display:none;"&gt; &lt;/div&gt; &lt;form id="create_form" name="create_form" action="" method="post"&gt; &lt;input name="anchor" id="anchor" value="create" type="hidden"&gt; &lt;label class="new" for="title"&gt;Title:&lt;/label&gt; &lt;input class="new" type="text" name="title" id="title" /&gt; &lt;label class="new" for="owner"&gt;Owner:&lt;/label&gt; &lt;input class="new" type="text" name="owner" id="owner" /&gt;&lt;br class="new"/&gt; &lt;label class="new" for="users"&gt;Users:&lt;/label&gt; &lt;input class="new" type="text" name="users" id="users"/&gt; &lt;label class="new" for="groups"&gt;Groups:&lt;/label&gt; &lt;input class="new" type="text" name="groups" id="groups" /&gt;&lt;br class="new"/&gt; &lt;label class="new" for="begin_date"&gt;Begin Date:&lt;/label&gt; &lt;input class="new" type="text" id="from" name="from"/&gt; &lt;label class="new" for="end_date"&gt;End Date:&lt;/label&gt; &lt;input class="new" type="text" id="to" name="to"/&gt;&lt;br class="new"/&gt; &lt;label class="new" for="type"&gt;Type:&lt;/label&gt; &lt;input name="ctype" id="ctype" value="individuel" type="radio" /&gt; Individuel &lt;br/&gt; &lt;input name="ctype" id="ctypee" value="course" type="radio" /&gt; Course &lt;br/&gt; &lt;button class="n" type="submit"&gt;Create&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="dialog-confirm" title="Can you confirm?" style="display: none;"&gt; &lt;div class="dialog-text"&gt; &lt;p&gt;dialog text goes here&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;TMPL_INCLUDE NAME="menu.tmpl"&gt; &lt;table class="alerts" cellspacing="0"&gt; &lt;tbody&gt; &lt;tr class="header"&gt; &lt;th class="activity-header"&gt;ID&lt;/th&gt; &lt;th class="activity-header"&gt;Title&lt;/th&gt; &lt;th class="activity-header"&gt;Owner&lt;/th&gt; &lt;th class="activity-header"&gt;Begin Date&lt;/th&gt; &lt;th class="activity-header"&gt;End Date&lt;/th&gt; &lt;th class="activity-header"&gt;Type&lt;/th&gt; &lt;th class="activity-header"&gt;&lt;/th&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;TMPL_LOOP NAME=ROW&gt; &lt;form action="" method="post"&gt; &lt;input name="anchor" value="&lt;TMPL_VAR ID&gt;" type="hidden"&gt; &lt;table class="alerts" cellspacing="0"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td class="activity-data"&gt;&lt;TMPL_VAR ID&gt;&lt;/td&gt; &lt;td class="activity-data"&gt; &lt;input name="title" id="&lt;TMPL_VAR ID&gt;_title" value="&lt;TMPL_VAR TI&gt;" type="text" /&gt; &lt;/td&gt; &lt;td class="activity-data"&gt; &lt;input name="owner" id="&lt;TMPL_VAR ID&gt;_owner" value="&lt;TMPL_VAR OW&gt;" type="text" /&gt; &lt;/td&gt; &lt;td class="activity-data"&gt; &lt;input name="from" id="&lt;TMPL_VAR ID&gt;_begin_date" value="&lt;TMPL_VAR BD&gt;" type="text" class="datepick" /&gt; &lt;/td&gt; &lt;td class="activity-data"&gt; &lt;input name="to" id="&lt;TMPL_VAR ID&gt;_end_date" value="&lt;TMPL_VAR ED&gt;" type="text" class="datepick" /&gt; &lt;/td&gt; &lt;td class="activity-data"&gt; &lt;input name="ctype" value="individuel" type="radio" &lt;TMPL_VAR IN&gt;/&gt; Individuel &lt;br&gt; &lt;input name="ctype" value="course" type="radio" &lt;TMPL_VAR CO&gt;/&gt; Course &lt;/td&gt; &lt;td class="edit-column"&gt;&lt;a href="javascript:showhide('&lt;TMPL_VAR ID&gt;');"&gt;Members&lt;/a&gt; &lt;input value="Save" type="submit"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="&lt;TMPL_VAR ID&gt;" class="edit-row" style="display: none;"&gt; &lt;td class="activity-data"&gt;&lt;/td&gt; &lt;td class="activity-data" colspan="5" align="center"&gt; Users &lt;input name="users" id="&lt;TMPL_VAR ID&gt;_users" size="35" value="&lt;TMPL_VAR US&gt;" type="text" /&gt; Groups &lt;input name="groups" id="&lt;TMPL_VAR ID&gt;_groups" size="35" value="&lt;TMPL_VAR GR&gt;" type="text" /&gt; &lt;/td&gt; &lt;td class="edit-column"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/form&gt; &lt;/TMPL_LOOP&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USSandra Schlichting
    plurals
    1. PL
      singulars
      1. LTLinked
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COTry less nesting :(. Abstract it into Objects and functions. Not inlining all your anonymous functions makes things easier.
      singulars
      1. PONested Ajax problem. How to debug/solve?
      1. USRaynos
    2. COcan we see the html that goes with this ?
      singulars
      1. PONested Ajax problem. How to debug/solve?
      1. USmcgrailm
    3. CO@mcgrailm : Of course. Also added a screenshot. it is the "Create" button I click on.
      singulars
      1. PONested Ajax problem. How to debug/solve?
      1. USSandra Schlichting
 

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