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...
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 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>
im having a strange problem. i just did a fresh installation of Opencart on my server and for some reason none of the jquery functions work.. sliders, popups and even the add to cart button or even a simple alert box dont work (i created a button with the ID test)
$( "#test" ).click(function() {
alert( "clicked" );
});
Below is how the theme files are loaded
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="catalog/view/theme/theme2/js/bootstrap.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.formstyler.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.carouFredSel-6.2.0-packed.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.touchSwipe.min.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.cookie.js"></script>
<script src="catalog/view/theme/theme2/js/jquery.minicolors.js"></script>
<script type="text/javascript" src="catalog/view/javascript/common.js"></script>
<script src="catalog/view/theme/theme2/js/script.js"></script>
checked all the files and they are place correctly. no missing files. All are freshly uploaded.
i even changed to the default theme which hasnt been touched, but still same. when i even click on add to cart or any other button it doesnt work
i tried accessing the site with and without www , still it doesnt work
the main problem is it does not show any error though the console or firebug which makes it hard to debug. can someone tell me what might be causing this?
Button #test does not exist on page load, so .click() function does not recognize it.
Try using .on():
$(document).on('click', '#test', function() {
alert("clicked");
});
Can't comment yet on SO, but #LiveEn, I tested your link and it works on Chrome x64 v39, Win. 8.1.
Onclick Add-to-cart: Size: * Size required!
Onclick Size select: Dropwsdown menu
I'm using bootbox to show dialog.
If I use bootbox.confirm, bootbox.alert or bootbox.prompt, when pressing escape key or clicking outside the dialog, the dialog closed as expected
but when using bootbox.dialog, when I click outside the dialog or pressing escape key, the dialog doesn't close, how to make it behave as other dialog do?
var box = bootbox.dialog({
show: false,
backdrop: true,
animate: false,
title: 'Bla',
message: 'bla bla bla',
buttons: {
cancel: {
label: 'Cancel',
className: 'btn-warning'
},
save: {
label: 'Parse',
className: 'btn-success',
callback: function () {
// handling with ajax
return false;
}
}
}
});
box.modal('show');
This should do it. Please note this has only been tested on v3. using bootstrap 2.3.2
$(document).on('click', '.modal-backdrop', function (event) {
bootbox.hideAll()
});
Add an onEscape callback function, which may have an empty body.
See docs and example.
Basic code:
bootbox.dialog({
onEscape: function() {},
// ...
});
To be honest I've never really used modal - it came from a PR a long, long time ago but I've never been convinced of its use case. No good to you now but the method is actually commented as being deprecated in v3.0.0 and will probably actually be removed in future versions - it just doesn't really fit (to me) what Bootbox was created for and as other methods have been tweaked, improved and tested it's sat there somewhat neglected.
But you can do something like this
$(document).keyup(function(e) {
if (e.keyCode == 27) {box.modal("hide");} // esc
});
For those looking to close a single bootbox modal when you have multiple modals open I have found the following to work without breaking the others:
dialog.find(".bootbox-close-button").trigger("click");
In version 3, with dialog, backdrop being true only works when onEscape is true as well - so you just need to set both to true, e.g.
bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
I tried other answers here and they didn't work for me. I'm not sure if it had to do with the specific version of bootbox I was using or some other reason, but I just rolled my own solution to:
only close the last modal that was opened (i.e. for nested modals, don't close all of them)
selectively choose which modals will close on outside click and which will not
work on all of the modal flavors (dialog, alert, confirm etc)
not require me to change libraries or library versions
by doing the following:
function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
d[0].addEventListener('click', function(e) {
if(e.target == d[0])
$(d).modal('hide');
e.stopImmediatePropagation();
return false;
});
}
which is used like so:
var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);
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