[RESOLVED] JavaScript screen refreshes

Kudose

Is there a way to refresh the screen without refreshing the page using JavaScript?

I have a little piece of code that works perfectly in FireFox.

In IE, when I click the checkbox, nothing happens. But when I click a whitespace on the site, it changes like it is supposed to when I click the checkbox.

So I need a way to make IE "refresh the screen".

Is this possible?

/* sign-up swap outs */
if(document.getElementById){
  function showLogin(){
    v = document.getElementById('loginDIV');
    v.style.display = 'block';  

    x = document.getElementById('registerDIV');
    x.style.display = 'none';
    z = document.getElementById('selectAction');
    z.style.display = 'none';
    a = document.getElementById('redo');
    a.style.display = 'block';
    return true;
  }
  function showRegister(){
    v = document.getElementById('loginDIV');
    v.style.display = 'none';  

    x = document.getElementById('registerDIV');
    x.style.display = 'block';
    z = document.getElementById('selectAction');
    z.style.display = 'none';
    a = document.getElementById('redo');
    a.style.display = 'block';
    return true;
  }
  function showActions(){
    v = document.getElementById('loginDIV');
    v.style.display = 'none';  

    x = document.getElementById('registerDIV');
    x.style.display = 'none';
    z = document.getElementById('selectAction');
    z.style.display = 'block';
    a = document.getElementById('redo');
    a.style.display = 'none';
    return true;
  }
} else if(document.all) { //msie
  function showLogin(){
    var style1 = document.all['loginDIV'].style;
    style1.display = 'block';
    var style2 = document.all['registerDIV'].style;
    style2.display = 'none';
    var style3 = document.all['selectAction'].style;
    style3.display = 'none';    

    var style4 = document.all['redo'].style;
    style4.display = 'block';
    return true;
  }
  function showRegister(){
    var style1 = document.all['loginDIV'].style;
    style1.display = 'none';
    var style2 = document.all['registerDIV'].style;
    style2.display = 'block';
    var style3 = document.all['selectAction'].style;
    style3.display = 'none';    

    var style4 = document.all['redo'].style;
    style4.display = 'block';
    return true;
  }
  function showActions(){
    var style1 = document.all['loginDIV'].style;
    style1.display = 'none';
    var style2 = document.all['registerDIV'].style;
    style2.display = 'none';
    var style3 = document.all['selectAction'].style;
    style3.display = 'block';    

    var style4 = document.all['redo'].style;
    style4.display = 'none';
    return true;
  }
}

echo "<tr>
      <td colspan=\"3\"><input type=\"checkbox\" group=\"abc\" name=\"loginBOX\" value=\"\" onChange=\"javascript:showLogin();\">&nbsp;Login</td>
    </tr>
    <tr>
      <td colspan=\"3\"><input type=\"checkbox\" name=\"registerBOX\" group=\"123\" value=\"\" onChange=\"javascript:showRegister();\">&nbsp;Register</td>
    </tr>";

TIA.

Kudose

If you have FireFox and IE you can see what I mean at this link:

http://www.mobilitycartrentals.com/index.php/PlatinumCustomers/288076895

jazz_snob

I just found this: http://www.ashleyit.com/rs/jsrs/select/php/select.php

I usually do hacks like this where I try to keep as much as possible in php:

<html><body>

<?php

//print_r( $_POST );

if( isset( $_POST['submit'] ) ){
    echo "Form submitted";
} else {

$is_checked = ( isset( $_POST['check_me'] ) ) ? 'checked' : '';
?>

<form method="post" action="">

    <input type="checkbox" name="check_me" value="1" <?=$is_checked?> onchange="javascript:document.forms[0].submit()" /> First widget
    <?php
    if( isset( $_POST['check_me'] ) ){
        echo'
        <input type="text" name="widget" value="" />
        <input type="submit" name="submit" value="submit" />
        ';
    }
    ?>
</form>
<?php   

}
?>
</body>
</html>

Kudose

Nevermind ... I get what you're saying. Lemme check into it. I would prefer to get the problem resolved without that though.

bubblenut

It's to do with how IE manages the onchange event handler. It only commits the event when the form looses focus. I spent a couple of hours ripping my hair out over this one a little while ago. I was saved by my trusty JS friend O'Reilly's Javascript, The Deffinitive Guide.

nitpick: jazz_snob your example produces markup which isn't XHTML compliant. All attributes must have values so checked should really be checked="checked"

madwormer2

onmouseup="document.getElementById('otherelement').focus()"

or...

onmouseup="document.getElementById('your_checkbox').blur()"

or both...

You automatically lose the focus of the checkbox when you change it.

Would that work?

Actually, just stick it in the onmouseup thing... that should work...

bubblenut

Or an onclick, seeing as whether it happens on the mouse down or the mouse up isn't really important. I always took it that onmouseup and onmousedown should only be used if the distinction between them was necesarry. Doesn't really make much of a difference though.

Kudose

All hail bubblenut.

Thanks! It changing the onChange to onClick did the trick.

Kudose

Upon futher investigation, changing them to onClick made it work for IE, but not FF. So I had to use both onChange and onClick to support both browsers.