2

I've got the following code, but it's not working in IE, 9 specifically. Maybe other versions, too.

The function is running, if I alert, it does fire, but in IE it's not replacing the text when the button is clicked again. In other browsers, every time a user clicks the button #gen_password, it reloads a new password from the remote file. In IE, it never replaces it.

Can anyone see what's wrong?

Thanks.

$("#gen_password").live('click',function(){

    $("#password_messg").html('');
    var before = $("#gen").html();
    $("#gen").html("<image alt='Loading...' src='ajax_loader.gif' />");
    $("#password_container").load('random.php', function(){
        $("#gen").html(before);
    });
    $("#password_container").show();
    return false;
});

Here's the HTML it's acting on:

<fieldset class="blue_border"><p id="password_messg" class="message"></p><legend>Change password</legend>
    <form method="post">
        <dl class="zend_form">
            <dt></dt>
            <dd>
                <input type="hidden" name="pwpid" id="pwpid" value="<?php echo $this->login_data['id'];?>" />
                <span id="password_container" class="disabled">&nbsp;</span>
                <input type="hidden" name="savepw" id="savepw" value="1" />
            </dd>
            <dt></dt>
            <dd id="gen">
                <button id="gen_password">Generate a Password</button>
                <button id="save_password">Save</button>
            </dd>
        </dl>
    </form>
</fieldset>
i-CONICA
  • 2,361
  • 9
  • 30
  • 45

3 Answers3

1

The HTML you are creating in jQuery is invalid - <image> should probably be <img>(and IE is very picky about inserting invalid HTML into the DOM). Probably should read:

$("#gen").html('<img src="ajax_loader.gif" alt="Loading" />');
m90
  • 11,434
  • 13
  • 62
  • 112
  • Hi, oops, didn't spot that. That hasn't fixed it though, maybe there's something else? :( I've tried inserting a simple

    test

    to make sure it's not the image section...     – i-CONICA Mar 12 '12 at 10:15
  • No errors at all are in the console. I think there's a problem with the logic of clearing the old content, replacing with new from the ajax request, maybe. :S – i-CONICA Mar 12 '12 at 10:18
  • What exactly does `random.php` return? Maybe IE has problems with that too. – m90 Mar 12 '12 at 10:21
  • Hi, random.php will return a string such as breaker191, not wrapped in any quotes or container, just those characters. – i-CONICA Mar 12 '12 at 10:25
  • 1
    Hmm, don't know, but maybe this helps you out: http://stackoverflow.com/questions/1061525/jquerys-load-not-working-in-ie-but-fine-in-firefox-chrome-and-safari – m90 Mar 12 '12 at 10:28
  • That fixed it, IE is caching the content of random.php and not getting it again. I appended a random number to the request so it's not cached. Fixed. Thanks. – i-CONICA Mar 12 '12 at 10:35
0

I think your HTML is not ok. You should try

var img = $("<img>",{src: 'ajax_loader.gif', alt: 'Loading'});
$("#gen").html(img);
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
  • The HTML is fine, that's not the issue, the – i-CONICA Mar 12 '12 at 10:19
  • @i-CONICA i don't understand the part when you say that it doesn' work when you click on the button, again, you mean thatthe firsttime works and the second doesn't in IE? – Nicola Peluchetti Mar 12 '12 at 10:25
  • By default on page load, the element that shows the password is hidden, when the button is clicked, the element is shown, containing a new, random password. In IE, the element is shown, but contains the same password and never gets a new one. So $("#password_container").show(); shows the container, but it still contains the same password, the jQuery code above it didn't work properly. – i-CONICA Mar 12 '12 at 10:30
  • @i-CONICA have you tried using $.get() instead of $('#password_container').load() ? – Nicola Peluchetti Mar 12 '12 at 10:32
0

I had the same problem, but it was just ; missing in the javascript code.

Vasili Pascal
  • 3,102
  • 1
  • 27
  • 21