Multiple Jquery Dialogs on one page - javascript

I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>

This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});

I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.

If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick

Related

Stop/destroy Magnific Popup in jQuery

I want to prevent magnificPopup dialog from displaying when I click a button and when no checkboxes are checked.
Here is what I have tried already:
$('[id$=DeleteSelectedItems]').click(function (evt) {
if ($("#datatable :checked").length == 0) {
evt.preventDefault();
$.magnificPopup.remove(); //prevent dialog popup if no checkbox selected
}
});
The above code is doing what I want except $.magnificPopup.remove(); is not a valid function.
So although $.magnificPopup.remove(); prevents the popup from showing, (because it breaks the JavaScript!) it is not a valid function and I get an error in my console when testing this. I have tried $.magnificPopup.destroy(); and $.magnificPopup.stop(); but they are also not valid.
Many thanks for any help you can provide with this!
Thanks for your replies. I ended up using $.magnificPopup.close(); but, importantly, I put my code after the initialisation of magnific popup. Previously, I had it before the initialisation. Stupid mistake! So my working jQuery is:
// initialise magnific popup
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true
});
//don't fire the delete button if no checkbox selected in table with id of datatable
$('[id$=DeleteSelectedItems]').click(function (evt) {
if ($("#datatable :checked").length == 0) {
evt.preventDefault();
$.magnificPopup.close(); //prevent dialog popup if no checkbox selected
}
});
Many thanks for pointing me in the right direction! : )
Maybe evt.preventDefault(); is enough to stop the popup showing, and you can remove the line of code $.magnificPopup.remove(); avoiding in this way the error in the console.
This is how to destroy magnificPopup according to the HTML markup in the snippet below:
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
// initialize magnificPopup
function initMagnificPopup() {
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
}
// destroy magnificPopup
function destroyMagnificPopup() {
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
<button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>

delegate event on jquery for popover bootstrap not working correctly

i am quite new with this delegate thing for dynamic elements. so today i tested again with a generated dynamic template from some example in stackover for popover.
here is my dynamic html content.
<a id="testpop" class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
and then, i have this script on my js
$('#resultContent').on('click','#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
resultContent is the div here where i add .html all my html codes.
i manage to attached the delegate event (i think) but is acting strange as my 1st click on the testpop button, the popover won't show. Until i press the 2nd and 3rd time only it will pop up. Am i doing this delegating wrong?
credits for this test code: HTML inside Twitter Bootstrap popover
You forgot to add a trigger in the popover options. The data-trigger in the element doesn't do too much when you really only initialize the popover() once you click the element. In fact, your JS code would propably work better like so:
$("[data-toggle=popover]").popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
EDIT
Popover should generally be initialized on page load:
$("[data-toggle=popover]").popover();
Putting it inside a click event will not enable popover on the element until you click it first.
Removing the click event from your original JS code should enable it on page load.
If however, the element you mean to attach the popover to is dynamically added to the DOM after page load, you should reinitalize the popover after adding it.
Wrapping the popover in a function would make that much easier.
function addPopover(selector){
$(selector).popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
}
And whenever you add an element to the page that should have a popover, you simply call the function, with a selector for the element. Example for the element you have in your code:
addPopover("[data-toggle=popover]");
In your code, you are configuring the popover on click event of the button.
So, this is how it happens.
Click the anchor link
Initialize the popover with options. (This doesnt mean it displays the popover, it is just a initialization)
Click on the popover again (Popover is already bound because of the earlier call and then it shows)
Also, you need to ensure the popover is not bound to the element again and again to avoid repeated popover bindings.
$('#resultContent').on('click', '#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
}).popover('show');
// Explicitly show the popover.
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="resultContent">
<a id="testpop" class="btn btn-primary" data-placement="bottom" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
</div>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>

How can we pass the parameter from jQuery Dialog and change the content of the html?

I am looking to dynamically change the image shown in the jQuery Dialog. I am trying to pass the ‘image path’ as parameter which will be used to change the image shown in the jQuery dialog. Please! Check my code below.
By default, it will show ‘images/firstImage.jpg’ in the jQuery Dialog. Now, I am trying to change it to ‘images/secondImage.jpg’ through jQuery Dialog parameter.
<link href="jquery/jquery-ui.css" rel="stylesheet" />
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function () {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
show: "blind",
hide: "blind",
width: "50%",
height: "auto",
resizable: false,
position: 'center',
overflow: "hidden",
});
});
function OpenGallary(photoSrc) {
$("#dialog").dialog("open").data("param", photoSrc);
}
</script>
<body>
<a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
<div id="dialog" title="Photo Gallary">
<div id="aa" style="width: 800px;">
hello this is my world.
</div>
<p>
<img src="images/firstImage.jpg" />
</p>
</div>
</body>
Your function OpenGallary (I think you mean Gallery, but I digress) is just setting the data attribute on the dialog div, which is not going to affect the image tag.
The OpenGallary function can be changed to something like:
function OpenGallary(photoSrc) {
// Change the src attribute directly on the img in the dialog:
$("#dialog img").attr("src", photoSrc);
// Now that the dialog html is updated, open the dialog:
$("#dialog").dialog("open");
}
Depending on what you're trying to do, you may want to select the img directly with an id on the tag - the selector used above is just for working with the existing html.

Different style of opening popup window

I display a popup window in a simple format. I want to apply different format of opening popup a window. How can I apply format or style so that it looks very good when pop window opens? The following is my source code:
<div onMouseOver="show('healing')" onMouseOut="hide('healing')">
<div id="healing" class="bgdiv" >
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" >Welcome Sir.</div>
</div>
</div>
javascript code
<script language="JavaScript">
function show(id)
{
document.getElementById(id).style.visibility = "visible";
}
</script>
You should take a look at JQuery (http://jquery.com/). JQuery is a Javascript framework and you can use effects for displaying elements like fade, slide, show/hide.
All you have to do is change your code a little bit (Jquery solution):
<div id="showhealing">
<div id="healing" class="bgdiv">
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" > Welcome Sir.</div>
</div>
</div>
<script>
$('#showhealing').hover(
function() { $('#healing').show(500) }, function() { $('#healing').hide(500) }
);
</script>
When you use JQuery UI, too (it's a extension for JQuery) you have much more effects. (Take a look here: http://jqueryui.com/demos/effect/).
To use the Effects of JQuery UI you need to update your script like this:
<script>
$('#showhealing').hover(
function() { $('#healing').show("explode", {}, 500); }, function() { $('#healing').hide("explode", {}, 500) }
);;
</script>

jQuery UI dialog boxes won't close

I am using the following code to open a dialog box:
<li>
<input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>
<div id="dialog">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 525,
resizable: false,
width: 600,
dialogClass: 'timer'
});
});
//]]>
</script>
</div>
In my .js file:
function showPreview(action, id) {
$.get("/Manage/Account/" + action + "/" + id, function (data) {
$("#dialog").html(data);
$('#dialog').dialog('open');
$('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
$("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
});
I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?
This is in the dialogbox-view:
<div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div>
I don't see any dialog closing anywhere, you can close your dialog with this function:
$('#dialog').dialog('close');
More about it: jQueryUI dialog
Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.
Your dialog element IDs need to be unique, or jQuery won't find the right one.

Categories

Resources