SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru worchyld's Avatar
    Join Date
    Jul 2003
    Newcastle upon Tyne
    0 Post(s)
    0 Thread(s)

    Ajax InnerHTML Issue?

    We have a page which lists all the current customers. Above this list sits a quick entry box, where you can write a new customer entry, and press "save".

    Hitting save will launch an ajax page, which will save the info to the database.

    The problem we're having is that the table list never updates. That is, unless we put the table TWICE. Once in the listing page, and once in the ajax page.

    Why do I have to put my table twice, in two files?

    We've tried using InnerHTML, but you can only ever replace or append to it. Nor can you make InnerHTML launch complex PHP code as it will throw up errors.

    I do not want to replace/append to my div, but rather just show my updated table again in the same div, automatically updating to show the new entry!

    Steps in summary...

    1. "Page one" is a list of current customers and has a quick entry table sitting above it where you can create a new customer entry.
    2. Once you hit save, this will launch an ajax page, which will perform a basic SQL insert.
    3. The table (on page one) must update to show the changes. I do not want to write the table twice.

    I have tried making the InnerHTML load in a php script, but it doesn't like it and will throw up errors.

    My question is therefore; *how do you make the table update, without repeating the code that draws the table more than once?*

    I've included some sample code. (This is of the main page).

    <!-- Javascript (uses the SACK framework) -->
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
    var ajax = new sack();
    function whenLoading(){
    	var e = document.getElementById('replaceme'); 
    	e.innerHTML = "<p>Sending Data...</p>";
    function whenLoaded(){
    	var e = document.getElementById('replaceme'); 
    	e.innerHTML = "<p>Data Sent...</p>";
    function whenInteractive(){
    	var e = document.getElementById('replaceme'); 
    	e.innerHTML = "<p>getting data...</p>";
    function whenCompleted(){
    	var e = document.getElementById('sackdata');
    	if (ajax.responseStatus){
    		var string = "<p>Status Code: " + ajax.responseStatus[0] + "</p><p>Status Message: " + ajax.responseStatus[1] + "</p><p>URLString Sent: " + ajax.URLString + "</p>";
    	} else {
    		var string = "<p>URLString Sent: " + ajax.URLString + "</p>";		
    	e.innerHTML = string;	
    function doit(){
    	var form = document.getElementById('quickEntryForm');
    	ajax.setVar("item" , form.item.value);
    	ajax.requestFile = "process-sack.php";
    	ajax.method = form.method.value;
    	ajax.element = 'replaceme';
    	ajax.onLoading = whenLoading;
    	ajax.onLoaded = whenLoaded; 
    	ajax.onInteractive = whenInteractive;
    	ajax.onCompletion = whenCompleted;
    <form name="quickEntryForm" method="post" action="process-sack.php">
    <input type="hidden" name="method" id="method" value="POST" />
    Enter Item: <br />
    <input type="text" name="item" id="item" />
    <input type="submit" onclick="doit();" />
    <div id="replaceme"></div>
    <div id="sackdata">
    	<!-- this is where I would like to have my
    		table of current records. However, once the
    		form is submitted, the sackdata can only ever 
    		be replaced or appended to. I do not want to do 
    		either. What I want to do is simply show the table
    		again (without recoding it again) -->

    Many thanks.

  2. #2
    SitePoint Guru worchyld's Avatar
    Join Date
    Jul 2003
    Newcastle upon Tyne
    0 Post(s)
    0 Thread(s)
    After some researching, I've decided not to pursuit this issue. Although the problem can be solved by making innerhtml (or DOM) insert a table row into my existing table, I've decided to resolve the issue another way (that isn't ajax).

    Thanks for all to those who helped.



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts