Jump to content

Refresh a second div area with AJAX.


Notretsam

Recommended Posts

Before I go into what I'm looking to do, I should say I have very little experience with Javascript, I use PHP myself.

 

However what am looking to do requires javascript and below page on w3schools helped me refresh one div area.

 

http://www.w3schools.com/php/php_ajax_database.asp

 

I have very similar code on match.php , which is shown below.

<script>
function refmoveinfozfg(str) {
  if (str=="") {
    document.getElementById("playerInfo").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("playerInfo").innerHTML=xmlhttp.responseText;
    }
  }
  var matchid = document.getElementById('matchid').value;
  var playturn = document.getElementById('playTurn').value;
  var matchno = document.getElementById('matchNo').value;
  var matchtype = document.getElementById('matchTyp').value;
  var matcheckid = document.getElementById('matcheckid').value;
  xmlhttp.open("GET","matchtest/getmove.php?selMove="+str + "&matchid=" + matchid + "&playTurn=" + playturn + "&matchNo=" + matchno + "&matchTyp=" + matchtype + "&matcheckid=" + matcheckid,true);
  xmlhttp.send();
}
</script>

The short version of what is going on here, player clicks on a "wrestling move" within a combo and the above function does what you see, the getmove.php page then processes the move, updates a database with the player stats in match.

 

After the getmove has processed the move and everything else it does, I have the below code at end which refreshes the "playerInfo" div area.

/* updating player information part of match page */
    ob_start();  // start buffer
   include("matpage/matchlistcenter.php");  // read in buffer
   $pinfo1=ob_get_contents();  // get buffer content
   ob_end_clean();  // delete buffer content
   $pinfostatus = "TRUE";
   define("playerinfo",$pinfo1,$pinfostatus);
   echo constant("playerinfo");

This all works perfectly, the player stats are refreshing correctly.

 

My problem is, I also have the match history area on match.php that shows the player(s) if wrestling move was successful or not.

 

I have no clue on how to either adapt the javascript function , so the two div areas refresh. I have done some google searching on it and from what I can tell, its not possible to refresh two div areas from one function. It seems like am going need one javascript function, that will load two other javascript functions that refresh the two div areas.

 

Which I really have no clue on how to even go about doing that.

 

I was thinking maybe at end of getmove.php, I could do "something" there that refresh the matchHistory div area.

 

 

 

 

Link to comment
Share on other sites

I'm not sure exactly what your problem is. You can send multiple ajax requests to each get some response from the server and each update a part of the page, or you can send one ajax request where the server responds with something like a JSON string which contains multiple pieces of data which you then use to update different parts of the page.

Link to comment
Share on other sites

my problem is I don't know javascript , so don't know how to do any of the things you saying I could do.

 

The function I showed in original post refreshes the div area with ID=playerInfo , but I also have a second div area with ID=matchHist that I also need refreshed.

 

Am wondering if after the "xmlhttp.send();" if I can add a line which acts as a trigger for another function that refreshes the matchHistory div area.

 

Am a PHP programmer, so really don't know how to code full functions in javascript, I can look at functions like I showed and make small changes, but nothing like am hoping to be able to do.

 

If it helps any, here is the layout of the match page with the two divs am talking about.

<header>header include page</header>

<nav>nav include page</nav>

<section>
<div id="playerInfo">
player information page include
</div>

form with select combos (which has the onchange event to trigger the function refmoveinfozfg)
</section>

<section>match chat page include</section>

<section>
<div id="matchHist">
match history
</div>
</section>

<footer>footer page include</footer>


Link to comment
Share on other sites

Am wondering if after the "xmlhttp.send();" if I can add a line which acts as a trigger for another function that refreshes the matchHistory div area.

I guess you could call another function, but it's probably more efficient to have PHP return a JSON string (using the json_encode function on an array, for example), get that JSON string in Javascript and convert it into an object in Javascript, and use it to update multiple parts of the page. For example, you can create an array in PHP like this:

 

$array = [
  ['id' => 'element1', 'content' => 'new content 1'],
  ['id' => 'element2', 'content' => 'new content 2']
];
So you have a list of IDs of elements to update, with the new content for them. You use json_encode to convert that array to a JSON string and use that as the response to the ajax request. Javascript can convert the JSON string into a Javascript array and then you can loop through that and get each element ID and content to update. That sounds a little more flexible and efficient than chaining multiple ajax requests.

 

my problem is I don't know javascript , so don't know how to do any of the things you saying I could do.

The solution to that problem is to learn the things you need to do this. There is a lot of information out there about using Javascript to send ajax requests, about using JSON with both PHP and Javascript, etc. A lot of people use it and there are a lot of ways to learn it.
Link to comment
Share on other sites

so how do I call another function within the javascript function? don't know how to do that but sure some google searching most likely provide an answer.

Link to comment
Share on other sites

ah its just as simple as mathistfunct();

 

I presume within the () I can pass a variable?

 

so mathistfunct($matid);

Link to comment
Share on other sites

yeah seems easy enough, thanks for the help justsomeguy, 2nd time you helped me with something related to this project.

 

 

Am currently trying to work out of instead of refreshing the full match history, if I can just add the new history within a div area that sits above the match history when it first loaded.

 

might be doable and would be awesome if I can pull that off, but sadly the second click on select combo just replace the last click information.

 

so is there a way to detect the information that already contained within the div area?

 

if so, I can pass current information over to a PHP page and then echo old with new line.

Link to comment
Share on other sites

The innerHTML property of an element will contain the content of that element. In addition, you can have a container div, where each message or whatever is inside its own element structure, maybe a span or p element. You could use something like appendChild to append a new span or p element to the container instead of just replacing the entire contents.

 

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Link to comment
Share on other sites

appendChild most likely do it but remember, I get a brain freeze when it comes to Javascript lol

 

 

innerHTML should do the trick perfectly though, am guessing something like below would do it.

<script>
function refmatchhistscu(curstr) {
  if (str=="") {
    document.getElementById("matHist").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("matHist").innerHTML=xmlhttp.responseText;
    }
  }
  var matchid = document.getElementById('matchid').value;
  var x = document.getElementById("matHist").innerHTML;
  xmlhttp.open("GET","matchtest/refmatchhist.php?matchid="+curstr + "&matchid=" + matchid + "&currHist=" + x ,true);
  xmlhttp.send();
}
</script>

Then I call it in first function with refmatchhistscu(matchid);

Edited by Notretsam
Link to comment
Share on other sites

well I haven't got to part of doing 2nd function because all of a sudden yesterday, the first function appears to have stopped working.

 

I have no clue why.

 

I clicked a wrestling move, the refmoveinfozfg function would process, then getmove would do its thing, update the database and then new information be refreshed within <div id="playerInfo"> area.

 

now it does nothing , its like the onchange event on select is no longer calling the function or the "str" is empty, code shown below.

<script>
function refmoveinfozfg(str) {
  if (str=="") {
    document.getElementById("playerInfo").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("playerInfo").innerHTML=xmlhttp.responseText;
    }
  }
  var matchid = document.getElementById('matchid').value;
  var playturn = document.getElementById('playTurn').value;
  var matchno = document.getElementById('matchNo').value;
  var matchtype = document.getElementById('matchTyp').value;
  var matcheckid = document.getElementById('matcheckid').value;
  xmlhttp.open("GET","matchtest/getmove.php?selMove="+str + "&matchid=" + matchid + "&playTurn=" + playturn + "&matchNo=" + matchno + "&matchTyp=" + matchtype + "&matcheckid=" + matcheckid,true);
  xmlhttp.send();
}
</script>
<form>
<input name="matchid" id="matchid" type="hidden" value="<?php echo "$sid"; ?>">
<input name="playTurn" id="playTurn" type="hidden" value="<?php echo "$playTurn"; ?>">
<input name="matchNo" id="matchNo" type="hidden" value="<?php echo "$matchNumb"; ?>">
<input name="matchTyp" id="matchTyp" type="hidden" value="<?php echo "$matchType"; ?>">
<input name="matcheckid" id="matchTyp" type="hidden" value="<?php echo "$matcheckid"; ?>">


<?php  
/* in each select field, there is a either a while loop or a SQL query to get wrestling moves and added via <option></option> */
echo "<select name='selMove' onchange='refmoveinfozfg(this.value)'>SQL WHILE LOOP</select>"; 
?>

</form
/* in the getmove.php page, I pick up $selMove and other vars,  then get info from database for wrestling move and the match*/
/* then the script processes the move and does its thing */
/* which is all working , as used onChange='this.form.submit();' on select fields to make sure */


/* once the script processes the move , at the very end is the below code which displays new updated information on match.php */

/* updating player information part of match page */
    ob_start();  // start buffer
   include("matpage/matchplaystats.php");  // read in buffer
   $pinfo1=ob_get_contents();  // get buffer content
   ob_end_clean();  // delete buffer content
   $pinfostatus = "TRUE";
   define("playerinfo",$pinfo1,$pinfostatus);
   echo constant("playerinfo");

can't understand why it was working, then all of a sudden it stopped working.

 

I was working on getting the select combos to refresh along with the player information area of page.

 

so added another ob_start and assigned page with the form to a variable, and was going echo that out like you see with the matchplaystats.php

 

hope someone can see an issue because I got no clue while all off a sudden it stopped working.

Link to comment
Share on other sites

I added an alert line to see if str was empty in the javascript function, and nothing came up

  if (str=="") {
    alert("Hello! str is empty!");
    document.getElementById("playerInfo").innerHTML="";
    return;
  } 

so am guessing there something wrong with the onchange trigger in the <select> tag, but don't see what.

Link to comment
Share on other sites

In the future, your first stop should be the developer console to check for Javascript error messages. You can also use the developer tools to look at the ajax request and check the server response.

Link to comment
Share on other sites

ty John was actually below line that was causing issue, took me forever to notice I hadn't changed the ID part.

<input name="matchTyp" id="matchTyp" type="hidden" value="<?php echo "$matchType"; ?>">
<input name="matcheckid" id="matchTyp" type="hidden" value="<?php echo "$matcheckid"; ?>">

sorry Justsomeguy , didn't actually expect any further replies in this thread.

 

yeah I had a really good web developer addon for firefox awhile back, haven't came across a good one for google chrome.

 

the web developer tool built into chrome is a bit OTT to me.

 

if you got any suggestions for a good extension or addon for google chrome, feel free to let me know

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...