Develop Reference

Make jquery working on dynamic content

i have this bootstrap carousel script, but the trigger is an appended button. I'm junior in js and i'm not that sure how should i us on or delegate to make it working and change the code. Could you help me with this? also maybe tell me how should i use it. Thnx in advance
<script>
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
$(".modal-title").html($(this).find(".active img").attr("title"));
})
/* when clicking a thumbnail */
$(".galz .gal").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal
$("#modal-gallery").modal("show");
});
</script>

Use event delegation
$(document).on('click', 'element', function() {
// Your function code
});

You can call click in this way also
$(document).delegate('.galz', 'click', function() {
//your code
});

Change TinyMCE HTML after the plugin is enabled

I can change the HTML displayed in TinyMCE by clicking "restore". I now wish to return the HTML to the orignal HTML by clicking "cancel". For the life of me, I cannot figure out why my approach doesn't work (it displays the newly modified HTML). How is this accomplished. Please see http://jsfiddle.net/3pn3x4zj/ which is duplicated below. Thank you.
JavaScript
tinymce.init({
selector: '#tinymce',
setup: function (ed) {
ed.on('init', function (e) {
e.target.hide();
});
}
});
$(function () {
$('#cancel').hide();
$('#restore').click(function () {
console.log('Save old HTML and put new HTML from GET request in DIV');
$('#cancel').show();
$('#restore').hide();
$(this).parent().data('oldHTML', $('#tinymce').html());
var newHTMLgottenFromGetRequest = '<p>Bar Bar Bar</p>'
$('#tinymce').html(newHTMLgottenFromGetRequest);
tinymce.get('tinymce').show();
});
$('#cancel').click(function () {
console.log('Put back original HTML');
$('#cancel').hide();
$('#restore').show();
$('#tinymce').html($(this).parent().data('oldHTML'));
tinymce.get('tinymce').hide();
});
});
HTML
<div id="tinymce">
<p>Foo Foo Foo</p>
</div>
<button id="restore">restore</button>
<button id="cancel">cancel</button>

Try reversing these lines in the #cancel click event:
$('#tinymce').html($(this).parent().data('oldHTML'));
tinymce.get('tinymce').hide();
becomes
tinymce.get('tinymce').hide();
$('#tinymce').html($(this).parent().data('oldHTML'));

Bootstrap popver for element generated at run time

Problem statement
I need to add bootstrap popover at runtime ,
i followed this fiddle link for example.
i have forked the above fiddle to customise as per my need
Link to my fiddle
i am trying to add new bootstrap popover on button click, Link is added successfully but pop over dosent work.
HTML
<div class="well">
Click to toggle popover
<a class="btn bad">Bad button</a>
</div>
javascript
var $popover = $('[data-toggle=popover]').popover();
//first event handler for bad button
$('.bad').click(function () {
alert("clicked");
});
$(document).on("click", function (e) {
var $target = $(e.target),
isPopover = $(e.target).is('[data-toggle=popover]'),
inPopover = $(e.target).closest('.popover').length > 0
//does absolutely nothing. Only wastes memory
$('.bad').click(function () {
console.log('clicked');
return false;
});
//hide only if clicked on button or inside popover
if (!isPopover && !inPopover) $popover.popover('hide');
});
Dependencies:
jquery 1.9.1
bootstrap-combined.min.css
bootstrap.min.js
Thanks in advance

you need to initialize the popover after adding.
var $popover = $('[data-toggle=popover]').popover();
see this fiddle

Hide modal window javascript

So to show this modal I have the following code:
<button type="button" onclick="openModal(); return false;">A button</button>
and the javascript for this is:
<script type='text/javascript'>
function openModal(a)
{
$.modal({
content: 'Some content here',
title: 'a title',
maxWidth: 500,
});
win.closeModal();
}
</script>
I need a function that will hide this. Can anyone give me some advice on how to do the hideModal() function which will hide the modal when I click anywhere on the screen?

With the modal open in the browser window, use the browser's console to try
var modal;
function btnsModal() {
var btns = {
'Close': function (win) {
modal.closeModal()
}
}
return btns;
}
function openModal(oLink, content) {
var btn = btnsModal();
modal = $.modal({
buttons: btn
});
}

You can add "open" event to dialog, and then bind on click listener to it which will close the dialog if you click anywhere---
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#ID_of_ur_dialog').dialog('close');
})
}
for hiding effect you can use "hide" option---
hide: "highlight"

This is dumb...
I fixed this with display none in css... It turns out I didn't thick it trough... I added the display none and a JS event that triggers the CSS upon clicking anywhere else in the page, except the modal.
Thank you very much for all your input guys! Really appreciate it!

Unable to get javascript to do button click from child iframe

I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>

So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...