Jquery Wrong Markup

[Mark Reyes]

Hi,

I am trying to understand why Jquery generates the wrong markup as I am seeing on my firebug HTML console.

I use JSON to fetch data from db..

$.getJSON('getStations.htm',{strPlant: $(this).val()}, function(data){
	var listItems = "<ul>";
	$.each(data.stations, function(index, value){
		listItems += "<li>" + "<input type='checkbox' value='" + value.strStationCode + "'" +  "/>" 
						+ "<span" + ">" + value.strStationCode + " - " + value.strStationName + "</li>";
		});
	listItems += "</ul>"
	$("#stationDiv").html(listItems); 
}

Now, after getting the data, I am appending it to the div with a checkbox in front and a span.

But, the html mark up seems wrong on the checkbox..

<ul>
	<input type="checkbox" value="1" >
	<span>1-StationOne</span>
</ul>

I was expecting something like this (with the input type checkbox terminated with a forward slash).

<ul>
	<input type="checkbox" value="1" />
	<span>1-StationOne</span>
</ul>

I think I explicitly set it in my ajax call. Am I missing something?
<input type='checkbox' value='" + value.strStationCode + "'" + "/>"

As for the display, there's no problem.

[Eric Pascarello]

That missing slash means nothing.

And are you sure it is jQuery that is doing it and not the browser or whatever you are viewing the source with.

Eric

[Mark Reyes]

Hi Eric,

And are you sure it is jQuery that is doing it and not the browser or whatever you are viewing the source with

I ran this code on my mozilla firebug and I checked out at the HTML tab of the firebug console on what exactly is being appended at the DOM after the call to $.getJSON returns.

This is the one thing that I notice. Maybe this isn't jquery specific or its only my firebug.

[Sean Clark]

Hey,

Are you sure the code you posted is the same that is getting used?
You don't seem to have any closing <span> element in the code, yet it appears in your browser?
Also you don't have <li> in the html you posted.

Sean

[Mark Reyes]

Hi Sean,

Are you sure the code you posted is the same that is getting used?

Too much editing perhaps. Good catch!
This code is a part of a much larger function, I did a lot of deletion just to show my point.

Anyway, I just notice it in my firebug. Its not displaying fully xhtml compliant tag, I notice that even if I write

<input type="checkbox" />

they are translated to

<br> <input type="checkbox" >

.

Maybe its just in the firebug html tab display. Not really big deal so as long as everything gets displayed correctly.

Thanks.

[Bear Bibeault]

It's just a markup display issue. Nothing at all to do with jQuery, and nothing to be concerned about.