StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>When you say "update instantly" I presume you mean update the Document via Javascript. Ajax and page refreshes don't go together. </p> <p>How are you displaying your existing rows of data? Say for example you were listing them like this:</p> <pre><code><div id="row1">row 1</div> <div id="row2">row 2</div> </code></pre> <p>Where row1 and row2 are rows in your database with primary keys 1 & 2 respectively. Use a simple javascript function to remove the associated div from the DOM:</p> <pre><code>function deleterec(pk) { url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random(); update(pk, url); } function update(pk, url) { var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere if(xmlHttp==null) { alert("Your browser is not supported?"); } xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById(layer).innerHTML=xmlHttp.responseText; removeDomRow(pk); //You may wish to check the response here } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") { document.getElementById(layer).innerHTML="loading"; } } xmlHttp.open("GET",url,true); xmlHttp.send(null); } </code></pre> <p>And the following function to manipulate the DOM:</p> <pre><code>function removeDomRow(pk){ var row = document.getElementById('row' + pk); row.parentNode.removeChild(row); } </code></pre> <p>If you're using tables:</p> <pre><code><tr id="row1"> <td>row 1</td> </tr> <tr id="row2"> <td>row 2</td> </tr> </code></pre> <p>You could use:</p> <pre><code> function removeDomRow( id ) { // delete table row var tr = document.getElementById( 'row' + id ); if ( tr ) { if ( tr.nodeName == 'TR' ) { var tbl = tr; // Look up the hierarchy for TABLE while ( tbl != document && tbl.nodeName != 'TABLE' ) { tbl = tbl.parentNode; } if ( tbl && tbl.nodeName == 'TABLE' ) { while ( tr.hasChildNodes() ) { tr.removeChild( tr.lastChild ); } tr.parentNode.removeChild( tr ); } } } </code></pre> <p>In respect to theraccoonbear's point, if you were to make use of a framework such as Qjuery things would be far easier:</p> <pre><code>$('#row'+id).remove(); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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