I have a button that when clicked loads an external page (same domain) in to a div and displays that div as a jQuery UI dialog box.
<div id="Dialog_box"></div>
<script type="text/javascript">
$(function() {
$("#Dialog_box").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 400,
title: "Dialog",
close: function(event, ui) {
$("#Dialog_box").html(""); // Ensure the page is no longer loaded
}
});
});
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php").dialog('open');
});
}
</script>
<button onclick="openDialog();">Open Dialog</button>
The first time the button is clicked it opens fine. After closing it then it will no longer come back up.
First I verified that it was in fact being closed upon hitting the 'X'
$("#Dialog_box").dialog({
...
close: function(event, ui) {
alert("Closed");
}
});
And the alert was being shown. I then tried using my normal code but did not load in the page
$("#Dialog_box").dialog('open');
At this point, the dialog would open and close properly without any problems. Although I don't believe it should matter, I even tried separating out the load and dialog commands
function openDialog() {
$(document).ready(function() {
$("#Dialog_box").load("dialog.php");
$("#Dialog_box").dialog('open');
});
}
Once again, the box would display the first time but would not reappear after that.
My external file essentially looks like this
<link type="text/css" href="path/to/style.css" rel="stylesheet" />
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Submit_button").click(function() {
// Do stuff with form data
// POST data without changing page
});
});
</script>
<form action=''>
// Input fields
<input type="button" id="Submit_button" />
</form>
Just for clarification, the problem occurs whether or not I post my form.
Why won't the dialog box re-open after I've loaded (and to my understanding, unloaded) a page in to it?
Remove the line to embed jquery.js from the external file.
This line will load jQuery again, overwrite the existing jQuery, what will destroy the already instantiated dialog-object, because it's registered in the overwritten jQuery-instance.
To clarify: you don't need to embed jquery and jqueryui again, because if you use $.load() the returned fragment will be a part of the DOM of the requesting document(they already exist there).
$(function() {
$( "#btnCallCompany" ).button().click(function() {
$( "#divOpenConversation" ).dialog({
autoOpen: true,
height: 500,
width: 650,
modal: true
});
$.get("/Conversation.aspx",function(data){
$( "#divOpenConversation" ).html(data);
});
});
});//end func
Related
I want to use a simple js to deactivate and activate the overflow of the html "body" like this:
$('.my_link').click(function(){
$('body').css('overflow-y', 'hidden');
});
$('.featherlight_background & featherlight_close_button').click(function(){
$('body').css('overflow-y', 'scroll');
});
But I dont finde out the css name of the "featherlight_background" and the "featherlight_close_button" - ... ".featherlight:last-of-type" and ".featherlight-close-icon" dont work ;(.
That´s the script I work with: featherlight
Can anybody help me?
I would suggest solving it using the configuration options of Featherlight instead of adding jQuery events to its elements.
Looking at the Configuration section of Featherlights documentation it seems you can define a function to be called when the lightbox is opened or closed, see beforeOpen, afterOpen, beforeClose and afterClose.
You can either define those functions using a data attribute on the element, e.g. data-featherlight-before-open, by overriding the global defaults, e.g. $.featherlight.defaults. beforeOpen, or by adding them as a parameter to your featherlight call, e.g. $.featherlight('#element', { beforeClose: ... });
I've added a small example that uses the global configuration method to change the text Lightbox is closed into Lightbox is open when opening the lightbox.
$(function() {
$('#btn').featherlight('#lightbox');
$.featherlight.defaults.beforeOpen = setLightboxOpen;
$.featherlight.defaults.afterClose = setLightboxClosed;
});
function setLightboxOpen() {
$('#text').text('Lightbox is open');
}
function setLightboxClosed() {
$('#text').text('Lightbox is closed');
}
.hidden {
display: none;
}
<link href="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.rawgit.com/noelboss/featherlight/master/release/featherlight.min.js"></script>
<button id="btn">Open lightbox</button>
<p id="text">Lightbox is closed</p>
<div id="lightbox" class="hidden">
Lightbox contents
</div>
I've gotten this to work on all my other pages, and I have copied the code from there, (other developers developed this) and it has worked no problem. I switched to a newer jQuery (1.10) and now the close is not closing the prompt.
function DialogPrompt(url, height, width, onload_method, complete_method) {
$("<div id=\"prompt\"><img src='/js/loadingAnimation.gif' /></div>")
.dialog({
modal: true, height: height, width: width,
buttons: {
"Close": function () {
// Close the dialog
$(this).dialog("close").remove();
}
}
});
}
Before the close button was pressed:
After the close button was pressed:
as you can see that the details of the prompt were closed but the prompt still remains
So before I get flagged for not asking a question:
How do I fix this? Is there something wrong with my syntax? is there something wrong with the close for the new jQuery?
Also, these are my updated jQuery files:
<link rel="Stylesheet" href="/css/ui/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
all updated from the .min files from their website
new error that I got in the console after changing the URL of the prompt being passed in..
"Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
this is baffling.. its the only page that this doesnt work on...
I need to have a jQuery UI dialog box that pops up and shows a basic form, which also includes an external javascript file.
The modal pops up, but none of the script contents load. Not sure why. If I go directly to the page the modal is loading, it works fine.
Modal content:
<link rel="stylesheet" href="http://www.bankrate.com/free-content/css/bankrate-fcc-calculators.css" type="text/css"/>
<input id="mrtgCal" type ="text" value="1,Arial,600" style="display:none" />
<script language="Javascript" src="http://js.bankrate.com/free-calculators/free-simple-mortgage-calculator-widget.js" type="text/javascript"></script>
<script type="text/javascript">mrtgCalcinit();</script>
Modal call:
$(function(){
$('.modal-popup a, .email-button a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #region-content')
.dialog({
autoOpen: false,
width: 600,
draggable: false,
resizable: false,
modal: true,
show: "fade",
hide: "fade",
closeText: 'X'
});
$link.click(function(){
$dialog.dialog('open');
return false;
});
});
});
The scripts are not running because of the way you're calling .load(). The library will not run embedded scripts when you use a selector after the URL. By that I mean the addition of ' #region-content' to the end of the "href" value.
Why? I don't completely know; I suspect it has something to do with the fact that jQuery doesn't know whether the embedded <script> bodies rely on scripts in the <head> (or elsewhere) to work.
As stated before, load wont load the scripts (read the Script Execution section). However it is not necesary to extend the dialog, you can use .delegate(), .on() or even a very to use plugin called liveplugin to manage the dynamic content loaded into the dialog.
The best variant is to write your custom jquery ui widget, extending jquery ui dialog with your functionality.
I have the following javascript that displays a hidden div in a dialog, the hidden div holds a TimyMCE instance. My problem is I can’t type into the TinyMCE text area, it’s locked or something. I think the problem is the dialog needs to fully load before loading TinyMCE, I guess so that TinyMCE is on top of everything.
Can I edit this code so that collorbox has fully loaded before loading TimyMCE inside quictEditPanel?
<script type="text/javascript">
$("#quictEdit").colorbox({
width: "740px",
inline: true,
href: "#quictEditPanel"
});
</script>
$(document).ready(function() {
$('#quictEdit').colorbox({
width:"740px",
inline:true,
href:"#quictEditPanel"
});
});
Your problem is that you call the element ID before the dom load, try this:
<script type="text/javascript">
$(document).ready(function() {
$("#quictEdit").colorbox({
width: "740px",
inline: true,
href: "#quictEditPanel"
});
});
</script>
inside <head> tag i declare a jQuery function as follows (menu animation function) ;
<script type="text/javascript">
$(function() {
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
and inside <body> tag i use javascript function as follows (slideshow function) ;
<script type="text/javascript" src="scripts/slideshow.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
the problem is only slideshow function excuting while loading not menu animation; if i remove the slideshow function, menu animation script is working!
kindly guide me to sort of the problem
Try to wrap your javascript code in $() in the body tag like this. Since this code inline in the markup it will be executed right away before even all the resources on the page are loaded. May its causing a js error on the page. You and check the console log if you find any js error on the page.
$(function(){
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
slideshow.auto=true;
slideshow.speed=10;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
$("#top_menu").MenuBar({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
After lot of days research I got a fix for the conflict with jquery;
I have replace all $$( with dbl( and $( with sgl( in the javascript file (slideshow.js).
then in the html file i have modified first two lines of my code, as follows;
sgl('slideshow').style.display='none';
sgl('wrapper').style.display='block';
Now both (javascript & jquery) working smoothly. Thank you so much #ShankarSangoli - for your effort.