In the following SSCCE,
div
s.style="display:none;"
attribute to all the div
s except the first one.div
s except the last one, and add a JS onclick
event listener, which should change the current div
's style property to style="display:none;"
(current div
's id
attribute passed to the JS function.) and the next div
's (it's id
is also passed to the JS function) style property to style="display:block;"
submit
button to the last div
which submits the form
. I did not write the action
attribute of the form
or any event listener for this button because that's not the concern right now.The currentId
and the nextId
passed to the JS event listener of the button click event are calculated in a function named returnCurrentId
which takes the $array_of_divs
and $array_of_ids
as arguments. Then it checks which div
had style="display:none;"
and sets it as the current_id
. Then the id next to it in the $array_of_ids
becomes the next_id
.
The problem arises when the JS changes the style property of the div
s whose id
s have been passed to it on the client side, and nothing changes on the server side. So on the server side, it is the same $array_of_ids
being passed to returnCurrentId
without any changes in the display properties, and so the same id
s of the first and second div
are returned. They are passed to JS, and then again the same div
is displayed again.
So I have been reading up on AJAX here, and I tried to send a variable named pass_back
in the URL
of XMLHTTPRequest.open(GET, URL, TRUE)
, and on the server side, tried to check if $_REQUEST contains it, and when it does, I make the same change to the style properties, but it does not seem to contain it.
I anticipate I am placing the block of code on the wrong place, but then where do I put it.
So can anyone give me some tips/suggestion/solution?
<?php
echo '<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function clickButton(currentId, nextId) {
alert(currentId+","+nextId); //check
document.getElementById(currentId).style.display = "none";
document.getElementById(nextId).style.display = "block";
document.getElementById(nextId).style.border = "5px solid red";//check
//**************************
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.open("GET","C:/xampp/htdocs/testing.php?pass_back="+"pass_back",true);
xmlhttp.send();
//**************************
}
</script>
</head><body>';
//String of all the div's
$haystack = '<div id="div1" style="width:500px; height:250px; background-color:#fd77ba">Div1</div>
<div id="div2" style="width:500px; height:250px; background-color:#7781fd">Div2</div>
<div id="div3" style="width:500px; height:250px; background-color:#77fd9b">Div3</div>';
//Adding divs as DOM objects to an array
require 'C:\\xampp\\htdocs\\simple_html_dom.php';
$html = str_get_html($haystack);
foreach ($html->find('div') as $div) {
$array_of_divs[] = $div;
}
//Extract id attributes from all elements of $array_of_divs and add to $array_of_ids
foreach ($array_of_divs as $div) {
$array_of_ids[] = $div->id;
}
//Add style="display:none;" property to all divs except the first one
for ($i=1; $i<count($array_of_divs); $i++) {
$array_of_divs[$i]->style = 'display:none;';
}
//Strings of the pseudo button to navigate to the next div on the same page and real button to navigate to another page
$pseudo_btn = '<button type="button" onClick="clickButton(\''.returnCurrentId($array_of_divs, $array_of_ids)['current_id'].'\',\''.returnCurrentId($array_of_divs, $array_of_ids)['next_id'].'\')" style="font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;">Submit</button>';
$real_btn = '<span style="background-color:red;"><input type="submit" name="submit" value="Submit" style="font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;"></span>';
//Add $pseudo-btn to all except last div on this page, add $real_btn to the last div
$last_id = end($array_of_ids);
for ($j=0; $j<count($array_of_ids); $j++) {
if ($array_of_ids[$j] !== $last_id ) {
$array_of_divs[$j]->innertext .= $pseudo_btn;
} else {
$array_of_divs[$j]->innertext .= $real_btn;
}
}
//Print all the divs
echo '<form method="post" enctype="multipart/form-data" accept-charset="utf-8">';
foreach ($array_of_divs as $div) { echo $div; }
echo '</form>';
//**********************************************
//IF $_REQUEST CONTAINS pass_back (i.e. THE BUTTON HAS BEEN PRESSED, CHANGE DISPLAY PREPERTY OF CURRENT AND NEXT DIV
if (array_key_exists('pass_back',$_REQUEST)) {
foreach ($array_of_divs as $divs_el) {
if ( $divs_el->id == returnCurrentId($array_of_divs, $array_of_ids)[current_id] ) {
$divs_el->style = 'display:none;';
} else if ( $divs_el->id == returnCurrentId($array_of_divs, $array_of_ids)[next_id] ) {
$divs_el->style = 'display:block;';
}
}
} else {
echo '$_REQUEST does not contain pass_back';
}
//***********************************************
//This function returns the id of the current div which is displayed.
function returnCurrentId($array_of_divs, $array_of_ids) {
for ($c=0; $c<count($array_of_divs); $c++) {
$style_value = $array_of_divs[$c]->style;
$style_value = preg_replace('/\s+/', '', $style_value);//This removes all kinds of white space.
if (strpos($style_value,'display:none') === false) {
$current_id= $array_of_divs[$c]->id;
break;
}
}
$current_position = array_search($current_id, $array_of_ids);
$next_id = $array_of_ids[$current_position + 1];
$array_to_pass= array('current_id'=>$current_id, 'next_id'=>$next_id);
return $array_to_pass;
}
echo '</body></html>';
?>
Zarah, a couple of ideas that might help you:
As I said in my comment, try to change this bit:
xmlhttp.open("GET","C:/xampp/htdocs/testing.php?pass_back="+"pass_back",true);
for something like:
xmlhttp.open("GET","testing.php?pass_back="+"pass_back",true);
taking into consideration that that's a valid route to a file called testing.php in your web server. The url parameter of the open() method, must be an address to a file on a server and you must use a valid URL that points to that file.
Another idea. You can send post information using this approach:
xmlhttp.open("POST","testing.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("passback=passback");
so you could try to send it using POST instead of GET to see what happens. It might throw some light into the matter.
More things.
It is possible that due to your php configuration, $_REQUEST doesn't contain anything whereas $_GET does. This could be a good reason to check $_GET instead of $_REQUEST. However, if you do want to use $_REQUEST, here you can find more info about the topic.
EDIT
The following code (based on yours) works for me (debian APACHE/php 5.4). I've put all the code on the same page. I don't like it very much but it's only to point out that it works. The AJAX part sends the data to main.php and main.php simply sends back what it receives. Then the AJAX part simply alerts the answer from the server.
main.php
<?php
//**********************************************
//IF $_REQUEST CONTAINS pass_back this is an AJAX call, just send back and die.
if (array_key_exists('pass_back',$_REQUEST)) {
echo $_REQUEST["pass_back"];
die();
}
//***********************************************
echo '<html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function clickButton(currentId, nextId) {
//alert(currentId+","+nextId); //check
/*document.getElementById(currentId).style.display = "none";
document.getElementById(nextId).style.display = "block";
document.getElementById(nextId).style.border = "5px solid red";//check*/
//**************************
var xmlhttp;
if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }
else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.open("GET","testing.php?pass_back=pass_back",true);
xmlhttp.send();
//**************************
}
</script>
</head><body>';
//String of all the div's
$haystack = '<div id="div1" style="width:500px; height:250px; background-color:#fd77ba">Div1</div>
<div id="div2" style="width:500px; height:250px; background-color:#7781fd">Div2</div>
<div id="div3" style="width:500px; height:250px; background-color:#77fd9b">Div3</div>';
//Print all the divs
echo '<form method="post" enctype="multipart/form-data" accept-charset="utf-8">';
echo $haystack;
echo '<button type="button" onClick="clickButton(1,2)" style="font-family:Oxygen,sans-serif; font-style: normal;font-variant: normal;font-weight: normal;font-size: 99%;line-height: normal;font-size-adjust: none;font-stretch: normal; background-color: #494f50; color: #ffffff; padding-top: 5px;padding-right: 10px;padding-bottom: 5px; padding-left: 10px;margin-top: 50px;margin-right: 10px;margin-bottom: 50px;margin-left: 10px; text-decoration:none;">Submit</button>';
echo '</form>';
echo '</body></html>';
?>
Good luck.