当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - 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 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: