my Jquery dialog box is not hidden. when the page is loaded it is automatically called and displayed while I set its property to autopen to false. I set a button to click event to open the dialog box. but in no vain
my code for Jquery is here
$(document).ready(function () {
$("#dialog").dialog({
buttons: [{ text: "OK", click: function () { $(this).dialog("close") } }],
modal: true,
autoOpen: false
});
$('#btnpopup').click(function () {
$('#dialog').dialog("open");
});
My code for HTML
<div >
<asp:Button ID="btnpopup" runat="server" Text="Add Instruction" />
</div>
<div id="dialog">
<table>
<tr>
<td>Title</td>
<td>
<asp:TextBox ID="titlefield" runat="server"></asp:TextBox>
</td>
<td>Instruction Category</td>
<td>
<select id="category"></select>
</td>
</tr>
<tr>
<FTB:FreeTextBox ID="FreeTextBox1" runat="server"></FTB:FreeTextBox>
</tr>
</table>
</div>
Included Libraries
e<script src="Scripts/jquery-ui-1.12.1.js" ></script>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<link href="Content/jquery.layout-1.4.3.css" rel="stylesheet" />
<link href="Content/jquery.ui.layout.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>nter code here
From your code it seems you loading jquery ui library twice, so it conflicted. Just use it only once after your jquery library has been load. Please see below reference.
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<link href="Content/jquery.layout-1.4.3.css" rel="stylesheet" />
<link href="Content/jquery.ui.layout.css" rel="stylesheet" />
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-ui-1.12.1.js"></script>
It seems you forgot to put a last curly bracket and a bracket })
it works on mine
screenshot
$(document).ready(function () {
$("#dialog").dialog({
buttons: [{
text: "OK",
click: function () {
$(this).dialog("close")
}
}],
modal: true,
autoOpen: false
});
$('#btnpopup').click(function () {
$('#dialog').dialog("open");
});
})
Codepen
Related
HTML:
<button type="button" class="btn btn-success" style="margin-bottom:14px" id="btnAdd" onclick="modaladdedit('URLToMyController')"><i class="fa fa-plus"> Add New</i></button>
HEAD Tag:
<link rel="stylesheet" href="/Content/themes/base/jquery-ui.min.css" />
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link rel="stylesheet" href="/Content/bootstrap.min.css">
<link rel="stylesheet" href="/Content/font-awesome.min.css">
<link rel="stylesheet" href="/Content/ionicons.min.css">
<link rel="stylesheet" href="/admin-lte/css/AdminLTE.min.css">
<link rel="stylesheet" href="/admin-lte/css/skins/skin-black-light.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link href="/Content/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="/Content/datatablefooteredit.css" rel="stylesheet"/>
<script src="/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="/Scripts/jquery.dataTables.min.js"></script>
<script src="/Scripts/dataTables.bootstrap.min.js"></script>
After </body>:
<script src="/Scripts/jquery.slimscroll.min.js"></script>
<script src="/Scripts/fastclick.js"></script>
<script src="/admin-lte/js/adminlte.min.js"></script>
<script src="/admin-lte/js/demo.js"></script>
Scripts after </body>:
$(document).ready(function () {
$('.sidebar-menu').tree()
});
var Popup, table;
$(document).ready(function () {
// Some code here...
});
// Popup Modal Window
function modaladdedit(url){
var formDiv= $('</div>');
$.get(url)
.done(function(response){
formDiv.html(response);
Popup= formDiv.dialog({
autoOpen: true,
resizable: false,
position: 'center',
modal: true,
title: 'Add/Edit Email Data',
height: 500,
width: 600,
close: function (){
Popup.dialog('destroy').remove();
}
});
});
When I click on the button, the dialog window does not popup and I dont get any errors in the console.
I tried everything and nothing worked. I tried changing the order of the css and js file but nothing worked really.
Any help will be much appreciated.
Thank you!
Does this even create a <div>?
$('</div>')
I'm not sure if it self-corrects for you, but the / should be at the end:
$('<div/>')
Additionally, even when you create your formDiv you never append it to the DOM. Probably the ideal place to do that would be in the AJAX callback. Something like this:
formDiv.html(response);
$('body').append(formDiv);
You can append it anywhere you like really, I'm just using the <body> element as an example.
I am trying to figure out how to take user button clicks from buttons.html to dynamically toggle column visibility on a second userinput.html. I'm using DataTables for the userinput.html table and thought I had the solution with column.visible. In the DataTables manual there is an example of clicking a <a> and toggling column visibility. I am trying to apply that logic across html files. Unfortunately, the code I've tried is not working. Here's what I've got:
BUTTON PAGE
<!DOCTYPE html>
<html>
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
<link rel="stylesheet" type="text/css" href="designscratchpad.css">
</head>
<body>
<h1>Button page</h1>
<button id='id1' class='class1' data-column="1">Clickme</button>
<button id='id2' class='class1' data-column="2">Clickme</button>
<button id='id3' class='class1' data-column="3">Clickme</button>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js">
</script>
<script type="text/javascript" src='stackexample.js'>
</script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</body>
</html>
USER INPUT PAGE
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.css"/>
<body>
<table id="userinput" class="display" cellspacing="1" width="100%">
<thead>
<tr>
<th>A</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr class="ac">
<td>
<input type="text" autofocus placeholder="e.g; " name="input" >
</td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<td>
<input type="text" placeholder="" name="P" class="h"></td>
</tr>
</tbody>
</table>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jqc-1.12.4/pdfmake-0.1.27/dt-1.10.15/af-2.2.0/b-1.3.1/b-colvis-1.3.1/b-flash-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/kt-2.2.1/r-2.1.1/rg-1.0.0/rr-1.2.0/sc-1.4.2/se-1.2.2/datatables.min.js"></script>
<script type="text/javascript" src='stackexample.js'></script>
</body>
</html>
</body>
</html>
JS
$(document).ready( function () {
var table = $('#userinput').DataTable( {
"paging": false,
"ordering": false,
"scrollX" : true,
"scrollY" : true,
"scrollCollapse" : true,
"searching" : false,
// "stateSave" : true,
});
$('button.class1').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
});
;
There are no errors in the console on either html page. I think the error may be the use of the this keyword, but I'm not sure how to adjust the code to apply across html files.
It's not required to have the buttons on a separate page, in fact, I'd gratefully accept any constructive criticism.
Thank you in advance.
You can click button on one page to toggle (or any effect) on your another page ? So you can use webStorage(localstorage, sessionstorga) or cookies (read aboit this) or somthing like this. You click button and use script on first page but when you skip to another your js is restarting so you want to somthing to storage your data.
I've a jsp with a form that include another jsp with a div (that's a JQuery dialog) and in the dialog I've a form that I've to validate.
My issue is: I cannot create an inner form opened in a dialog. So when I try to validate it, I get following error: Uncaught TypeError: Cannot read property 'form' of undefined.
See following snippet, please:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<form id="intForm">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</form>
</div>
</form>
</body>
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
If I remove the external form, it works fine. I can I solve this? Thanks.
Note: I can't remove the external form and I have to validate only the fields inside my dialog.
You are getting that error because when you call $("#myDialog").dialog() function of jQuery, myDialog div loses the form from it's inner html.
Please put html back after dialog and before open dialog functions
e.x.
<script>
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
buttons: {
"Click me": function(){
$("#myDialog form").valid();
}
}
});
$("#myDialog").html("<form id='intForm'><label for='field1'>Don\'t write anything in textbox, just click the button</label><input type='text' id='field1' required></form>");
$("#myDialog").dialog("open");
</script>
This code should run fine!
Thank you
I solved wrapping dialog inside a form, using option create:
create: function(){
formDialog = $(this).wrap($('')).parent();
}
This is the result:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="extForm">
<div id="myDialog">
<label for="field1">Don't write anything in textbox, just click the button</label>
<input type="text" id="field1" required>
</div>
</form>
</body>
<script>
var formDialog;
$("#myDialog").dialog({
autoOpen: false,
modal: true,
title: "myDialog",
create: function(){
formDialog = $(this).wrap($('<form>')).parent();
},
buttons: {
"Click me": function(){
formDialog.valid();
}
}
});
$("#myDialog").dialog("open");
</script>
</html>
Thanks to all.
I'm attempting to perform a jQuery click function inside a dynamically loaded div. I've looked and implemented many of the tactics I've run across to no avail, the last being here.
The code that I'm running to load the div:
$(window).load(function(){
function showitusers() {
$("#creatorsettingsdiv").load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php');
}
$("#creatorsettingsusersbutton").click(function() {
var usersvar = showitusers();
});
});
This loads creatorusersdiv.php with an h2 element class userstabletitle, shown here:
<html><head>
<title>Quiz Time | Creator Settings</title>
<meta content="width=device-width" name="viewport">
<link rel="stylesheet" href="metro-icons.css">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Muli">
<link type="text/css" href="css/normalize.css" rel="stylesheet">
<link type="text/css" href="css/style.css" rel="stylesheet">
<link type="text/css" href="css/grid.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div class="wrapper">
<ul class="nav">
<li class="leftbutton"><a class="entypo-home" href="home.php"></a></li>
<li class="leftbutton">Create</li>
<li class="leftbutton">Take</li>
<li class="leftbutton">Scores</li>
<div class="rightnavcontainer">
<li class="rightbutton"><a class="entypo-cog" href="creator_settings.php"></a></li>
</div>
</ul>
</div>
<div class="sessionwrapper">
<div class="loginwrap">Welcome </div><div class="loginname">Ben David </div> </div>
<div class="logout">logout</div>
</div>
<!-- <div id="content"> -->
<script src="http://XX.XX.XX.XX/quizzes/js/creatorprofiledivchange.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/creatorusersdivchange.js"></script>
<div class="wrap">
<div class="primary">
<div id="sideprofile">
<ul class="leftnav">
<div>
<button id="creatorsettingsprofilebutton" class="menuButton">Profile</button>
</div>
<div>
<button id="creatorsettingsusersbutton" class="menuButton">Users
</button></div>
</ul>
</div>
</div>
<div id="creatorsettingsdiv" class="secondary">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.min.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/deleteuserwarning.js"></script>
<link href="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.css" type="text/css" rel="stylesheet">
<h2 class="userstabletitle">List of Users</h2>
<table class="userstable">
<tbody><tr class="usersheader">
<td class="tdheader">Real Name</td>
<td class="tdheader">Username</td>
<td class="tdheader">Password</td>
<td class="tdheader">Department</td>
<td class="tdheader">Role</td>
<td class="tdheader">Color</td>
<td class="tdblank"> </td>
<td class="tdblank"> </td>
</tr>
<tr class="usersbody"><td>BD</td><td>BD</td><td>notit</td><td>Pricing</td><td>creator</td><td>00FF99</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr><tr class="usersbody"><td>Julie</td><td>julieh</td><td>notit</td><td>Pricing</td><td>admin</td><td>4B088A</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr></tbody></table></div>
</div>
</body></html>
I'm then attempting to display a message when .userstabletitle is clicked with the following:
$(window).load(function(){
function showitusers() {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
$('body').on('click', 'h2.userstabletitle', function() {
var usersvar = showitusers();
});
});
This is according to the answer referenced above, yet it is not working at all. Is there something incorrect in how I'm attempting to implement this?
Try this code
$(window).load(function () {
function showitusers() {
var $element = $("#creatorsettingsdiv");
$element.load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php', function () {
//this code will run after PHP text loaded
$("h2.userstabletitle", $element).on("click", function () {
// your code on click event
})
});
}
$("#creatorsettingsusersbutton").click(function () {
var usersvar = showitusers();
});
});
Put this code
$("#creatorsettingsusersbutton").click(function() {
var usersvar = showitusers();
});
after the $(window).load method
This is a part of my page:
<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
<img alt="" class="logo" src="Images/ECON_76px.png" />
<asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>
<asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>
<asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>
<asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
</asp:ContentPlaceHolder>
</div>
<div id="dialog" title="Restart">
<p>This will clear all data of the current session (as if you would have just logged in)!</p>
<p>Are you sure?</p>
<input id="yes" type="button" value="Yes" />
<input id="no" type="button" value="No" />
</div>
<script type="text/jscript">
function ShowDialog() {
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
}
</script>
</form>
</body>
The idea is to show a dialog when the restart button is clicked as I don't like the alert box of Chrome.
Why does it not work?
Kind of took it straight from an example in a book.
You aren't loading any jQuery UI CSS libraries, and you are loading 2 versions of normal jQuery. As a quick test, try removing your own jQuery libraries and link to Google to get you started. You can then gradually place yours back:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
A side note, you are mixing type "jscript" and "javascript". As of HTML5, you can simply leave off specifying type declarations. It will be assumed to be CSS or JavaScript.
There it needs some changes in your code. Try this:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
});
function ShowDialog() {
$("#dialog").dialog('open');
}
</script>