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.
Related
I have 2 .NET web pages that have the same popup box in both pages The JavaScript is exactly the same in both pages, I copied the code from the page that works to the other page and it doesn't work. the one that doesn't work gives me the error message:
Scripts/jquery-3.3.1.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
I have tried putting the code at the end of the page, no difference. Best I can tell jquery is being load into the page in the header when I check the page with the IE developer. Hope someone can point me in the right direction.
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href ="~/Styles/Default.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script>
$(document).ready(function() {
$("#dd2875").dialog({
buttons: {
"Cancel": function() {
$("#dd2875").dialog('close');
}
},
dialogClass: 'myTitleClass',
draggable: false,
width: 800,
height: 400,
hide: 2000,
show: 'slidedown',
hide: 'explode',
autoOpen: false
});
$("#btnNewAccount").click(function(evt) {
evt.preventDefault();
$("#dd2875").dialog('open');
});
});
</script>
The DOM probably does not contain an element with the ID dd2875,
Verify that #dd2875 actually exists on the page at the point that you are calling dialog()
I entered the code you sent and this is what I got back in the console.
jQuery.Deferred exception: Object doesn't support property or method dialog' TypeError: Object doesn't support property or method 'dialog'
at Anonymous function (http://localhost:60086/Add_CAC_ID.aspx:14:13)
at mightThrow (http://localhost:60086/Scripts/jquery-3.3.1.js:3534:10)
at Anonymous function (http://localhost:60086/Scripts/jquery-3.3.1.js:3602:12) undefined
I figured it out, had to go back and rewrite the page one section at a time to do it. The problem was a conflict between the JavaScript and the asp validation controls. When I put the control on the page it caused the error with the dialog. I found two solutions to the conflict. I could add the first line in the page load or the second line in the JavaScript either one worked. Thanks for the help in getting me pointed in the right direction.
Unobtrusivevalidaionmode = Unobtrusivevalidaionmode .none
or
$j = $.noConflict;
I would like to create a popup window in the middle of the web browser when the mouse pointer enters and leaves the elements. The pop up window shows an image that I provide.
How should I implement this in Jquery? Or is there any good plugin to do it?
Thanks
Try jQuery UI dialog box.
DEMO
Bind the event handler to a mouseout event. See the link for more info:
http://api.jquery.com/mouseout/
One way to approach the problem is to create a div(which will hold your popup window) and use the hide and show jquery effects along with it.
That's quite easy, you can do it like that:
$('.hovered_element').mouseenter(function() {
// you can use some plugin here, or just a simple .show()
$('.popup_element').show();
//if you want popup to fade in
//$('.popup_element').fadein(600);
});
$('.hovered_element').mouseleave(function() {
// again: any js plugin method, or just .hide()
$('.popup_element').hide();
//if you want popup to fade out
//$('.popup_element').fadeout(600);
});
Of course you need to style your .popup_element so it shows up in the center, or anywhere you like.
Since you are new to coding, I suggest using the jQuery team's jQueryUI library -- which includes a .dialog() capability (they call it a "widget"). Here's how it works:
(1) Include both jQuery and the jQueryUI libraries in your <head></head> tags. Note that you must also include an appropriate CSS theme library for jQueryUI (or the dialogs will be invisible):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
(2) Create an empty div in your HTML, and initialize it as a dialog:
HTML:
<div id="myDlg"></div>
jquery:
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto'
});
(3) Then, when you are ready to display the dialog, insert new data into the myDlg div just before opening the dialog:
$('#myDlg').html('<div>This will display in the dialog</div>');
$('#myDlg').dialog('open');
Note that you can put any HTML in the html() method, including an image.
The above code allows you to change the content of the dialog and use the re-same dialog DIV each time.
Here's what the working example would look like:
jsFiddle Demo
HTML:
<div id="myDlg"></div>
<div id="questiona" class="allques">
<div class="question">What is 2 + 2?</div>
<div class="answer">4</div>
</div>
<div id="questionb" class="allques">
<div class="question">What is the 12th Imam?</div>
<div class="answer">The totally wacky reason why Iran wants a nuclear bomb.</div>
</div>
jQuery:
var que,ans;
$('#myDlg').dialog({
autoOpen:false,
modal:true,
width: 500,
height: 'auto',
buttons: {
"See Answer": function(){
$('#myDlg').html(ans);
$('.ui-dialog-buttonset').next('button').hide();
},
"Close": function(){
$('#myDlg').html('').dialog('close');
}
}
});
$('.allques').hover(
function(){
//hover-IN
que = $(this).find('.question').html();
ans = $(this).find('.answer').html();
$('#myDlg').html(que).dialog('open');
},
function(){
//hover-OUT -- do nothing
}
);
Resources:
How to use Plugins for PopUp
http://jqueryui.com/dialog/
http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/
jQuery UI Dialog Box - does not open after being closed
Dynamically changing jQueryUI dialog buttons
jQuery UI dialog - problem with event on close
In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/
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>
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