0

I have the following HTML structure:

<div class='message_top' id='top_7' style='cursor:pointer;'>
    <div class='top_ime'>From: official</div>
    <div class='top_status' id='status_7'>
        <img src='images/message_new.png' height='26' title='New message' />
    </div>
</div>

In addition to this, there are a lot of other DIVs of the same structure, but with different ID numbers, for example:

<div class='message_top' id='top_15' style='cursor:pointer;'>
    <div class='top_ime'>From: official</div>
    <div class='top_status' id='status_15'>
        <img src='images/message_new.png' height='26' title='New message' />
    </div>
</div>

Now, I have a jQuery function which takes the ID of a .message_top div and it should perform an action using the contents of the .top_status div which belongs to it. However, for some reason, in the syntax it doesn't seem to recognize the ID of the .top_status div. I know I'm nto explaining this very well, but here's a fiddle that will help your understand (code and commentary are there):

http://jsfiddle.net/gMy2f/1/

$(function () {
    $('.message_top').click(function(){
        var id = this.id;
        status_id = id.replace("top","status");
        status = $("#"+status_id).html();
        alert(status_id+" "+status);    //status variable is empty, but...
        status2 = $("#status_7").html();
        alert(status2);                 //status2 has the expected value
    });
});

So, as you see, if I call the .html() method using $("#status_7").html(); it works fine, but if I call it with $("#"+status_id).html(); (with status_id being "status_7") it doesn't work. What's happening here? I've used similar code a bunch of times and never had any issues.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
sveti petar
  • 3,637
  • 13
  • 67
  • 144
  • 1
    Seems to work fine if you load you code in the proper place (hint: on doc ready or load). http://jsfiddle.net/j08691/gMy2f/4/ – j08691 Apr 11 '13 at 15:27
  • 2
    @j08691 I just tried your code, and it fails the same way mine does (in Firefox at least) - and I'm pretty sure my way of loading it is fine. – sveti petar Apr 11 '13 at 15:29
  • The code is working just fine in firefox 19.0.2, Maybe a browser compatibilty issue? – gbtimmon Apr 11 '13 at 15:29
  • @gbtimmon I think this way of creating IDs is pretty standard, surely it can't be browser-specific? Besides, I'm using firefox too. – sveti petar Apr 11 '13 at 15:30
  • You're correct, the loading was fine, however the code also works fine, in Chrome at least. – j08691 Apr 11 '13 at 15:30
  • I dont know what to tell you then it work for me without issue... I was thinking maybe the `id.replace("top","status");` might have compatibily issue. Doubtful but thats the best i can come up with. – gbtimmon Apr 11 '13 at 15:32
  • 5
    Bad things happen when you forget `var`!! – Pointy Apr 11 '13 at 15:33
  • Yeah @Pointy - adding var fixed it. I know why I forgot it too - I cut this bit of code out of an old piece of code which had the variables initialized beforehand! – sveti petar Apr 11 '13 at 15:35
  • @gbtimmon Declaring everything as a local var solved it. Thanks for you help. – sveti petar Apr 11 '13 at 15:36

1 Answers1

6

Use local variables instead of global ones. window.status is predefined and potential read only.

I just answered this today: Does Javascript / jQuery have system vars?

Updated jsFiddle.

Community
  • 1
  • 1
Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
  • Indeed. Simply adding `var` in front of the variable definition fixed the issue. Thanks. – sveti petar Apr 11 '13 at 15:34
  • @jovan This might explain why it works in the jsfiddle but not in your browser. I belive, but could be wrong, that the jsfiddle places all of the javascripts vars in a container object to separate the user code from the page code, even when they are declared globally. – gbtimmon Apr 11 '13 at 15:36
  • @gbtimmon: Mmh. I don't think so. The fiddle didn't work for me in Firefox (in Firefox `window.status` is read-only by default). jsFiddle executes the code in an iframe, but that should have any impact on this. – Felix Kling Apr 11 '13 at 15:37
  • My firefox is different then your then...After checking, I was able to edit window.status from the console. Weird.... – gbtimmon Apr 11 '13 at 15:38
  • @gbtimmon: Could be, you can make `window.status` writable: https://developer.mozilla.org/en-US/docs/DOM/window.status. – Felix Kling Apr 11 '13 at 15:39