We Keep Coding

Why doesn't .html() replace everything with current value?

Here is my code:
$('table').html('<tr><td>test</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<img src="default.jpg" />
</table>
As you see, that image is still there. Why? I've used .html, so this is expected result after executing this: $('table').html('<tr><td>test</td></tr>');
<table>
<tr>
<td>test</td>
</tr>
</table>
How can I do that?

The reason is that the img isn't inside the table as of when you call html, because it's not allowed to be. <table><img ...></table> is invalid markup; tables can only directly contain certain table-related elements, not img elements. So the browser fixes it for you by moving the img out of the table. (For instance: Chrome fixes it by moving the img to just in front of the table: <img ...><table></table>.)
If it were in the table in the first place, yes, calling html to replace the table contents would work:
$('table').html('<tr><td>test</td></tr>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<img src="default.jpg" />
</td>
</tr>
</table>
In a comment you've asked:
...how can I select the image in this? <img src="#" /> <table></table> ? Actually I want to start selecting with table tag. like this $('table').sibiling ...
I don't think you can, reliably, because again the original markup was invalid and so browsers are free to do what they want to handle it. That said, Chrome, Firefox, and IE11 all seem to put the img before the table, so $("selector-for-the-table").prev() should be the img:
var table = $('table');
table.html('<tr><td>test</td></tr>');
table.prev().remove(); // Remove the img
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<img src="default.jpg" />
</table>

IMG is not a text tag. If you want to hide it, you must remove it.

jquery not picking up html

So I have the following HTML
<div class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</div>
and the following JS:
console.log($('#query_tmpl').html());
For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )
Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.
Update:
Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?

You don't have table tags around your tr. Try this:
<div class="tmpl" id="query_tmpl">
<table>
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
</div>
This will log the div's contents properly.
the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table, leaving you with only the a.
If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.

Make it like this
<table class="tmpl" id="query_tmpl">
<tr>
<td></td>
<td class="primary_email"></td>
</tr>
</table>
Then it will surely work correctly

If you want to pick up tr's or td's you can use css manipulation functions such as children([selector]) where selector is eventually a class

Unable to load the remote dialog of Struts2-Jquery

Am using Struts2 Jquery plugin,Please take a look on this code.
<s:iterator status="stat" value="primeDisplayLocationBeans">
<tr>
<td class="last center">
<sj:a openDialog="myremotedialog" href="opendemographicdetails?locationId=%{id}">
Demographic
</sj:a>
<sj:dialog id="myremotedialog" autoOpen="false"
title="Demographic Details" width="800"/>
</td>
</tr>
</s:iterator>
Now what happening the code create a list of dynamic link,and if i click those link it will open the respective content on remote dialog.But the problem is the first row link is not working,but all the other link are working properly and opening there respective dialog.For the first link not even the dialog is opening.
The error its showing in Java script Console is:
Cannot set property 'href' of undefined

You are assigning the same ID to multiple elements, that is against (X)HTML specs, and doesn't allow you to refer uniquely to an element later (having multiple of them with the same ID).
Parametrize your ID with something like this:
<s:iterator status="stat" value="primeDisplayLocationBeans">
<tr>
<td class="last center">
<sj:a openDialog="myremotedialog_%{#stat.index}"
href="opendemographicdetails?locationId=%{id}">Demographic</sj:a>
<sj:dialog id="myremotedialog_%{#stat.index}"
autoOpen="false" title="Demographic Details" width="800"/>
</td>
</tr>
</s:iterator>

jquery append and jquery html not working in IE 7 or 8

I have the following code in an external JavaScript file that is called within <head>:
function dailyDealWidget() {
$.getJSON('http://myurlhere.com?_render=json', function(data) {
$('#dd-thumb').append('<img src="'+data.value.items[0].deals.deal.splashpagemainimage+'" />');
$('#dd-description').append(data.value.items[0].deals.deal.offer+' from '+data.value.items[0].deals.deal.merchantname);
$('#dd-value').append('$'+data.value.items[0].deals.deal.productvalue);
$('#dd-discount').append(data.value.items[0].deals.deal.totaldealcount+'%');
$('#dd-price').append('$'+data.value.items[0].deals.deal.saleprice);
$('#dd-sold').append(data.value.items[0].deals.deal.inventorytaken+' Sold');
}); //End json
}
Within <body> I have this:
<script type="text/javascript">dailyDealWidget()</script>
<div id="dd-widget"></div>`
<div id="dd-widget">
<div id="dd-container">
<div id="dd-thumb"></div>
<div id="dd-infobox">
<div id="dd-description"></div>
<table width="165px" cellpadding="0" cellspacing="0">
<tr>
<th>Value</th>
<th>Discount</th>
<th>Save</th>
</tr>
<tr>
<td id="dd-value"></td>
<td id="dd-discount"></td>
<td id="dd-price"></td>
</tr>
<tr>
<td colspan="3" id="dd-sold"></td>
</tr>
</table>
</div>
<div style="clear:both;"></div>
</div><!--End container-->
</div><!--End dd-widget-->
It appears that .append() is not adding the content to the desired locations in IE. I've also tried using .html() rather than .append() but without any luck.
There are no errors in the console... both in Firebug and in IE's developer tools.
Any help would be appreciated.

Try to invoke dailyDealWidget after the page has been loaded.

.append() & .html() DO work in IE 7 & 8, so this is not the problem. Have you tested to make sure that the callback function for getJSON is actually being called? Have you examined the actual strings being passed to .append() prior to trying to perform the append itself?
Try logging something to the console at the beginning of the $.getJSON callback function to make sure that's actually running, and then try logging the strings you're passing to the .append() functions.

Are the DIV appends working and just not the TD appends? if so, try to re-draw the whole TR row into one variable then replace the existing row.

Setting <td> value using jquery

I have the div structure shown below. For the second <td> in the table i want to replace with a hyperlink whose href attribute is stored in the variable myLink.
How can i do this with jquery ?
Please help.
Thank You.
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle">
<h2 class="mainTitle">Transfer Membership</h2>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>

You can do something like this:
// you said this was already set
var myLink = 'http://stackoverflow.com/questions/2761234';
var $a = $('<a>').attr('href',myLink).text('My Link!');
$('.pbHeader td:eq(1)').empty().append($a);
This uses the :eq() selector to grab the second TD underneath a .pbHeader (:eq is zero based, so 0 is the first element, 1 is the second element). It empties your and appends the generated <a> tag inside of it.
You could also do this:
$('.pbHeader td:eq(1)').html('My Text!');
Which sets the innerHTML of that <td> to be your "link"
jsbin preview