I'm using Ajax to dipslay message, but how do I clear them?

[cdoyle]

Hi,

I have another question related to my forms.

I'm using Ajax to display messages when a user click on each field.

 

 <input type="text" id="username" name="username" onfocus="javascript: MyAjaxRequest('namefield','registercheck.php?act=namefield')"
                <input type="password" name="password" value="<?=$_POST['password'];?>"
                       onfocus="javascript: MyAjaxRequest('passfield','registercheck.php?act=passfield')"/>

 

Then I have another div, where the messages are displayed.

<span id="namefield"></span>
<span id="passfield"></span>

 

That works fine,  but when they click on the next field.  The new message appears but the old one doesn't go away.  How would I clear the previous message from the div?

 

[cdoyle]

anyone know how to make the first message clear from the div, when the next form field is selected?

[seventheyejosh]

Is it adding it to the dom?

 

like:

 

<div></div>

 

-focus-

 

<div>YO!</div>

 

-newfocus-

 

<div>YO!YO!</div>

 

because if that is the case your ajax function is prolly just concatnating (SP?) the content.

 

Like: document.getElementById('passField').innerHTML+= X  //notice the += instead of =

[seventheyejosh]

Unless the problem is that the message is going in staying in other divs like this:

 

<div id="1"></div>

<div id="2"></div>

 

-focus-

 

<div id="1">Yo</div>

<div id="2"></div>

 

-focus-

 

<div id="1">Yo</div>

<div id="2">Yo</div>

 

in which case you'd just need to mod your ajax function to empty all the not needed ones.

 

for example, if you only have like two...

 

function ajaxCalled(){

document.getElementById('1').innerHTML='';
document.getElementById('2').innerHTML='';

//then assign the right message as normal

}

 

if however you have a bunch, you can just give them classes and use (i'm using jquery) something to empty them all, then assign:

 

<div id="1" class="holder"></div>
<div id="2" class="holder"></div>

function ajaxCalled(){

$(".holder").each(function(){

     $(this).val('');

});

//continue putting the right message in

}

 

[cdoyle]

I'm using the technique from the sticky http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

Looking at that script,  I see this.  I don't see a +=

MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}
else
{
document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.send(null);
}
else
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}

 

The messages are kept in my php file, with a switch statement

 

Looks something like this.

 

  case 'namefield': {
            echo "<h3>Select a username</h3>";
            echo "This will be the name you use to log into the game with.";
            break;
        }

    case 'passfield': {
            echo "<h3>Select a Password</h3>";
            echo "Enter a password, Your password may contain only alphanumerical characters.";
            break;
        }

 

any ideas on how to make this work the way I need?

[seventheyejosh]

Do you have a link to the offending page?

[cdoyle]

Yes,  I have a test page here.

 

http://www.caraudiocentral.net/CAC_Mafia_Test_Site/register.php

 

 

[cdoyle]

Did you see anything wrong in my example?

[seventheyejosh]

Ok, you're not just putting it in a div, you're putting it in individual spans. So in the ajax request.js, it never knows that the others should be empty.

 

right where this part is:

 

if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}

 

add something like this:

 

if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById('namefield').innerHTML ='';
document.getElementById('passfield').innerHTML ='';
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}

[cdoyle]

Ok, you're not just putting it in a div, you're putting it in individual spans. So in the ajax request.js, it never knows that the others should be empty.

 

right where this part is:

 

if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}

 

add something like this:

 

if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById('namefield').innerHTML ='';
document.getElementById('passfield').innerHTML ='';
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}

 

If I were to use a div instead,  would I still need to add that for each field in my form?

Or would I be able to make it work without having to add a line of code for each field?

[seventheyejosh]

What I would do is use the jquery library.

 

Just have ur html, then use the js to select all the divs by class, then update the one u need.

 

<div id="holder">
     <div id="name" class="item"></div>
     <div id="pass" class="item"></div>
</div>

js:

<script src="path_to_jquery"></script>

<script your js>
if(MyHttpRequest.readyState==4){

$(".item").each(function(){

     $(this).html('');

});

$("#"+target_div).html(MyHttpRequest.responseText);

}

 

that will empty each of your subdivs, and then display the one desired one's new content.

[seventheyejosh]

And it's worth noting that it isnt good to leave your javascript functions '{' on the next line, due to some auto semicoloning....

 

this:

 

function mine()

{

//stuff

}

 

can become

 

function mine(); <- note sad auto semi...

{

//stuff

}

 

source: here

[cdoyle]

What I would do is use the jquery library.

 

Just have ur html, then use the js to select all the divs by class, then update the one u need.

 

[quote author=seventheyejosh link=topic=286859.msg1362291#msg1362291 date=1265762165]
What I would do is use the jquery library.

Just have ur html, then use the js to select all the divs by class, then update the one u need.

[code]

<div id="holder">
     <div id="name" class="item"></div>
     <div id="pass" class="item"></div>
</div>

js:

<script src="path_to_jquery"></script>

<script your js>
if(MyHttpRequest.readyState==4){

$(".item").each(function(){

     $(this).html('');

});

$("#"+target_div).html(MyHttpRequest.responseText);

}

 

that will empty each of your subdivs, and then display the one desired one's new content.

 

<div id="holder">

    <div id="name" class="item"></div>

    <div id="pass" class="item"></div>

</div>

 

js:

 

<script src="path_to_jquery"></script>

 

<script your js>

if(MyHttpRequest.readyState==4){

 

$(".item").each(function(){

What I would do is use the jquery library.

 

Just have ur html, then use the js to select all the divs by class, then update the one u need.

 

<div id="holder">
     <div id="name" class="item"></div>
     <div id="pass" class="item"></div>
</div>

js:

<script src="path_to_jquery"></script>

<script your js>
if(MyHttpRequest.readyState==4){

$(".item").each(function(){

     $(this).html('');

});

$("#"+target_div).html(MyHttpRequest.responseText);

}

 

that will empty each of your subdivs, and then display the one desired one's new content.

 

    $(this).html('');

 

});

 

$("#"+target_div).html(MyHttpRequest.responseText);

 

}

 

[/code]

 

that will empty each of your subdivs, and then display the one desired one's new content.

 

OK,  going to give this a shot.

 

so I've added the path to jquery to my page,  so then I add this

<script your js>
if(MyHttpRequest.readyState==4){

$(".item").each(function(){

     $(this).html('');

});

$("#"+target_div).html(MyHttpRequest.responseText);

}

</script>

 

Do I still use the PHP page to get the message?  Or am I pulling the message I want to display from somewhere else?

 

 

[Ang3l0fDeath]

All i can tell is you made something simple complicated.  Find the Target Location By the fellowing

 

getElementById - Example <TD id=id_name>

getElementsByTagName - Example <div> - Additionally u got to add the [0-9] depending on what # div it is

getElementsByName - Same thing as above getElementsByTagName, except you assign name like this <TD name=name_like_time_stamp_1>

 

As for clearing a DIV field do that in the same location as changing the text of the other DIV field.

So add the

document.getElementById('chat_message').value=''; <INPUT>

document.getElementById('chat_message').firstChild.nodeValue=''; <TD>

document.getElementById('chat_message').innerHTML=''; <DIV>