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 the Jquery UI Dialog box to make a popup for images on my page.
Currently for each image, I'm using the following:
<script type="text/javascript">
$("#myImageInfo").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$("#MyImageLink")
.click(function () {
$("#MyImageInfo").dialog("open");
});
</script>
My HTML,
<a id="MyImageLink" href="#">
<img src="blahblahblah.jpg"></a>
<div id="MyImage" title="Basic modal dialog">
<p><strong>Title Yah</strong></p>
<p>
<strong>Phone</strong>: ****<br />
<strong>Email</strong>:
</a>
</div>
My issue is I have about 10 of the pictures set up the same, each with thier uniqu ID's how can I use this script more efficiently so I only have to include it once? Thanks.
Id must be unique.But you can apply the same class name to more than one element.
You can give same class name to all those elements.and then use
$(".className").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
Okay You must not put same id multiple elems at same page, ids must have to be unique either postfix some counter values like MyImageLink1, MyImageLink2, MyImageLink3 or better option is to change id to class this way:
<a class="MyImageLink" href="#"><img src="blahblahblah.jpg"></a>
<div class="MyImage" title="Basic modal dialog">
.......
</div>
Script:
<script type="text/javascript">
function dialg(e){
e.preventDefault();
$(".myImageInfo").dialog({
autoOpen: false,
draggable: false,
position: "center",
width: "300px",
modal: true,
title: "Image Title",
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
}
$(function(){
$(".MyImageLink").on('click', dialg);
});
</script>
I've used nyroModal and Fancybox as tools for websites but in this instance I must use jQuery UI's dialog tool. I need this dialog to load a page. I believe I've done this before but everything I come across seems more complex than it should be. Can't I use something like...
$( "#dialog" ).dialog({
autoOpen: false,
modal: true,
url: http://www.google.com
});
<button id="dialog">Open Dialog</button>
and have the page open in a simple iframe? Thanks in advance.
I did find that I have this code,
<script>
//$.fx.speeds._default = 500;
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function () {$(this).load('nom-1-dialog-add-vessels.html');},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels' });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div id="dialog"></div><button id="opener">Open Dialog</button>
but it's not loading the actual page.
url is not one of the options in jQuery UI dialog.
One of the things that has worked for me is to have an iframe inside the div that is your dialog, and set its url property on the open event.
Like:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<button id="dialogBtn">Open Dialog</button>
And JS:
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
open: function(ev, ui){
$('#myIframe').attr('src','http://www.jQuery.com');
}
});
$('#dialogBtn').click(function(){
$('#dialog').dialog('open');
});
You would find that you need some styling on the iframe to get it look nice, though.
#myIframe{
height: 580px;
}
EDIT: Working version - http://jsbin.com/uruyob/1/edit
Based on Floyd Pink and your code, I have consolidated an code. Check here http://jsfiddle.net/Nz9Q8/
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'http://www.w3schools.com';
},
height: 'auto',
width: 'auto',
resizable: true,
title: 'Vessels'
});
$("#opener").click(function () {
$("#dialog").dialog("open");
return false;
});
});
I tried a similar thing. Check this http://jsfiddle.net/P2Q5U/
<div id="dialogContent" title="Basic dialog">
<iframe src="http://www.w3schools.com"></iframe>
</div>
<button id="dialog">Open Dialog</button>
$(function () {
$("#dialogContent").dialog({
autoOpen: false,
modal: true
});
$('#dialog').click(function () {
$("#dialogContent").dialog( "open" );
});
});
I have a jQuery dialog with a nested form inside of it. The form contains an input box and a submit button. When the dialog pops up I want the user to only be able to fill it out, and nothing else on the page. My css for that is done here:
.ui-widget-overlay
{
height: 1339px !important;
width: 595px !important;
}
This works in allowing the user not to do anything else on the page, but the problem is that the input field is also disabled.
Any suggestions?
Edit: Here is how I make the dialog
function dialog(left, top) {
//Creates a new dialog
$('#dialog').dialog({
position: [left, top],
height: 90,
width: 200,
resizable: false,
modal: true,
title: '<span class="ui-icon ui-icon-home"></span> Enter Info',
});
}
Here is the form I use for the dialog:
<!-- Store Location Dialog -->
<div id = "dialog">
<form id = "info" method = "post" action = "Default.aspx" \>
<input type = "text" id = "changeDialogText" name = "changeLocation" /> <!-- THIS IS DISABLED -->
<input type = "button" id = "changeDialogSubmit" value = "" onclick = "function()"/>
</form>
</div>
I figured out the issue. I had the z-index of my form lower then the z-index of the page. This caused issues with the dialog because it was unsure if the input was in the dialog or on page
The above does not provide a literal answer that is correct. z-Index auto does not cut it.
title: 'Quantity 1',
autoOpen: false,
show: 'slide',
hide: 'explode',
resizable: true,
stack: true,
height: "200",
width: "790",
zIndex: "auto",
modal: true