Instant update

tomtom · May 24, 2008

Hey,

I'm building an "Instant update" thing, like VB forums have - like a quick edit.

I want a "loading" icon too and I feel my current method is really messy, and I'm looking for an alternative solution. I need to get across the new content value and the ID. I want it to, after you've saved it, for it to go back to the page and show the new content. Just like VB forums

My current code is...

<script type="text/javascript">

var time_variable;

function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","/delta/modules/k.php?test=$folder[$count]",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname=" + txtname.value); //Posting txtname to PHP File
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert("Error during AJAX call. Please try again");
     }
   }
}
</script>
<div id="edit_page" style="display: none;">";

$select = mysql_query("SELECT * from `pages` WHERE `alias` = '" . $folder[$count] . "'");
while($module = mysql_fetch_array($select)) {
    echo "
<form name=\"myForm\">
<table>
<tr>
  <td><input type=\"hidden\" value=\"$module[id]\" name=\"test\" id=\"test\"></td>
  <td><textarea rows=\"20\" cols=\"70\" name=\"txtname\" id=\"txtname\">\" . $module[content] . \"</textarea></td>
</tr>
<tr>
  <td colspan=\"2\"><input type=\"button\" value=\"Submit\" onclick=\"ajaxFunction(); ShowContent('load');  HideContent('edit_page'); ShowContent('norm');\"></td>
</tr> 
</table>
<div id=\"message\" name=\"message\"></div> 
</form>";
}
echo "
</div>
<div style=\"display: none;\" id=\"load\"><img src=\"/delta/modules/ajax-loader.gif\"></div>
<div id=\"norm\">
norm content is generally here
</div>

and my k.php

<body onload="HideContent('load');>
<?php
include "../../deltasite/config.php";
if($_POST["txtname"] == ""){
echo "name is empty";
}else{
    $get_modules = mysql_query("SELECT * from `pages` WHERE `alias` = '" . $_GET[test] . "'");
    while($module = mysql_fetch_array($get_modules)) {
        $version=$module[version]+1;
        $add_module = mysql_query("UPDATE `pages` SET `version` = '" . $version . "', `date_modified` = '" . time() . "', `modified_by` = '" . $logged['id'] . "', `content` = '" . $_POST['txtname'] . "' WHERE `id` = '" . $module[id] . "'");

    }
}
?>

</body>

the body onload doesn't work, and currently when it goes back to the content..it doesnt show the update content.

Sorry for awful code, but yeah cheers.

tomtom · May 24, 2008

Sorry, my bad. top code is..

<?php
                       echo "
<script language=\"JavaScript\" type=\"text/javascript\">

var time_variable;

function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject(\"Msxml2.XMLHTTP\")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var txtname = document.getElementById(\"txtname\");
    xmlhttp.open(\"POST\",\"/delta/modules/k.php?test=$folder[$count]\",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(\"txtname=\" + txtname.value); //Posting txtname to PHP File
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById(\"message\").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     }
     else {
        alert(\"Error during AJAX call. Please try again\");
     }
   }
}
</script>
<div id=\"edit_page\" style=\"display: none;\">";

$select = mysql_query("SELECT * from `pages` WHERE `alias` = '" . $folder[$count] . "'");
while($module = mysql_fetch_array($select)) {
    echo "
<form name=\"myForm\">
<table>
<tr>
  <td><input type=\"hidden\" value=\"$module[id]\" name=\"test\" id=\"test\"></td>
  <td><textarea rows=\"20\" cols=\"70\" name=\"txtname\" id=\"txtname\">" . $module[content] . "</textarea></td>
</tr>
<tr>
  <td colspan=\"2\"><input type=\"button\" value=\"Submit\" onclick=\"ajaxFunction(); ShowContent('load');\"></td>
</tr> 
</table>
<div id=\"message\" name=\"message\"></div> 
</form>
";
}
?>

HaLo2FrEeEk · May 25, 2008

What I did for loading is in the main call for the ajax request, call up a function called loading() that checks to see if the loading div (located on the page you're running the ajax from, this should start hidden, display: none;) is visible or hidden; if it's hidden, show it, and vice versa. Then on the data return, run loading() again, that way since it's visible, it'll get hidden. Here's my xmlhttp.js file:

var http_request = false;
var obj;

function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      // set type accordingly to anticipated content type
      //http_request.overrideMimeType('text/xml');
      http_request.overrideMimeType('text/html');
      }
    } else if (window.ActiveXObject) { // IE
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
    try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
    }

  http_request.onreadystatechange = alertContents;
  http_request.open('POST', url, true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
  }

function loading() {
  var load;
  load = document.getElementById("loading");
  vis = load.style;
  if(vis.display == '' || vis.display == 'block') {
    vis.display = 'none';
    } else if(vis.display == 'none') {
    vis.display = 'block';
    }
  }

function alertContents() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      //alert(http_request.responseText);
      result = http_request.responseText;
      //document.getElementById('status').innerHTML = result;
      obj.innerHTML = result;
      loading();
      } else {
      alert('There was a problem with the request.');
      loading();
      }
    }
  }

function get(url, div_id) {
  some stuff;
  var poststr = some stuff;
  obj = document.getElementById(div_id);
  loading();
  makePOSTRequest(url, poststr);
  }

notice the loading() function, where I call it to start in the get function, then again in the alertcontents() one, whether or not the request fails or succeeds. This works great. I have my div called loading (id="loading") in the page I'm calling the AJAX on, hidden, and it's located in the top right corner, with a padding of 5 pixels. You can put this in the middle of the page like this:

function loading() {
  var load;
  load = document.getElementById("loading");
  vis = load.style;
  var top = (window.screenHeight / 2) - (vis.height / 2);
  var left = (window.screenWidth / 2) - (vis.width / 2);
  vis.position = absolute;
  vis.left = left;
  vis.top = top;
  if(vis.display == '' || vis.display == 'block') {
    vis.display = 'none';
    } else if(vis.display == 'none') {
    vis.display = 'block';
    }
  }

Keep in mind I didn't test this at all, just went off memory, so you might have to mess with it. What this is supposed to do is take the screen height divided by 2 and subtract half the div's height, and do the same for the width, placing it in the middle of the screen regardless of screen resolution...hopefully.

Lemme know how it works.

tomtom · May 25, 2008

Hey,

cheers for your reply.

I sort of understand.

So could I change that to..

var http_request = false;
var obj;

function makePOSTRequest(url, parameters) {
  http_request = false;
  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
    if (http_request.overrideMimeType) {
      // set type accordingly to anticipated content type
      //http_request.overrideMimeType('text/xml');
      http_request.overrideMimeType('text/html');
      }
    } else if (window.ActiveXObject) { // IE
    try {
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
    try {
      http_request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {}
    }
  }
  if (!http_request) {
    alert('Cannot create XMLHTTP instance');
    return false;
    }

  http_request.onreadystatechange = alertContents;
  http_request.open('POST','/delta/modules/k.php', true);
  http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http_request.setRequestHeader("Content-length", parameters.length);
  http_request.setRequestHeader("Connection", "close");
  http_request.send(parameters);
  }

function loading() {
  var load;
  load = document.getElementById("loading");
  vis = load.style;
  var top = (window.screenHeight / 2) - (vis.height / 2);
  var left = (window.screenWidth / 2) - (vis.width / 2);
  vis.position = absolute;
  vis.left = left;
  vis.top = top;
  if(vis.display == '' || vis.display == 'block') {
    vis.display = 'none';
    } else if(vis.display == 'none') {
    vis.display = 'block';
    }
  }

function alertContents() {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      //alert(http_request.responseText);
      result = http_request.responseText;
      //document.getElementById('status').innerHTML = result;
      obj.innerHTML = result;
      loading();
      } else {
      alert('There was a problem with the request.');
      loading();
      }
    }
  }

function get(url, div_id) {
  some stuff;
  var poststr = some stuff;
  obj = document.getElementById(div_id);
  loading();
  makePOSTRequest(url, poststr);
  }

<form name="myForm">
<table class="page_ed">
    <tr>
        <td class="vsubheader">Edit Page</td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>    
                    <td>
<input type="hidden" value="<?php echo $module[id]; ?>" name="test" id="test">
<textarea rows="30" cols="60" name="txtname" id="txtname"><?php echo $module[content]; ?></textarea></td>
               </tr>
           </table>
        </td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" class="sub" value="Submit" onclick="makePOSTRequest(txtname,id);></td>
    </tr> 
</table>

<div id="loading" class="load"><img src="/delta/modules/ajax-loader.gif"><p>
<center>
<b>Saving...</b></div>
</form>

What does the get function do?

tomtom · May 25, 2008

Also

To make it (after saving), hide the divs - that's easy, but then to update the <div id="norm"> (the content div), with the new contents.

Could you do something like...

function dothis() {
var posted = document.getElementById(txtname).innerHTML;
var content = document.getElementById(norm).innerHTML;
posted = content;
}

HaLo2FrEeEk · May 25, 2008

That should work, but why do you want to take the content from one div and put it in another?

tomtom · May 25, 2008

So that, when you press 'submit', it saves it (using ajax). Then hides the 'edit_div' and then shows the content div with the NEW content (that they just submitted). Without reloading the page

and that code doesnt work. when you press the submit button, nothing happens and the content doesnt update. sorry if I come across as a guy who expects everything done by you

should i just post my entire code here?

tomtom · May 25, 2008

Sorry, i'm a bit of a noob when it comes to ajax. What does the whole get function do?

HaLo2FrEeEk · May 26, 2008

The xmlhttp that I posted is a POST based form submission, it simulates submitting a form with the POST method. The get function is where you set the user variables and the url to be retrieved. That info get's sent to the php page and the result is returned to the AJAX script, which is then interpreted and displayed on the page with alert contents. You don't have to use my script for the whole thing, you can keep using yours, just put the loading function in there and call it when you call the AJAX script.

tomtom · May 26, 2008

Hey,

yeah I put the loading with my script. And the load div does show up on click, but it doesn't hide once loaded. Also with the loading function, is it possible to make the div hide onload?

I really appreciate this btw

<script language="JavaScript" type="text/javascript">

var time_variable;

function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object

function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var txtname = document.getElementById("txtname");
    xmlhttp.open("POST","/delta/modules/k.php?test=$folder[$count]",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname=" + txtname.value); //Posting txtname to PHP File
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
loading();
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 

     }
     else {
loading();
        alert("Error during AJAX call. Please try again");

     }
   }
}
function loading() {
  var load;
  load = document.getElementById("load");
  vis = load.style;
  if(vis.display == '' || vis.display == 'block') {
    vis.display = 'none';
    } else if(vis.display == 'none') {
    vis.display = 'block';
    }
  }
</script>

tomtom · May 26, 2008

Right it all works now. The hiding the edit div. The only thing that doesn't work (in the previous posted code) is the loading thing. It shows, but doesn't hide.

I just changed it to


  if(vis.display == '' || vis.display == 'block') {
    vis.display = 'none';
    HideContent('edit_page');
    } else if(vis.display == 'none') {
    HideContent('edit_page');
    vis.display = 'block';
    }
  }

As I have a previous function that hides divs. So if you can just fix this last bit I'd love you

cheers for all the help x

tomtom · May 26, 2008

The loading icon I think appears after it's actually done it.

HaLo2FrEeEk · May 26, 2008

Ok, when you send the request for the data to your AJAX function, whatever that is, you run loading(), this shows the div. When the data is returned to the page and populates the div, you run loading again, this will hide it.

tomtom · May 27, 2008

Oh yeah of course! Sorry, that's so obvious Cheers man. Thanks!

tomtom · May 27, 2008

Oh, one last thing.

& seems to interfere with it for some reason. Say I posted hello&tom, it'd show only hello. Is there any way to fix this?

tomtom · May 27, 2008

oh and + doesn't work either. It just gets replaced with a space. ???

HaLo2FrEeEk · May 28, 2008

I never had a problem with & symbols, and +'s are supposed to go to a space, it's how Javascript works.

tomtom · June 5, 2008

Is there any way to get around either of them?

haku · June 6, 2008

I think you can add a \ before the symbol. That is the php way, but I seem to reading that it also can work for javascript.

tomtom · June 7, 2008

Nope Didnt seem to work

HaLo2FrEeEk · June 9, 2008

See if you can't use php to replace the + and & symbols with their ASCII entities. I know that the & symbol is &, htmlentities() should be able to fix this, just do that on the text before you submit it to the AJAX.

tomtom · June 20, 2008

nope :S that didnt seem to work either.

it could just be my javascript code?

This is all echo'ed of course...

<script language=\"JavaScript\" type=\"text/javascript\">

var time_variable;
function getXMLObject()  //XML OBJECT
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject(\"Msxml2.XMLHTTP\")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject(\"Microsoft.XMLHTTP\")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();	//xmlhttp holds the ajax object

function ajaxFunction() {
loading();
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) { 
  	var txtname = document.getElementById(\"txtname\");
    xmlhttp.open(\"POST\",\"/delta/modules/k.php?test=$folder[$count]\",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(\"txtname=\" + txtname.value); //Posting txtname to PHP File
  }
}

function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById(\"message\").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
loading();
     }
     else {
        alert(\"Error during AJAX call. Please try again\");
loading();
     }
   }
}


function loading() {
  var load;
  load = document.getElementById(\"load\");
  vis = load.style;
  if(vis.display == '' || vis.display == 'block') {
    HideContent('edit_page');
    ShowContent('message');
    vis.display = 'none';
    } else if(vis.display == 'none') {
    HideContent('edit_page');
    ShowContent('message');
    vis.display = 'block';
    }
  }

</script>
<script type=\"text/javascript\">
function test(id,nl) {
document.getElementById(id).innerHTML = nl;
}
function dothis() {
var posted = document.getElementById(txtname).innerHTML;
var content = document.getElementById(norm).innerHTML;
posted = content;
}
</script>

It could be because I've put /delta/modules/k.php?test=$folder[$count]

and to add another variable you'd put &t=lemon?

:)cheers xx

tomtom · July 11, 2008

anyone? lol

Sign In

Instant update

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information