After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?
Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});
I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/
So there's a few pieces to this. First of all, here's the Javascript located in the head of the ASPX page:
<!--//**********************************
// Test modal popup
//********************************** -->
<script type="text/javascript">
//Total out of range dialog
$(function () {
$("#dialog").dialog({
modal: true,
// autoOpen: false,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Then, at the very bottom of he ASPX page (which is rather lengthy...) I have the modal piece:
<div id="dialog" title="ATTENTION">
<table style="width:565px; border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="width:65px; ">
<img src="http://someimage" style="height: 120px; width: 80px" />
</td>
<td style="vertical-align:top">
<p>some text</p>
</td>
</tr>
</table>
</div>
</asp:Content>
Lastly, in the code-behind I have this:
if (!Page.IsPostBack)
{
if (MyServer.Contains("localhost"))
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "dlgOutOfRange",
"$(function() {$('#dialog').dialog('open');});", true);
}
Now, I know this all works, it's been tested. However, this modal is displaying even when it's not supposed to, and when I skip through the code it bypasses the Page.IsPostback so it knows it's not a postback. For instance, I have a dropdown that has a SelectedIndexChange function tied to it. When I change the value in the dropdown, this modal becomes visible. Is there something in the div tag that I'm not doing? I tried adding style="Visible: False;" but that just made the text invisible.
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
modal: true,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Try this..
I'm using jqueryui dialog, I want to hide the X button there at the top.
I tried the code below, but it didn't work.
$( '.ui-dialog-titlebar-close').remove();
My JS:
$(function () {
$("#dialog").dialog({
closeOnEscape: false,
...
});
HTML:
<div id="dialog" title="Confirmation Message" class="dialogboxstart">
<fieldset>
<div class="dialogRow">
<span class="dialogHeading" id="confirmMsg"></span>
</div>
</fieldset>
</div>
Try doing that in the open function of dialog.
JS:
$(function () {
$("#dialog").dialog({
open: function () {
$('.ui-dialog-titlebar-close').remove(); //Remove here.
}
});
});
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/459/
You probably need this
$(".ui-dialog-titlebar-close").hide();
Use the remove in document.ready.
$(document).ready(function(){
$( '.ui-dialog-titlebar-close').remove();
});
Here is the fiddle.
I want to use multiple images to open the same jQuery dialog box. I have noticed that this only works for the first image, is there any way to make the second one work as well without giving it a unique id? There will be 100+ of these images so I don't want to create a new function for each image
$(function() {
$("#dialog").dialog({
autoOpen: false},{ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]});
$("#IMG").on("click", function() {
$("#dialog").dialog("open");
});
});
<div id="dialog" title="Dialog box">Test</div>
<input type="image" id="IMG" src="img/image.gif">
<input type="image" id="IMG" src="img/image.gif">
Specify a class for each image, say "img". Then declare a handler like this:
$(".img").on("click", function() {
$("#dialog").dialog("open");
});
IDs have to be unqiue. Use a class instead:
$(function() {
$("#dialog").dialog({
autoOpen: false},{ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]});
$(".open-img").on("click", function() {
$("#dialog").dialog("open");
});
});
HTML:
<div id="dialog" title="Dialog box">Test</div>
<input type="image" class="open-img" src="img/image.gif">
<input type="image" class="open-img" src="img/image.gif">
I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>