Develop Reference

Strange behaviour with jquery load function

I am using jquery's load function to updated a div inside my jsp. However the issue is, even if I give the wrong div id the correct div gets updated but if I give the correct div id , it doesn't work.
Inside my jsp:
<div id="markers" class="height-400"></div>
Inside Js:
$("#marker").load(location.href + " #marker>*", ""); //works (notice marker instead of markers)
$("#markers").load(location.href + " #markers>*", ""); // Doesn't work
Can someone please help me understand what's going on here.
Referring to this post Refresh/reload the content in Div using jquery/ajax

Try using the code without the double quotes after your CLASS/ID.
$("#markers").load(location.href + " #markers>*");

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.

Hide div having variable dynamic ID

The div is a switch which gets a dynamic ID .
class name is impbtn , id is generated in variable this.impbtn6.id
HTML:
<div id="widget-id63032Candy_Eaten_importGoodsBtn" class="impbtn"></div>
There are two places hide is required - click and onload
In click event
document.getElementById(this.impbtn6.id).style.visibility="hidden";
works fine .
I cannot use Document.getelementbyID , as multiple form loads occur and button is not supposed to be hidden then .
So i trued using JQ to access css properties
This
jQuery('.impbtn, #this.impbtn6.id').css('visibility',"hidden");
works but makes all button in the class invisible . I want to make only this.expbtn6.id invisible not all ids under this class .
I have read each and every page available.Some things Iv unsuccessfully tried (Separately)
var vid= this.impbtn6.id;
jQuery("#"+ vid).visibility("hidden");
$('#vid .impbtn').css('visibility',"hidden")
var row2=$(".impbtn").find("div#"+vid);
row2.hide();
$('#vid .impbtn').css('visibility',"hidden");
$('div#vid').css('visibility',"hidden");
$('.impbtn', $("#div" + this.impbtn6.id)).css('visibility',"hidden");
$("#div"+ vid).css('visibility',"hidden");
$("#"+ vid).hide();
$('#vid').css('visibility',"hidden");
row = $('#' + vid);
row.css('visibility',"hidden");
I would highly appreciate a reply/comment.

your question is a little confusing as you say
document.getElementById(this.exportbtn6.id).style.visibility="visible";
works fine but this code shows the div, not hides it, and why cannot the same code be used to hide if you use it to show?
then your other snippet that supposedly works:
jQuery('.expbtn, #this.exportbtn6.id').css('visibility',"visible");
cannot work because #this.exportbtn6.id will not resolve to the variable's content inside the double quotes, so i am pretty sure this line will not do anything.
The way to do this correctly is
jQuery('#' + this.exportbtn6.id + '.expbtn').hide();
but i cannot tell for sure as the question is not clear. If my understanding of your question is correct, the above line will do the trick. Keep in mind that the value of "this" will differ based on context, so it maybe that you are referencing the wrong "this".

Try this
$('#this.exportbtn6.id').css('visibility','visible');

With jQuery:
$("#"+this.expbtn6.id).hide();
I hope it helps.

Odd DOM tree JavaScript problem

I am having an issue with this site -
http://thestamp.umd.edu/canvastest/test.html
I'm trying to build a simple HTML emailer with JavaScript to render and generate HTML which will then be sent to a page, etc.
However, when you create three paragraphs (箱を作る) and then try to move the third one up with the onclick being swapup('render2'); it just moves it to the top.
But the odd thing is when you paste swapup('render2'); in the console, it works just fine. Why should the onclick behaviour be different when I'm not referencing 'this' in any capacity?

Your problem is that you are calling swapup twice. Take a look at the HTML
<span class="floatbutton" onclick="swapup('render0');">
<input onclick="swapup('render2');" value="上" type="button">
<input onclick="swapdown();" value="下" type="button">
</span>
both span and input are calling swapup. It looks like swapup is being dynamically assigned at some point to the span, which may be causing your problem... I'll have to dig a little more to figure it out though.
EDIT:
I see now. In your swapup function you are calling
elm.childNodes[0].setAttribute('onclick', 'swapup(\'' + previous.id + '\');');
I'm not sure if you intended that or not... can you clarify?
EDIT 2:
I think you need to change
elm.childNodes[0].setAttribute('onclick', 'swapup(\'' + previous.id + '\');');
previous.childNodes[0].setAttribute('onclick', 'swapup(\'' + temp + '\');');
in boxes.js lines 23-24 to
elm.getElementsByTagName("input")[0].setAttribute('onclick', 'swapup(\'' + previous.id + '\');');
previous.getElementsByTagName("input")[0].setAttribute('onclick', 'swapup(\'' + temp + '\');');

Firing Javascript on dynamic <div> load

I'm working on adding page title notifications for an install of AJAXchat. I'm using a jQuery plugin called jquery-titlealerts to achieve this. If I assign the method on the onclick event it works as correctly and changes the page title. But that doesn't work as I need. I need it to change the page title each time a new div is created. Here is the js that dynamically creates a new div every time someone submits a message:
return '<div id="'
+ this.getMessageDocumentID(messageID)
+ '" class="'
+ rowClass
+ '">'
+ this.getDeletionLink(messageID, userID, userRole, channelID)
+ dateTime
+ '<span class="'
+ userClass
+ '"'
+ this.getChatListUserNameTitle(userID, userName, userRole, ip)
+ ' dir="'
+ this.baseDirection
+ '" onclick="$.titleAlert(\'Error!\');">'
+ userName
+ '</span>'
+ colon
+ this.replaceText(messageText)
+ '</div><script>$.titleAlert(\'Error!\');</script>';
return
As you can see I've tried creating a <script> block to load just below the div - and it does but for some reason isn't changing the document title. If you click on a message generated in the chat it will work though because it is being fired from the onclick event..
I'm not sure what else to try to get it to work when each div is loaded.

In the place where you're calling the function that has this return statement, after you call that function you should update the page title. If you don't want to do it that way, you can have the function that returns your new Div content update the page title right before it returns.
Alternatively, consider using jQuery's $.ajax() method with a complete (or success) callback to do the title modification. Honestly, this would be my preferred approach if I were to be given this problem to solve.
You can read all about $.ajax() here.

Inserting a script block programmatically almost never works in modern browsers for obvious security reasons.
Instead, make the script that receives this HTML do the alerting, possibly based on part of the content of the HTML; say, a hidden span containing the message to pull out and use as the title.