Databases
StackOverflow2013
Postsdbo
POjQuery, AJAX & PHP: Arrays on server and client data
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery, AJAX & PHP: Arrays on server and client data
    primarykey
    data
    text
    <p>My goal is to dynamically display information via PHP that is then editable via AJAX/json. I have this working for a single instance of the server data, but when I get into multiple instances I am getting lost on how to keep the element and div identities distinct via array on the json page as well as in the jQuery output on the main page.</p> <p>This is the current main page (minus the irrelevant to this question PHP record grabbing). The references in the jQuery are not entirely correct, e.g.</p> <pre><code>data:$("#form_static_").serialize() </code></pre> <p>because it is placing the dynamic identifier after the static_ that I don't know how to handle.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;My Form&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="ckeditor/ckeditor.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#myForm").submit(function(){ $.ajax({ type:"POST", url:"ajax_form_test2-json.php", data:$("#form_static_").serialize(), dataType:"json", success:function(msg){ $("#formResponse_").removeClass('error'); $("#formResponse_").addClass(msg.status_); $("#formResponse_").html(msg.message_); $("#static_name_").html(msg.name_); $("#static_description_").html(msg.description_); }, error:function(){ $("#formResponse_").removeClass('success'); $("#formResponse_").addClass('error'); $("#formResponse_").html("There was an error submitting the form. Please try again."); } }); return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="tabs-left-2" class="content"&gt; &lt;h1 class="page-title"&gt;Static Info&lt;/h1&gt; &lt;?php do { ?&gt; &lt;div id="static_name_&lt;?php echo $row_rsStatic['id']; ?&gt;" class="small_content_heading"&gt;&lt;?php echo $row_rsStatic['name']; ?&gt;&lt;/div&gt; &lt;div id="static_description_&lt;?php echo $row_rsStatic['id']; ?&gt;" class="small_content"&gt;&lt;?php echo $row_rsStatic['description']; ?&gt;&lt;/div&gt; &lt;div id="static_update_&lt;?php echo $row_rsStatic['id']; ?&gt;" style="display:inherit"&gt; &lt;form id="form_static_&lt;?php echo $row_rsStatic['id']; ?&gt;" name="form_static_&lt;?php echo $row_rsStatic['id']; ?&gt;" method="post" action=""&gt; &lt;div id="formResponse_&lt;?php echo $row_rsStatic['id']; ?&gt;"&gt;&lt;/div&gt; &lt;div id="form_static_name_&lt;?php echo $row_rsStatic['id']; ?&gt;" class="small_content_heading"&gt; &lt;input name="id&lt;?php echo $row_rsStatic['id']; ?&gt;" type="hidden" value="&lt;?php echo $row_rsStatic['id']; ?&gt;"&gt; &lt;input name="name&lt;?php echo $row_rsStatic['id']; ?&gt;" type="text" value="&lt;?php echo $row_rsStatic['name']; ?&gt;"&gt;&lt;/div&gt; &lt;div id="form_static_description_&lt;?php echo $row_rsStatic['id']; ?&gt;"&gt; &lt;textarea name="description&lt;?php echo $row_rsStatic['id']; ?&gt;"&gt;&lt;?php echo $row_rsStatic['description']; ?&gt;&lt;/textarea&gt; &lt;script&gt;CKEDITOR.replace('description&lt;?php echo $row_rsStatic['id']; ?&gt;');&lt;/script&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;hr&gt; &lt;?php } while ($row_rsStatic = mysql_fetch_assoc($rsStatic)); ?&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is the json page, again with the dynamic identifiers left off after the respective "_" as I don't know how to make this happen programmatically:</p> <pre><code>&lt;?php //response array with status code and message $response_array = array(); //validate the post form //check the name field if(empty($_POST['static_name_'])){ //set the response $response_array['status_'] = 'error'; $response_array['message_'] = 'Name is blank'; //check the message field } elseif(empty($_POST['static_description_'])) { //set the response $response_array['status_'] = 'error'; $response_array['message_'] = 'Description is blank'; //form validated } else { //(update record here) //set the response $response_array['status_'] = 'success'; $response_array['message_'] = 'Success!'; $response_array['name_'] = $_POST['static_name_']; $response_array['description_'] = $_POST['static_description_']; } echo json_encode($response_array); ?&gt; </code></pre> <p>I have been doing PHP forever but am new to the AJAX/JSON/jQuery world, so not sure that the way this is set up is even ideal for dynamically produced/updated data. Any ideas or advice is greatly appreciated... thanks!</p> <p>EDITS #1: I changed the files to the following, and know I am still missing something as it does not correctly update:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;My Form&lt;/title&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="ckeditor/ckeditor.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("form").submit(function(e){ e.stopPropagation(); var form = $(this); // We're going to use this instead of all those IDs $.ajax({ type:"POST", url:"ajax_form_test2-json.php", data: form.serialize(), dataType:"json", success:function(msg){ $(".response", form) .removeClass('error') .addClass(msg.status) .html(msg.message); $(".name", form).html(msg.name); $(".description", form).html(msg.description); }, error:function(){ $(".response", form) .removeClass('success') .addClass('error') .html("There was an error submitting the form. Please try again."); } }); return false; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="small_content_heading name"&gt;&lt;?php echo $row_rsSafety['name']; ?&gt;&lt;/div&gt; &lt;div class="small_content description"&gt;&lt;?php echo $row_rsSafety['description']; ?&gt;&lt;/div&gt; &lt;div style="display:inherit"&gt; &lt;form method="post" action=""&gt; &lt;div class="response"&gt;&lt;/div&gt; &lt;div class="small_content_heading"&gt; &lt;input name="id" type="hidden" value="&lt;?php echo $row_rsSafety['id']; ?&gt;"&gt; &lt;input name="name" type="text" value="&lt;?php echo $row_rsSafety['name']; ?&gt;"&gt; &lt;/div&gt; &lt;div&gt; &lt;textarea name="description"&gt;&lt;?php echo $row_rsSafety['description']; ?&gt;&lt;/textarea&gt; &lt;script&gt;CKEDITOR.replace('description'); function CKupdate(){ for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); } &lt;/script&gt; &lt;/div&gt; &lt;input type="submit" name="submitForm" value="Edit" onClick="CKupdate();"&gt; &lt;/form&gt; &lt;/div&gt; &lt;hr&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>JSON file:</p> <pre><code>&lt;?php //connect to DB require_once('Connections/job_tool.php'); mysql_select_db($database_job_tool, $job_tool); //response array with status code and message $response_array = array(); //validate the post form //check the name field if(empty($_POST['name'])){ //set the response $response_array['status'] = 'error'; $response_array['message'] = 'Name is blank'; //check the message field } elseif(empty($_POST['description'])) { //set the response $response_array['status'] = 'error'; $response_array['message'] = 'Message is blank'; //form validated } else { //set update variables $update_name = $_POST['name']; $update_desc = $_POST['description']; $update_id = $_POST['id']; //update file on server $sql = "UPDATE static_fields SET name='$update_name', description='$update_desc' WHERE id='$update_id'"; $update_sql = mysql_query($sql, $job_tool) or die('Could not update data: ' . mysql_error()); mysql_close(); //set the response $response_array['status'] = 'success'; $response_array['message'] = 'Update complete!'; $response_array['name'] = $_POST['name']; $response_array['description'] = $_POST['description']; } echo json_encode($response_array); ?&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USarT
    1. USarT
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhy not just use generic names for the inputs, and pass in the ID you're working with as a hidden input?
      singulars
      1. POjQuery, AJAX & PHP: Arrays on server and client data
      1. USlandons
    2. COWould that work if I end up with several (modal) forms on the page based on several sets of data dynamically generated?
      singulars
      1. POjQuery, AJAX & PHP: Arrays on server and client data
      1. USarT
    3. COYes. See my answer.
      singulars
      1. POjQuery, AJAX & PHP: Arrays on server and client data
      1. USlandons
 

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