I have a div which has no content. the content is dynamically loaded into the div, through jquery load(). This content contains links. I'm using the jquery load all links into functions to launch a dialog, but its not working because the links don't show in the source. Any workaround to this?
<pre>
<script type="text/javascript">
$(document).ready(function() {
var $loading = $('<img src="loading.gif" alt="loading" class="loading">');
$('#maindiv a').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
</script>
</pre>
You need to use the .live keyword so that you can attach events to generated html.
in jquery 1.7 (i think) .live is now .on so watch out for that one.
$(".Link").live("click", function(){
//code here
});
or
$("a").live("click", function(){
//code here
});
You might also want to remove the default behavior of the link when you click on it.
http://api.jquery.com/event.preventDefault/
Related
I'm trying to create element with jquery and loading html file but my code is not working I tried different ways but none of them didn't work for me first code was
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("</div>", {"id": "createFreeAccountDiv"}).load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
});
});
this code was not working then I tried this one
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("body").append(jQuery("</div>", {"id": "createFreeAccountDiv"}).load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
}));
});
This was also not working then I tried simple one to create element and third one was
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
e.preventDefault();
jQuery.noConflict();
jQuery("body").append(jQuery("</div>", {id: "createFreeAccountDiv"}));
});
Then I saw that div element is not created I check the code and its syntax and its code is right don't know what is the problem.
Note: this code is working fine
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
jQuery("#createFreeAccountDiv").load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
});
});
because I already created div myself in a html file.
Now finally I don't want to create div myself I want to create div with jquery and load html file which has bootstrap modal.
jQuery("</div>", need to be either jQuery("<div></div>", Or jQuery("<div>",
So code need to be:-
jQuery(document).on("click", "#clickToCreateFreeAccount", function(e) {
append(jQuery("<div id='createFreeAccountDiv'></div>").load("js/Modals/createFreeAccount.html", function() {
e.preventDefault();
jQuery.noConflict();
jQuery("#createFreeAccountModal").modal("show");
}));
});
$('#element_name').append('<div id"element_id_ex1" name="element_name_ex1"></div>');
or
$("#clickToCreateFreeAccount").on('click',function()
{
$('#element_name').append('<div id"element_id_ex1" name="element_name_ex1"></div>');
});
$(document).ready(function(){
var config="<div>Hi Welcome</div>"
jQuery('body').append(config);
});
I'm creating an overlay div using the following code when an image thumbnail is clicked:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs)
return false;
});
});
</script>
This works fine.
Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:
<script>
jQuery(document).ready(function(){
jQuery( "#overlay #imgBig" ).click(function() {
jQuery("#overlay").remove();
});
return false;
});
</script>
but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!
Could someone please advise on this issue?
Thanks in advance.
The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.
Try this:
jQuery(document).ready(function(){
jQuery( "#imgBig" ).on('click', function() {
jQuery("#overlay").remove();
});
return false;
});
You should use the second part inside the first function, like this (I replaced Jquery with $):
...
var imgs = (this.href);
$('#overlay #imgBig').attr("src", imgs);
$( "#overlay #imgBig" ).click(function() {
$("#overlay").remove();
});
return false;
A JSFiddle example:
JSFiddle
Now i need to remove or hide the overlay div when the user clicks on
the img with the id of imgBig
Try assigning click event to img element having src set to imgs
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs);
// assign `click` event to `img` element having `src` set to `imgs`
jQuery("img[src=" + imgs + "]").on("click", function() {
// do stuff
// e.g., remove or hide the overlay div
$(this).parent().remove();
});
return false;
});
});
The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:
jQuery( "body" ).on( 'click', '#imgBig', function() {
jQuery("#overlay").remove();
});
Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/
Hope that solves your problem.
Original fiddle example
Failed example for dynamically created dialog
I got this script to load AJAX content into a jQuery UI dialog whose class is named .open_dia in the fiddle examples. The problem is that I have the .open_dia dynamically loaded into the page in a (window).bind(“load”, function(){} event , so I want to know how to change this line from
var $link = $(this).one('click', function(){....
to something to the effect of
var $link = $('.area').one('click','.open_dia', function() {
so that I can bind the event to the dynamically created element .open_dia to open the dialog. Any help would be appreciated.
Here's the original code:
$(document).ready(function() {
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Failed Code:
$(document).ready(function(){
$('button').one('click',function(){
$(this).next('.area').append('<a class="open_dia" title="this title" href="http://jsfiddle.net/">Click</a>');
});
var $loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$('.open_dia').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $('.area').one('click','.open_dia', function() {
$dialog
.load($link.attr('href') + ' #content')
.dialog({
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
});
Example HTML:
<button>Append open_dia</button>
<div class='area'></div>
Hi I have forked your solution and made modification to your javasript as follows:
var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');
$(document).ready(function () {
$('button').click(function () {
$(this).next('.area').append('<a class="open_dia" title="this title" href="#">Click</a>');
});
$(document).on('click', '.open_dia', function (evt) {
var dialog = $('<div></div>').append(loading.clone());
dialog.load($(this).attr('href') + ' #content').dialog({
title : $(this).attr('title'),
width : 500,
height : 300
});
dialog.dialog('open');
return false;
});
});
My modified JS fiddle is here: http://jsfiddle.net/91nc1k1t/2/
If you want to load each dialog's content only once, see this update of the forked fiddle: http://jsfiddle.net/91nc1k1t/5/
You can use this:
<button>Append open_dia</button>
<div class='area'><a style="display: none;" class="open_dia"></a></div>
There is no problem if the target DOM element is dynamically generated. For it to work, please ensure that the event handler is registered on container element (parent of the dynamically created element)'s click event. This will fix the issue !
We previously have:
<input type='button' value='Some Button' onClick="window.open('somefile.php')">
Now we want to activate jQuery UI modal dialog instead of having a pop-up. We can trigger the modal dialog if we use an anchor tag like so: Open Dialog.
But what if it's an input button?
I am using this script to call the dialog (and so that it can open a file into the dialog box):
$(document).ready(function() {
$('.classfordialog').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
Src: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/
You can use anything to activate the opening of the jQuery Dialog.
For example.
$(function(){
$('.classfordialog').click(function(e){ e.preventDefault(); $('#dialog').dialog(); });
});
You can add the class to either a button, input, anchor, image, etc...
Well you obviously cant get the link and title from the "Link/A" if it isnt there?
$(document).ready(function() {
$('.classfordialog').each(function() {
var $dialog = $('<div></div>')
.load('somefile.php #content')
.dialog({
autoOpen: false,
title: 'Some title',
width: 500,
height: 300
});
$('.inputdialog').click(function(e){
e.preventDefault();
$dialog.dialog('open');
});
});
});
Currently coding a mates portfolio and not to my surprise the code isn't loading in IE!
I'm coding it using standard AJAX, here's the relevant jQuery:
//ajax shtuff
$(window).load(function() {
// Ajax Cache!
$.ajaxSetup ({
cache: false
});
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $('.current').attr('href');
// Initial Page Load
$('#con').prepend($loadW);
$('#main').fadeOut('slow', function() {
$(this).load($loadurl + ' .page', function() {
$(this).parent().find('#whiteLoader').fadeOut('slow', function() {
$(this).parent().find('#main').fadeIn('slow').css({background: 'red'});
$(this).remove();
});
});
});
$('nav ul li a').each(function() {
$(this).click(function(e) {
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $(this).attr('href');
// Prevent default hotlink
e.preventDefault();
// Add the current state
$('*').removeClass('current');
$(this).addClass('current');
// Load the Page
$('#main').fadeOut('slow', function() {
$('#con').prepend($loadW);
$('#main').load($loadurl + ' #main', function() {
$('#whiteLoader').fadeOut('slow', function() {
$('#main').fadeIn('slow');
$(this).remove();
});
});
});
});
});
});
Literally have no idea why this doesnt work lol, here's a link to the live page (I've put the background as red just to show you the area.)
Also the reason the initial page is using the 'this' method is because I was testing it both ways.
http://212.7.200.35/~tfbox/zee/
have you tried
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
instead of window.load?
Often IE has trouble styling / selecting any of the new HTML5 elements such as section and nav. Try using something like this or simply using a div