How to hide or show a div based on its contents
Hi I'm trying to hide/show a div based on an AJAX response. I really don't know, is there way for that?
If response is an error, show the error text and show the div (same div).
If response is not an error, show the success text and hide a div (same div).
It's like facebook function.
I should do that with javascript function(s).
EDIT
Added information from OP's duplicate question:There are my divs.
<div id="messages"></div>
<div id="edit-address-book">
codes to edit the address book , input type - text, select , textearea etc...
</div>
Down below there is one of my simple ajax requests. This is the ajax library , that I use -> http://en.dklab.ru/lib/JsHttpRequest/
// Create new JsHttpRequest object.
var req_update = new JsHttpRequest();
// Code automatically called on load finishing.
req_update.onreadystatechange = function() {
if (req_update.readyState == 4) {
document.getElementById("messages").innerHTML = req_update.responseJS.messages;
document.getElementById("changed_address").value = req_update.responseJS.changed_address;
}
}
document.getElementById("messages").innerHTML = req_update.responseJS.messages;
req_update.responseJS.messages; // This is ajax respond part.
On the address book div, when customer click on update button there comes error or success message from ajax respond into messages div.
For Example:
Error Messages:
-----------------
Your First Name must contain a minimum of 2 characters.
Your Last Name must contain a minimum of 2 characters.
Your Street Address must contain a minimum of 5 characters.
Your City must contain a minimum of 3 characters.
Your State must contain 开发者_JS百科a minimum of 2 characters.
Success Message:
--------------------
Your address book has been successfully updated. (
I've tried it simply down below, but it didn't work:
<script language="javascript" type="text/javascript">
if ( document.getElementById("messages").innerHTML == "<?php echo SUCCESS_MESSAGE; ?>" ) {
hide_div('edit-address-book); //The div to hide the address book entries.
}
</script>
if there is a suggest/solution in jquery javascript library, I can use it as well.
Finally I've found the solution. It will help users, who are using the AJAX library "JSHttpRequest" ( http://en.dklab.ru/lib/JsHttpRequest/ ). Here it is:
Find:
document.getElementById("messages").innerHTML = req_update.responseJS.messages;
document.getElementById("changed_address").value = req_update.responseJS.changed_address;
###Replace with:
document.getElementById("messages").innerHTML = req_update.responseJS.messages;
if (req_update.responseJS.messages == "<?php echo SUCCESS_MESSAGE; ?>") {
hide_div("edit-address-book");
}
document.getElementById("changed_address").value = req_update.responseJS.changed_address;
}
This should do it.
EDITED
<body>
<script type="text/javascript">
function teste(divId, text){
var myDiv = document.getElementById(divId);
if (myDiv.innerText.indexOf(text, 0) != -1) //could be replaced by any error veryfing logic
{
myDiv.style.visibility = "hidden";
return 'Message 1';
}
else
{
myDiv.style.visibility = "visible";
return 'Message 2';
}
}
</script>
<div id="MyDiv">blabla</div>
<script type="text/javascript">
document.write(teste('MyDiv', 'blabla'));
</script>
</body>
加载中,请稍侯......
精彩评论