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/
Here is some of the code that I have.
function addLoad(){
//$("#dialog-modal")load('truckload.html').dialog({modal:true});
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
$(this).load('truckload.html');
//$("#dialog-modal").load(url).dialog({modal:true});
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
<div id="dialog-modal" title="Add Information to calendar" style="display: none;"></div>
AddLoad is called by a button and truckload.html is a file included in my google script project. All of the commented out lines are different ways I have attempted to make this work.
My goal is that when addLoad is called that a dialog opens and displays the truckload page information. What am I doing wrong? Is this even possible?
Any help would be greatly appreciated!
Thanks,
Loren
build the popup first, then call the popup by a link or button. see this fiddle:
Be sure you have the right jquery resources:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
Code JS
var webPage = "http://www.cbc.ca";
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + webPage + '" width="80%" [enter link description here][2]height="80%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 650,
width: 600,
title: "Add Information to calendar"
});
$("#popup").on("click", function(){
$dialog.dialog('open');
});
If you are attempting to call this from an HtmlService, it would look something like this:
Code.gs file
// render initial html page
function doGet(event){
return HtmlService.createTemplateFromFile('index').evaluate();
}
// call from click on page (or if using UiApp)
function addLoad(){
try{
// get the html content from the truckload.html page and return it to the showModal function
return HtmlService.createHtmlOutputFromFile('truckload').getContent();
}catch(err){
Logger.log(err.lineNumber + ' - ' + err);
}
}
index.html file
<div id='popup'>
Click Me
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#popup").click(function(){
// call to script runner
google.script.run.withSuccessHandler(showModal).addLoad();
});
});
function showModal(htmlContent){
var $dialog = $('<div style="border:2px solid black;background-color:#B6B6B4;"></div>')
.html(htmlContent)
.dialog({
autoOpen: false,
modal: true,
height: 350,
width: 600,
title: "truckload"
});
$dialog.dialog('open');
}
</script>
Finally the truckload.html file
(whatever html you are looking to render)
here's a crude example:
Truckload modal
I have my Modal Div as:
<div id="dialog-modal" title="Open File">
<img alt="progress" src="images/ajax-loader.gif"/>
</div>
On Click of Button I am able to see Modal and then see the progress icon.
<script type="text/javascript">
$(function () {
$('#button1').click(function () {
$('#dialog-modal').dialog("open");
});
$("#dialog-modal").dialog({
autoOpen: false,
height: 140,
modal: true,
});
});
</script>
But How can I do a operation or function on Load of Modal Window??
Let's say , I want to download a file from server , when the modal window appears (..showing the progress icon)
You can hook into the dialogopen function:
$( "#dialog-modal" ).on( "dialogopen", function( event, ui ) {
console.log('Wayhay!!');
window.open("http://www.google.com");
} );
See jsFiddle:
http://jsfiddle.net/3Y63f/1/
Further info here:
http://api.jqueryui.com/dialog/#event-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 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