Modal closing when load finishes - javascript

It appears that when the JQuery modal finishes loading it closes. None of the alerts in my script are appearing. Why doesn't it stay open? Any help would be greatly appreciated =)
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function () {
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 600,
width: 800,
modal: true,
buttons: {
Cancel: function () {
alert("Cancel Button")
}
}
});
form = dialog.find("form").on("submit", function (event) {
alert("Submit");
event.preventDefault();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
});
</script>
-
<div id="dialog-form" style="display: none">
<asp:Panel ID="AddReference" runat="server">
<form action=# id="form">
<asp:GridView ...>
<Columns>
...
</Columns>
</asp:GridView>
<input type="submit">
</form>
</asp:Panel>
</div>

I've taken your code and placed it into a JSFiddle and the alerts fire for me.
Have a look at the fiddle to see it working:
Demo
Your issue could be caused by any number of things:
1) An incorrect reference:
Open your browser's developer tools (F12) and click on console. Any JS errors will be listed there. I'm sorry if this is basic but from your example you are linking to jQueryUI but there is no reference to jQuery. You have to have both to work and if jQuery is referenced incorrectly, in the JS console you will see:
$ is undefined.
2) Incompatible Versions:
If it is not a reference error, make sure that you have a stable version of jQuery and jQuery UI. (The latest version of jQuery UI (v1.11.0) requires jQuery 1.6+ for example)
3) A Postback:
If you are using a hyperlink to trigger the dialogue, you need to cancel the dialogue's default action using either:
Prevent Default:
$("#create-user").button().on("click", function (e) {
//somecode
e.preventDefault();
});
or Return False:
$("#create-user").button().on("click", function () {
//somecode
return false;
});
Please note: In the fiddle example I have changed the width and the height of the dialogue so it fits into the output pane.

Related

Can't select elements with jQuery

I want to prevent a link from taking the user to another page.
When I try to select elements with getElementById("id"), it works fine. When I try to select by using $("#id"), however, it doesn't work. To clarify, this works:
https://jsfiddle.net/1nwaptL9/
but this doesn't work: https://jsfiddle.net/7vkepm9e/1/
I realise both of these fiddles do actually work, but when I load the HTML files in Chrome, the one with the jQuery selection doesn't work. Since the source code I've included below works fine in JSFiddle, but not in Chrome, I suspect I've done something wrong, but JSFiddle doesn't process links or something like that. Any help would be appreciated!
Source code that doesn't work:
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="js/jquery-1.11.3.min.js"> </script>
</body>
</html>
<script>
var link=$("#preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
</script>
jQuery creates a jQuery instance, if you want the actual DOM element, you can do the following:
var link = $("#preventlink")[0];
Or, just keep using jQuery to add events:
$("#preventlink")
.click(function (e) {
e.preventDefault();
});
Getting the element from the jQuery instance:
var link = $("#preventlink")[0];
link.addEventListener("click", function(e) {
e.preventDefault()
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
Sticking with just jQuery:
$("#preventlink").click(function(e) {
e.preventDefault()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
See jQuery's doc on the subject
This is because addEventListener is a javascript function. It's not defined for jquery. For jquery you can use bind function. Below is the sample code
$(document).ready(function() {
var link=$("#preventlink");
link.bind('click', function(e){
e.preventDefault();})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
</body>
</html>
You are mixing jQuery with vanilla JS:
$("#id") -- jQuery
document.getElementById("id") -- Vanilla JS
Try to use either one of them.
jQuery:
$("#preventlink").on("click", function(e) {
e.preventDefault()
})
Vanilla JS:
var link=document.getElementById("preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
Here is a more jQuery way of doing what you are looking for
var $link = $("#preventlink");
$link.on("click", function(e) {
e.preventDefault();
alert("link clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>
Try this:
$("#preventlink").on('click', function (e)
{
e.preventDefault ();
});

jQuery UI dialog with asp.net - Object doesn't support property or method 'dialog'

I have an aspx page using a master page that is giving me issues when I try using a jQuery UI dialog.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="/Styles/SiteFramePage.css" rel="stylesheet" type="text/css" media="Screen"/>
<link href="Styles/ArrivalTemplate.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.12.1.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
.DisabledCheckout
{
background-color:Gray;
color:Black;
Width:100%;
font-weight:bold;
}
body.waiting
{
cursor: wait;
}
.no-close .ui-dialog-titlebar-close {
display: none;
}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/SMS_JClient.js" type="text/javascript"></script>
My div for the dialog is as follows:
<div id="ChckDgtDialog" title="Enter Check Digit">
<table>
<tr>
<td id="ChckDgtDialogError"></td>
</tr>
<tr>
<td id="ChckDgtDialogPrompt">Please enter the check digit on the container.</td>
</tr>
<tr>
<td align="center"><input type="text" id="ChckDgtDialogTextBox" size="50" onkeypress="isChckDgtDialogSubmit(event)" /></td>
</tr>
</table>
</div>
I also have a script at the bottom of the page that sets up the div as a dialog.
$("#ChckDgtDialog").dialog({
autoOpen: false,
dialogClass: "no-close",
width: 425,
modal: true,
buttons: {
"Ok": checkDigitValidate,
Cancel: function () {
var dialogbox = $('#ChckDgtDialog');
$(dialogbox).dialog("close");
}
},
open: function () {
stopTimer();
}
} );
There is a longer script tag within Content1 that on $(window).load() will get data and build a table with buttons. Within that script block, there is the following statement which should open the dialog box:
$(":button").click(function () {
Option = $(this).text();
if (Option == "Check In") {
$("#ChckDgtDialog").dialog("open");
}
if (Option == "Check Out") {
$("#ChckDgtDialog").dialog("open");
}});
(There is other logic that gives the if statements more of a purpose, trying to only show what is related to the issue)
However, when a button is clicked, we receive the error: Object doesn't support property or method 'dialog'.
What I find weird is that when we set up all of the properties for the dialog in the script at the bottom of the page, there is no problem. I can tell this portion is working because the div isn't seen on the page and if I remove that it is. It seems like some issue with scope but I've tried moving the part where the dialog properties are set up within $(window).load() because in theory, shouldn't the jquery ui script be loaded at that point, but then I get the error on that right away before I even get to trying to open the dialog.
Any ideas on why on the button click we don't have dialog available to us? I'm new to jquery and I'm wondering if there is something with master page or asp.net in general that could be messing with something?
I think, if you place dialog initialization code inside the page onload function, that will fix the issue.

jQueryUI dialog doesn't look right (missing styling?)

I have IE 11 and I am trying to open a dialog box with the click of a button but the dialog box which is opening is not what I want. It doesn't have a close icon and the layout is also very poor.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="//malsup.github.com/jquery.form.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
<div class="dialog">
<p style="white-space: pre-wrap"><%=solution%></p>
</div>
<button class="opener">Open Dialog</button>
</td>
I have added pre-wrap everywhere but the text seems to come in a single line. The text is properly formatted in the database.
JQuery code :
$('.opener').each(function() {
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
});
Ah Ha... I re-read your question and I think I understand the problem you are seeing.
jQuery UI dialogs require (1) the jQuery UI css reference, AS WELL AS (2) the jQuery UI code, AS WELL AS (3) plain ol' jQuery.
Equally important, you need to match the versions. When the versions do not match (especially when jQUI and the css for jQUI are for different versions), buttons will be out of alignment, borders will be missing, the whole appearance is whacked. You have version-itis (note: -itis is Latin suffix for pain).
Suggestion:
Remove all references to jQuery/jQuery UI in your code and add the following lines inside the <head> tags of your page:
<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>
This will give you a version of jQuery / jQueryUI / css that are known to work together. If it works, you can even stick with it.
Reference:
Matching jQuery and jQuery-UI versions
It dosen't have a close icon and the layout is also very poor
I've just test your example, it's worked perfectly in IE 11.
HTML:
<div class="dialog">
<p style="white-space: pre-wrap">123123123</p>
</div>
<button class="opener">Open Dialog</button>
JS:
$('.opener').each(function(){
var dialog = $(this).prev('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$(this).click(function () {
dialog.dialog("open");
});
});
Here is a code that should work:
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
<body>
<table>
<tr>
<td class="tdx" bgcolor="#CCCCCC" id="sol" style="background-color:white;border-: ;style:ridge;white-space: pre-wrap">
<div id="dialog" title="Basic dialog">
<%=solution%>
</div>
<button id="opener">Open Dialog</button>
</td>
</tr>
</table>
http://fiddle.jshell.net/0n4exLq8/
as for the formatting problem, it looks like you have linebreaks in your DB which html will not be able to render. You will have to format the string on the server side (replace \n with <br />) or better yet convert it to a <ol>
There is a simpler way to work with jQueryUI dialogs.
You only need one dialog, and just re-use it.
First, it is important to understand how a jQUI dialog works. You "assign" an element (a div) to the dialog when you initialize it:
$('#msg').dialog();
Thereafter, whenever you call the dialog's open method
$('#msg').dialog('open');
the dialog is displayed with the contents of that div.
To change the contents of the dialog, just change the contents of that div:
$('#msg').html('<p>Here is some totally new information</p>');
$('#msg').dialog('open');
In your program, all you need to do when a button is pressed is to grab the data (either via ajax, or from the cell next door, or whereever) and stick it into the dialog's div, then open the dialog.
When you close the dialog, it is a good idea to clear the div as well:
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
close: {
effect: "explode",
duration: 1000,
function(){
$('#msg').html('');
}
}
});
jsFiddle Demo

jquery pop-up working in jsFiddle but not on my site

I found this jsFiddle with a pop-up box, and I'm trying to implement in on my site.
HTML:
<div id="dialog">
<p>Tell me a story</p>
<textarea id="name"></textarea>
</div>
<input type="button" id="open" value="Open Dialog" />
Javascript:
$("#dialog").dialog({
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#open").click(function () {
$("#dialog").dialog("open");
});
Although it works on jsfiddle, on my site the div appears inside the page and not as a pop-up (just like I wouldn't have Jquery-UI).
My site has Jquery-2.0.2 and jQuery-ui-1.0.3, which according to jsfiddle it should work.
Any tips of what I might be missing?
Try to add this script and css in your head tag
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
It will link jQuery js file, jQuery UI API js file, and jQuery UI CSS file.
You can refer demo here and documentation here
The fiddle is configured to wrap the code in the onload event. So if you run this on your site, you need to manually add the DOM ready wrapper (or place the code right before the </body>). Without this, your code runs before the elements are rendered, and subsequently the dialog is not transformed into a dialog by jQuery.
$(function(){
$("#dialog").dialog({
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#open").click(function () {
$("#dialog").dialog("open");
});
});

Dialog box conflict with an other script

I have a problem to integrate a Jquery UI dialog box in an other script. What i want to do is to detect user inactivity and after a certain inactivity time showed a dialog box to ask to continue or close session. My code :
<link href="css/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<div id="dialog-confirm" title="Session expirée">
<p><span style="float:left; margin:0 0px 0px 0;"></span>Session expire, continue ?</p>
</div>
<script>
var theTime;
document.onmousemove=stockTime;
function stockTime() {
currentTime=new Date();
theTime=currentTime.getTime();
}
function verifTime() {
currentTime=new Date();
var timeNow=currentTime.getTime();
if (timeNow-theTime>10000) {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:190,
modal: true,
buttons: {
"Continue": function() {
$( this ).dialog( "close" );
},
"End": function() {
$( this ).dialog( "close" );
}
}
});
}
}
window.setInterval("verifTime()",2500);
</script>
My console send me that message : " TypeError: $(...).dialog is not a function ". I have no idea of where is the problem ...
Thanks for your help, and sorry for my bad english !
Check if all files are loaded in proper order
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Your remaining code is working fine.
Tested in JSBIN
where u added jquery? If u haven't added it, added it above it your script, and if you added it, then I think you added it below your script, move your script after jquery. and after doing this, load your script after dom loads as
$(function(){
//Put your Script here
})

Categories

Resources