Question

This is my code (it’s just this, nothing more)

$(document).ready(function() {
        $(".system").click(function() {
            var sid = this.id;
            alert(sid); // Outputs correct id
            $("#graph").html('<img src="graph.php?system=' + sid + '" />'); // sid seems to be null (call looks like "http://host/grap.php?system=")
        })
    })

Obviously, alerting sid works, while using sid in the html method of the selector doesn’t. I’ve also tried writing the value into a form input and then reading it from there, but this doesn’t work either.

I think, the html method doesn’t support another calls or variable accessing. What would be a workaround to this?

Answer 1

Note: the question has now been edited, so this is no longer noticeable in the example code in the question.

---

You are closing the src attribute value early. Change it to this:

$("#graph").html('<img src="graph.php?system=' + sid + '" />');
                                          //^Removed " here

What you currently have will result in markup like this:

<img src="graph.php?system="something" />

You can see from that that the src attribute value is only graph.php?system=, which is exactly what you say you are noticing.

By changing the aforementioned line, you will get markup like this:

<img src="graph.php?system=something" />