Develop Reference

PHP echo appears to work but doesnt show up in HTML

I am trying to use a php script to generate HTML in order to save lines and what not. I am using jQuery to call my php and then put the result into a specified div as shown below:
function createSidebarRow(div, cellNum, rowName, rowDesc) {
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc);
}
However, when this is executed the HTML is not updated on the page, I can see that the code has worked because the browser network activity confirms it. I am trying to figure out what is causing it to not update.
This is the network activity confirming the echo'd HTML.

Sorry for stating the obvious, but the div you are trying to fill up does exist with that particular id right?
If so, try this:
$("#" + div).load("createIndexSidebarRow.php?cellNum=" + cellNum + "&rowName=" + rowName + "&rowDesc=" + rowDesc, function() {
alert('success');
});
If the id does exist (and it's unique) and you get an alert there should be no reason for it not to work.

It might be so, that the div is not yet created in the DOM. (the div that should received the html).
Are you calling createSidebarRow directly on page load?
If so, put the function call in a document ready:
jQuery(document).ready(function(){
createSidebarRow (... );
});

Turns out jQuery doesn't play ball when you include spaces in the POST URL. I removed the space and used %20 instead and all is well now. Thanks for any advice.

How do I load iframe in the div inside the div with Jquery

My div is
<div id="chatMessageArea" class="divBorder">
<div id="messageArea" class="divBorder"></div>
<div id="enterMessage" class="divBorder"></div>
</div>
How to load the new Iframe in the div having id messageArea.
My Jquery function will be,
function createIframe(intxnId){
var iframe = "<iframe id='ch_"+intxnId+"' src='" + contexPath + "/heartChat.jsp' ></iframe>";
alert("iFrame Details : "+iframe);
("#chatMessageArea").find("messageArea").append(iframe);
}
My alert result is ,
And I got the error as,
Object doesnot support this error in this line ("#chatMessageArea").find("messageArea").append(iframe);.
How can I create the IFrame with the JSP in the inside div with the ID of messageArea.

Your syntax is a bit off to start with, but you can directly select the messageArea using it's id, like this:
$("#messageArea").append(iframe);
Just to clear up your original problem, you are missing the starting $ and also the # from your messageArea selector, so it should have been this:
$("#chatMessageArea").find("#messageArea").append(iframe);
but again, the find is pointless as you already have a unique ID for messageArea (or at least it should be unique!)

Try this:
function createIframe(intxnId){
// using $() to create the DOM object
var iframe = $("<iframe id='ch_"+intxnId+"' src='" + contexPath + "/heartChat.jsp' ></iframe>");
alert("iFrame Details : "+iframe);
// You have to add the '#' to search for an ID instead of an tagname
$("#chatMessageArea").find("#messageArea").append(iframe);
}

I think you are missing a $ from the start of the last line:
$("#chatMessageArea").find("messageArea").append(iframe);

Update multiple elements with html from jquery ajax call

I have an AJAX call which returns multiple HTML fragments that need replacing on the page:
<div data-replace="some-div">
<p>whatever</p>
</div>
<div data-replace="some-other-div">
<p>something else</p>
</div>
Currently I am adding all the html to a hidden div on the page and then doing:
hiddenDiv.find('[data-replace]').each(function () {
$('#' + $(this).data('replace')).html($(this).html());
$(this).remove();
});
which seems to work but seems a bit hacky.
Is there a better way (whilst still returning HTML rather than JSON as this is out of my control)?

I would create a jQuery object with all DOM elements and not append them to the document as an hidden DIV element since you don't need it. Also you won't need to remove it after your update.
Something like this:
(assuming that your AJAX response is a variable called data)
var $data = $("<div>" + data + "</div>");
$data.find('[data-replace]').each(function () {
$('#' + $(this).data('replace')).html(this.innerHTML);
});

how to get innerHtml of body without an iframe with jquery

I have page with html something like this
<body><iframe ></iframe><div id="menu">......</div>.....</body>
I want to get the innerHTML of the body but without the iframe? How can i do that in jquery?

Try with .clone:
$(document.body)
.clone()
.find('iframe')
.remove()
.end()
.html();

$(document).ready(function(){
$('body').not('iframe').html();
});
that should get everything in the body but the iframe. you'll probably want to store that in a variable or something for reference later

I have found another way to do it
var page = $('body').html();
page = $('<div>' + page + '</div>');
var html = $(page).find('iframe').remove().end().html();
html variable contains the html without the iframe.
And it works with IE, since jquery.clone() did not work on my page may be because of malformed html as #lonesomeday suggestted

Writing to a non-unique div with Javascript

I'm building a multi-feed RSS reader for school.
aList is the div that encompasses each individual feed (the amount of feeds will fluctuate).
theTitle is the div that will be filled with the attribute of the current feed. Additionally, if clicked, it will load a list of attributes from the current feed into theContent.
I'm wondering how I can dynamically load the attributes into theContent when theTitle is clicked, since theContent and theTitle are going to be non-unique divs (I can't give them IDs).
Thanks for your help in advance,
-Andrew

document.getElementsByClassName('aList').getElementsByTagName('div')

You should look into jQuery selectors for that and other DOM Manipulation. Something like
$("div.theContent").attr("name", "value");

by using jquery, you may use code like the following:
$(".theTitle").bind("click", function(){
$el = $(this);
$el.parent().$(".theContent").load('ajax/content.php?news=' . $el.text());
});
this will make all your links clickable, an on click, update their corresponding content divs with the value of ajax/content.php?news=theTitle-value

Use a nice Javascript library such as Prototype or jQuery. Seems petty now, but these frameworks save you tons of time in the long run.
In both frameworks, you can select that div with:
$('div.theTitle')
With jQuery, you can do:
$('div.theTitle').click( function() {
var title = $(this).text();
var contentDiv = $(this).siblings('div.theContent');
// Do something with contentDiv and the title
} );
This will make every theTitle div have an onClick event that does something with its associated theContent div.

<div class="aList">
<div class="theTitle" onclick="fillContentBox(this)"></div>
<div class="theContent"></div>
</div>
And in your script ...
function fillContentBox(div) {
var theContentDiv = div.parentNode.getElementsByTagName("div")[1];
// statements that do things with theContentDiv
}

You have to be able to determine which element you want to update if you don't want to update more than one. If the elements are grouped inside something else that does have an "id" value, you can take advantage of that.