I know this can be done easily using jQuery but haven't been able to find out how to accomplish it with YUI 2.
I am submitting a form via AJAX and in the callback, on success, I want to add the information that was inserted into the existing table in the DOM.
This is what I am trying with no success:
var callback = {
success: function(o) {
var result = YAHOO.lang.JSON.parse(o.responseText);
if (result.success == true) {
var last_row = YAHOO.util.Dom.getLastChild('tbody_urls');
var html = '<tr><th>' + result.name
+ '</th><td><a href="' + result.url + '" title="' + result.url + '">' + result.url.substr(0, 80) + '</a></td><td></td><td></td></tr>';
var el = YAHOO.util.Dom.insertAfter(html, last_row); // el is being set to NULL so the insert is failing
YAHOO.util.Dom.get('form_urls').reset();
}
},
failure: function(o) { error(); }
};
You can't insert an html string after a node. Try to create a row element, insert the html inside it and append the row element:
var callback = {
success: function(o) {
var result = YAHOO.lang.JSON.parse(o.responseText);
if (result.success == true) {
var last_row = YAHOO.util.Dom.getLastChild('tbody_urls');
var html = '<th>' + result.name
+ '</th><td><a href="' + result.url + '" title="' + result.url + '">' + result.url.substr(0, 80) + '</a></td><td></td><td></td>';
var row=document.createElement("tr");
row.innerHTML=html;
var el = YAHOO.util.Dom.insertAfter(row, last_row); // el is being set to NULL so the insert is failing
YAHOO.util.Dom.get('form_urls').reset();
}
},
failure: function(o) { error(); }
};
UPDATE create a dom element for every td and th
var callback = {
success: function(o) {
var result = YAHOO.lang.JSON.parse(o.responseText);
if (result.success == true) {
var last_row = YAHOO.util.Dom.getLastChild('tbody_urls');
var row=document.createElement("tr");
var th=document.createElement("th");
th.innerHTML=result.name;
row.appendChild(th);
var td=document.createElement("td");
td.innerHTML='<a href="' + result.url + '" title="' + result.url + '">';
row.appendChild(td);
row.appendChild(document.createElement("td"));
row.appendChild(document.createElement("td"));
var el = YAHOO.util.Dom.insertAfter(row, last_row); // el is being set to NULL so the insert is failing
YAHOO.util.Dom.get('form_urls').reset();
}
},
failure: function(o) { error(); }
};
Better to use appendChild
because insertAfter
will not work if there are no existing tr's.
<snip>
var tbody = YAHOO.util.Dom.get('tbody_urls');
tbody.appendChild(row);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.