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/
I am newbie to JS/Html world and trying to load a html page in popup/dialog window on clicking some text in html but loaded page is bigger than poppup window size so there is scroll-bar.
Javascript/Jquery code
$(document).ready(function(){
$('.showModal2').click(function(){
$('#popup2').dialog({width: 450,height: 450});
});
});
$(function(){
$("#data").load("frontend/js/page.html");
});
Html code
<div id="popup2" title="Results" style="display:none;">
<div id="data" style="min-width: 200; height: 400; max-width: 400; margin: 0 auto"></div>
</div>
<font color="blue">Link</font>
Is there any way to fit page within popup/dialog window size (here l=450 & b=450) completely without using scroll-bar like cropping page?
Try this.
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: "auto"
});
$(".dialogify").on("click", function(e) {
e.preventDefault();
$("#dialog").html("");
$("#dialog").dialog("option", "position", {
my: "center",
at: "center",
of: window
});
if ($("#dialog").dialog("isOpen") == false) {
$("#dialog").dialog("open");
}
});
});
Try this below code, it works for me:
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
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>
I am working on mvc project where jquery is heavily used. In one of the views there us accordion control with multiple (three) views inside.
The jquery popup works fine in the first panel, but once I close that panel, the popup doesn't want to work again.
I have no idea what can be, although I used http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ and http://jsfiddle.net/DSNt5 as guides.
Please find the code below.
Markup:
<div>
#Html.Hidden("Id", Model.Report.Id)
<div id="accordion">
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="editor-label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="editor-field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed" style="clear:both; float:left; margin-left:440px;">
Remove selection
<button id="opener">Open Dialog</button>
<h2 class="demoHeaders">Dialog</h2>
<p><span class="ui-icon ui-icon-newwin"></span>Open Dialog</p>
</div>
</div>
}
</div>
<p style="text-align: right">
<input type="submit" value="Generate Report" />
</p>
</div>
JS:
<script type="text/javascript">
$(document).ready(function () {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function () {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
<script type="text/javascript">
$(function() {
$( "#dialog2" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#opener').click(openDialog);
})
var openDialog = function(){
$('#dialog2').dialog('option', 'buttons',{
"Cancel":function(){
$('#dialog2').dialog('close');
}
});
$('#dialog2').dialog('open');
</script>
I have the buttons from both samples there, and both of them are doing the same thing.
Every advice will be greatly appreciated.
Thanks in advance, Laziale
UPDATE:
<script type="text/javascript">
$(document).ready(function () {
{
$("#dialog2").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#opener').click(openDialog);
}
});
</script>
<script type="text/javascript">
var openDialog = function(){
$('#dialog2').dialog('open');
$('#dialog2').dialog('option', 'buttons',{
"Cancel":function(){
$('#dialog2').dialog('close');
}
});
$('#dialog2').dialog('open');
</script>
You should only initialize your dialog once. You are reinitializing it every time you click.
Initialize it on document ready and then in your click handler just call
$('#dialog2').dialog('open');
EDIT:
You still have dialog initialization happening in your openDialog function. Try this:
<script type="text/javascript">
$(document).ready(function () {
{
$("#dialog2").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
buttons: {"Cancel": function(){
$('#dialog2').dialog('close');
}
});
$('#opener').click(function(){
$('#dialog2').dialog('open');
});
}
});
</script>
I have a jQuery Modal dialog with an iframe in it, the iframe includes a form. When a user submits the form, I would like to close down the modal dialog.
How can I do that?
jquery modal script on index.php:
<script type="text/javascript">
function showRegDialog(url) {
$(function() {
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" scrolling="no" frameborder="0" class="externalSite" src="' + url + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'Choose your location',
autoOpen: true,
width: 700,
height: 700,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(700 - horizontalPadding).height(700 - verticalPadding);
});
}
</script>
link on index.php to call showRegDialog modal:
Register now
This is the content of the register.php
<html>
<body>
<form action="" method="POST">
<input type="text">
<input type="submit">
</form>
</body>
</html>
Call javascript function in parent window like this:
parent.yourJsFunction();
put it in "onsubmit" in your form.
You might be looking for close
Give your form an id.
$("#formID").submit(function(){
parent.closeModal();
});
// function for closing modal window (in parent page)
function closeModal() {
$("#externalSite").dialog("close");
}