Develop Reference

"change" not working like "click"

So I have a web page that looks like this to start with, essentially...
<div id="videonotes_container">
<div id="videonotes_information">
<div id="videonotes_name">Name</div>
<div id="videonotes_points">100 points etc</div>
<div id="videonotes_instructions">
Instructions
</div>
**<div id="videonotes_quicklinks">
<!-- this is where the quick links to the past comments go. -->
</div>**
</div>
<div id="videonotes_video">
<div id="videonotes_video_player"></div>
<div id="videonotes_video_player_overlay"></div>
</div>
<div id="videonotes_controls">
<div id="videonotes_start" class="videonotes_videocontrol">-></div>
<div id="videonotes_pause" class="videonotes_videocontrol">::</div>
<div id="videonotes_stop" class="videonotes_videocontrol">STOP</div>
<div id="videonotes_back30" class="videonotes_videocontrol">RW30</div>
<div id="videonotes_forward30" class="videonotes_videocontrol">FF30</div>
</div>
</div>
and the bit in bold is an area which is dynamically populated by javascript after the page has loaded, with a function that looks like this...
function videonotes_addNote(user_note_id, time, note, rating, feedback) {
// add a new div...
var html_fb = "";
var html_hl = "";
html_hl += "<div class=\"videonotes_note_time\">"+time.toFixed(0)+"</div>";
html_hl += "<div class=\"videonotes_note_note\" data-id=\""+user_note_id+"\" contenteditable>"+note+"</div>";
html_hl += "<div class=\"videonotes_note_comments\">"+rating+"</div>";
// iterate over the feedback and add it into the program.
feedback.forEach(function(value) {
html_fb += "<div class=\"videonotes_note_feedback_note\"><span class=\"videonotes_note_feedback_intro\">"+value.username+" ("+value.timestamp+") said</span> "+value.feedback+"</div>";
html_fb += "<div class=\"videonotes_note_feedback_useful\" data-id=\""+value.noteid+"\">";
html_fb += "<div class=\"videonotes_note_feedback_useful_yes videonotes_note_feedback_useful_button\">ACC</div>";
html_fb += "<div class=\"videonotes_note_feedback_useful_no videonotes_note_feedback_useful_button\">NAC</div>";
html_fb += "</div>";
});
// create a new note on the notes box...
var new_note = $('<div/>', { 'class':'videonotes_note' }).appendTo('#videonotes_quicklinks');
// add the headline to the div...
$('<div/>', { 'class':'videonotes_note_headline', 'html': html_hl, 'click':function(){ videonotes_clickNote(this, time); },}).appendTo(new_note);
// and add the feedback
$('<div/>', { 'class': 'videonotes_note_feedback', 'html': html_fb }).appendTo(new_note);
}
You will note there are a few bits created from this - there are onclick events created which will open feedback on this particular note and navigate to a part of a video. This all works just fine, and the onclick events work just fine for the dynamically created elements. The exception is that for each note you should be able to rewrite it in the div, so you can click the div with the note in, it will naviagte to the correct part of the video (works), it iwll open up the feedback (works) and when you EDIT the .videonotes_note_note class it will fire an update using this method:
$('#videonotes_container').on("change", '.videonotes_note_note', function() { videonotes_update_note($(this).data('id'), $(this).value()); })
However this does not work. I have tried $(document) and all other parent, pre loaded divs I can think of but it still doesnt fire that particular event. There is no difference in the way I am creating this listener to the others, and all the clicks work fine, but the change doesnt.
Am I misunderstanding how the change element works?

change event is not supported on the div tag, you can get the list of input on which change event get fired . https://www.w3schools.com/jsref/event_onchange.asp

Jquery tool tip is not showing with AJAX data load

I am having issue regarding the showing tooltip on the ajax loaded content, I am adding the tooltip to ul with a function, and trying to bind it with mouse over event as it works.
str += '<li><a href="#" class="tooltip-1" data-placement="top" data-original-title="' + _icon_list[2] + ':' + obj[_icon_list[1]] + '">' +
'<i class="' + _icon_list[0] + '"></i></a></li>';
after adding the data I am trying to bind it
$('a.tooltip-1').on({
"mouseover": function() {
tool_tip();
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
function tool_tip() {
$('[data-toggle="tooltip"]').tooltip()
}
it's getting callback but not showing the tooltip? here is the link of theme which has the tooltip and i am using it with my dynamic content.
http://www.soaptheme.net/wordpress/citytours/shortcodes/

Where is your ajax function?
Just add a title="your tooltip text here" in your href and in you ajax callback call this command.
$('a.tooltip-1').tooltip( );

Unable to create multiple versions of a DIV

I have some jQuery code, below, that tries to place multiple folder icons at the top of a gallery pane. The AJAX call retrieves the folder information which is just a string that looks like:
"boots,50,120,socks,50,160,shoes,50,200,"
where, in this case, there are three folders: "boots" located at top=50, left=120, socks etc.
For each folder in the returned data the code tries to create a div, containing a folder icon, position it according to the data from the AJAX call and append it to the DOM. But something is very wrong because I'm producing multiple multiple folders with the same name and same offset.
$.post('ajax.php', {op : 'get_folders'},
function(responseTxt, statusTxt, xhr) {
var folderDiv;
var folders = responseTxt.split(",");
for (i=0; i<folders.length; i=i+3){
name=folders[i];
posTop=folders[i+1];
posLeft=folders[i+2];
folderDiv = '<div class=openclosed_folder_icon>' +
'<img class="folder_icon" src="images/folder_closed.png" alt="closed folder" />' +
'<div class="folder_name" >name</div>' +
'</div>';
$(folderDiv).find('.folder_name').text(name);
$(folderDiv).attr({'id' : name});
$(folderDiv).draggable(folder_icon_dragOps)
.css({'cursor' : 'pointer',
'position' : 'absolute',
'top' : posTop,
'left' : posLeft
})
.appendTo('#galleryHeader');
}
});
Does anyone see a problem with this code?

Every time you do $(folderDiv), you are re-creating the DOM element and making a new jQuery object. You need to call $(folderDiv) once, and save it into a variable.
var folderDiv = '<div class=openclosed_folder_icon>' +
'<img class="folder_icon" src="images/folder_closed.png" alt="closed folder" />' +
'<div class="folder_name">'+name'+</div>' +
'</div>';
var $folderDiv = $(folderDiv); // Convert this into a DOM element, and save the jQuery object
// Do actions on the saved jQuery object, so that you are editing the *same* DOM element
// You can chain together these calls
$folderDiv.find('.folder_name').text(name).attr({'id' : name});
$folderDiv.draggable(folder_icon_dragOps).css({
'cursor':'pointer',
'position': 'absolute',
'top': posTop,
'left': posLeft
}).appendTo('#galleryHeader');

How to stop jQuery page elements from repeating?

My jQuery code runs when I click a link. However, if I click the link multiple times, the code will repeat itself and appear under the previous code, which I don't want it to do.
Also, if I click the "close" option, and reopen it, it will have repeated. How do I stop it from doing this? Here is the code, by the way:
$("#pop").click(function() {
$("#overlay_form").fadeIn(1000);
$("#statsStr").append('<br />' + strOne).fadeIn(1000);
$("#statsCun").append('<br />' + cunOne).fadeIn(1000);
$("#statsAgil").append('<br />' + agilOne).fadeIn(1000);
$("#statsWis").append('<br />' + wisOne).fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form").fadeOut("slow");
$("#statsStr").fadeOut("slow");
$("#statsCun").fadeOut("slow");
$("#statsAgil").fadeOut("slow");
$("#statsWis").fadeOut("slow");
});
Thanks for the help!
EDIT: I have taken the suggestion to change my code to this:
// append the strings only once on load
$(function() {
$("#statsStr").append('<br />' + strOne);
$("#statsCun").append('<br />' + cunOne);
$("#statsAgil").append('<br />' + agilOne);
$("#statsWis").append('<br />' + wisOne);
});
$("#pop").click(function() {
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
And while it works great, there is one problem. The game I am making requires the "#pop" function to update every once in a while to display what your "stats" are. Is there any way to refresh the code so that it will display the updated variables?

EDIT try this for your solution:
//call this method whenever you want to update your stats
//passing in the variables
var updateStats = function(str, cun, agil, wis) {
$("#statsStr").html('<br />' + str);
$("#statsCun").html('<br />' + cun);
$("#statsAgil").html('<br />' + agil);
$("#statsWis").html('<br />' + wis);
};
$("#pop").click(function() {
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form, #statsStr, #statsCun, #statsAgil, #statsWis").fadeOut("slow");
});
$(document).ready(function() {
// assuming you have set these variables in the current scope.
updateStats(strOne, cunOne, agilOne, wisOne);
});

Consider using one() instead, which only triggers the event once.

It sounds like what you really want to do is show the #overlay_form on pop and hide it on close.
You could add the html to the page when it is rendered but use display none. That way you can simply show / hide when you click pop or close.
See if this example has the behavior you would like.
http://jsfiddle.net/qh4eN/1/
<style>
#overlay_form {
display: none;
}
</style>
<div>
<span id="pop">pop</span>
<span id="close">close</span>
<div id="overlay_form">
<div id="statsStr">statsStr</div>
<div id="statsCun">statsCun</div>
<div id="statsAgil">statsAgil</div>
<div id="statsWis">statsWis</div>
</div>
</div>
<script>
var strOne = "strength";
var cunOne = "constitution";
var agilOne = "agility";
var wisOne = "wisdom";
$("#pop").click(function() {
$("#statsStr").text(strOne);
$("#statsCun").text(cunOne);
$("#statsAgil").text(agilOne);
$("#statsWis").text(wisOne);
$("#overlay_form").fadeIn(1000);
});
$("#close").click(function(){
$("#overlay_form").fadeOut("slow");
});
</script>

Recommended method of adding/storing/constructing HTML controls dynamically

Is there a recommended method of dynamically adding/storying/constructing HTML controls to dynamically added elements on a HTML page?
Basically, I have a widget based system I'm working on, where the user chooses the widgets s/he wants to have displayed. S/He can have as many or as little widgets on the screen as required, and they can also have the same widget many times displayed at once.
The script for that looks something like this:
success: function( widget_shell )
{
if( widget_shell.d[0] ) {
$(".column").empty();
var i = 0;
for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {
var $widget = $("<div class='widget widget_" + widget_shell.d[i].widget_id + "'>").appendTo( $(".column_" + widget_shell.d[i].column_id) );
$("<div class='widget_header widget_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
$("<div class='widget_sub_header widget_sub_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
$("<div class='widget_content widget_content_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
$("<div class='widget_footer widget_footer_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
}
each .widget will need controls such as buttons, textboxes etc in the .widget_sub_header section. What is recommended way of doing that? "That" as in, how to get further HTML controls into the .widget_sub_header. Add the HTML for the controls in the database? Somehow connect to an external file containing the HTML controls and add them in? or some other method?
I guess my 2 main concerns are:
Easy maintenance
Server resource friendly

jquery-ZenCoding is easy way to create some nested html elements :
https://github.com/zodoz/jquery-ZenCoding
exemple :
$.zen("div#widget>ul.instrument>(li{piano}+li{guitare}+li{flute})");

What about something like this? I suggest instead of adding a class with the id, add an actual id on the parent, that's all you need to target children elements.
function createWidget( id ) {
var widget = [
'<div class="widget">',
'<div class="widget_header"></div>',
'<div class="widget_sub_header"></div>',
'<div class="widget_content"></div>',
'<div class="widget_footer"></div>',
'</div>'
].join('');
return $( widget ).attr( 'id', 'widget_'+ id );
}
$.each( widget_shell.d, function( i,v ) {
$('.column_'+ v.column_id)
.append( createWidget( v.widget_id ) );
});

I'd add a small template engine. There is a very simple one made by John Resig that I use frequently at:
John Resig micro-templating
Chances are you'll be doing this sort off thing again so a template engine is pretty handy to have lying around.
If you don't like that one you can have a look at a great resource of micro-templates at:
Microjs templates

I've used to work on a similar widget system.
This is how I've managed it :
Have a hidden div container that holds all the template elements.
<div id='widget-templates'>
<div class='widget1-id' >
<input type='text' class='ytSearch'/>
<button id='btnYtSearch'>Search</button>
</div>
<div class='widget2-id'></div>
...
<!-- etc etc -->
...
</div>
I used an object called widgetFactory which holds all the javascript code needed to create a widget from the template.
var widgetFactory = {
youtubeSearch: function(data){
var $generatedWidget = $('#widget-templates > .widget1-id').clone();
// prepopulate with some data if requested (usually when binding data to an already existing widget)
// ...
// attach events
// ...
return $generatedWidget;
}
}
Then with external javascript logic, I would save just the widget data (as JSON) and widget type into the database.
tbl_widgets(id, name, type)
tbl_user_widget(user_id, widget_id, data)
Note that this is just from my memory and there probably is a much more profound solution, but i hope it could shine any new idea on your user customizing widget system.