I am implementing Jquery UI Popup modal form except that it is not blocking the bckground page. the code i am using is as follows:
<link href="../../Content/css/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () { $("#Form").dialog({ autoOpen: false, height: 600, width: 800, modal: true }); });
$("#btnOpen").click(function () {
$("#Form").dialog("open");
});
});
I am opening on button click btnOpen. Please help
Related
I have a jQquery UI Slider in the browser:
<meta comntent="text/html;charset=utf-8" http-equiv="Content-Type">
<html>
<head>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- JQuery -->
<script src="script/jquery/jquery-3.6.0.min.js"></script>
<script src="script/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="script/jquery-ui/jquery-ui.css">
<script>
$(document).ready(function(){
$("#slider1").slider({
max:10,
min:-10,
step:1,
value:-10,
animate: 'true',
animate: 3000,
});
$("#slider1").slider("value", 0);
$("#slider1").on('slidechange', slideChangeEvent);
});
function slideChangeEvent(event, ui){
$("#slider1").off('slidechange');
$("#slider1").slider( "option", "value", 0 );
$("#slider1").on('slidechange', slideChangeEvent);
}
</script>
</head>
<body>
<div id="slider1"></div>
</body>
</html>
The idea is that the slider stays at the middle.
When the user pull it right or left and releases the slider, it will automatically move back to middle - Animated.
But it moves back instantly, instead of animated.
Can you show me what I did wrong in the code?
Consider the following that uses the .animate() of jQuery:
$(function() {
$("#slider1").slider({
max: 10,
min: -10,
step: 1,
value: -10,
animate: 3000,
change: function(e, ui) {
var w = $(this).width();
$(ui.handle).animate({
left: (w / 2)
}, 3000);
ui.value = 0;
}
});
$("#slider1").slider("value", 0);
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id="slider1"></div>
A similar example is discussed here: Animating slider handle when altering the jQuery UI slider value option?
Without the animation, the slider will just jump to the new value.
I was trying to use jqGrid for a mobile device development, but I am unable to get the same view as the web view. The pager arrows and other images show only when I do a mouseover.
Please let me know if I have to do something special for the plugin to work on a mobile device.
I also have a problem in getting the columnChooser to work. The pop-up is not coming
Thanks
[Update]
Please find below the function that I am writing.
The files that I am including are:
jquery.mobile-1.0.min.css
jqmobile-patch.css
jquery-ui.css
ui.jqgrid.css
ui.multiselect.css
jquery-1.7.1.min.js
jquery-ui.min.js
ui.multiselect.js
grid.locale-en.js
jquery.jqGrid.min.js
in the order provided.
function buildGrid() {
var grid = jQuery("#contactGrid");
grid.jqGrid({
url: '/public/json/contactsdata.json',
mtype:'GET',
datatype: 'json',
headertitles: true,
sortable: true,
colNames:['ID','Name','Date of Birth',"Email","Marital Status"],
colModel:[
{name:'id', index:'id'},
{name:'name',index:'name'},
{name:'dob',index:'dob'},
{name:'email',index:'email'},
{name:'maritalstatus',index:'maritalstatus'}
],
sortname: 'id',
sortorder: 'asc',
rowNum:5,
rowList:[5,10,20],
pager: '#contactPager',
viewrecords: true,
autowidth: true,
shrinkToFit: true,
loadonce:true,
emptyrecords: "No Records to display",
height: 'auto',
width: '80%',
caption: "Contact Details",
ignoreCase: true,
gridview: true
});
grid.jqGrid('navGrid', '#contactPager', {refreshstate: 'current', search:true,add: false, edit: false, del: false});
grid.jqGrid('navButtonAdd', '#contactPager', {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser');
}
});
};
I solved the problem. The issue was with the order of inclusion of the files. The order that I have followed is:
<link rel="stylesheet" href="/public/jqmobile/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="/public/css/jqmobile-patch.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/jqmobile/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/public/js/jqmobile-patch.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/plugin/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this
<script>
//to hide the dialog box on loading
$j(function() {
$j( "#dialog" ).hide();
});
$('.button').click(function(){
$('#dialog').dialog('open');
});
</script>
<div id="dialog" title="Basic dialog">
<p>Dialog box</p>
</div>
The button
But the dialog won't open by clicking the link... Everything is included well.
EDIT
<script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"></script>
<script>
var $j = jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"></script>
Are you referencing jQuery and jQuery ui library? You can autohide when initializing:
$("#dialog").dialog({ autoOpen: false });
$('.button').click(function() {
$('#dialog').dialog('open');
});
Demo: http://jsfiddle.net/pxQ8j/
You can use this code for your purpose.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
function myfuncation()
{
// Here is your ajax request to db related work.
var ajaxresponce = "Sucessfully Insert Form";
$('#dialog-message').html(ajaxresponce);
$( "#dialog-message" ).dialog();
}
</script>
Hope it helps you. Please let me know if you have any query.
Your problem is you are trying to access the dialogs open method even though you never created the dialog instance.
Just change your code to do:
$('#dialog').dialog()
If you read the docs: http://jqueryui.com/demos/dialog/, it spells that out for you, you will also see that it opens by default on the initial call.
Notification dialog function like alert().
function msgbox(text,buttontext) {
buttontext = buttontext || "OK"
$( "<div>" + text + "</div>" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: buttontext,
click: function() {
$( this ).dialog( "close" );
$(this).remove();
}
}
]
});
}
call function
msgbox("test dialog");
or
msgbox("test dialog", "I agree");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<form action="" method="post">
Name :- <input type="text" name="name" value="">
Email :-<input type="email" name="email" value="">
<div id="test" class="loader"></div>
Submit:-<input id="dialog2" type="submit" onclick="myfuncation();" name="submit" value="save">
</form>
</div>
<button id="opener">Open Dialog</button>
<div id="dialog-message"></div>
</body>
</html>
<script type="text/javascript">
$( "#test" ).hide();
function myfuncation()
{
alert("hai");
// Here is your ajax request to db related work.
$( "#test" ).show();
//var ajaxresponce = "Sucessfully Insert Form";
//$('#dialog-message').html(ajaxresponce);
// $( "#dialog-message" ).dialog();
}
</script>
Good morning,
It appears that the jQuery UI Layout is resetting my options after a call to sizePane(). When I load the following into FireFox, then click the "Resize" button, the north pane suddenly becomes resizable, and the hotkeys are suddenly enabled again. Am I doing it wrong? Or is this a bug?
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
function documentReady(){
jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
resizable: false
},
center: {
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="jQuery('body').layout().sizePane('north',100);" />
</div>
</body>
OK, I believe I've found the solution. Calling jQuery('body').layout() a second time appears to replace my previous "layout" object with a brand new one, resetting all the options.
The solution is to maintain a reference to the original declaration and operate on that object, like so:
<html>
<head><title>Layout Test</title></head>
<link href="css/jquery-ui.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.layout-1.2.0.js"></script>
<script language="JavaScript">
jQuery(document).ready(documentReady);
var myLayout;
function documentReady(){
myLayout = jQuery('body').layout({
defaults: {
applyDefaultStyles: true
},
north: {
enableCursorHotkey: false,
closable: false,
},
center: {
enableCursorHotkey: false,
closable: false,
}
});
}
</script>
<body>
<div class="ui-layout-north">
North Pane
</div>
<div class="ui-layout-center">
Center Pane
<input type="button" value="Resize" onclick="myLayout.sizePane('north',100);" />
</div>
</body>
</html>
Also, the "resizable: false" options have to be removed because otherwise the call to sizePane() will not have any effect.
You can add this option to pane:
animatePaneSizing: true
My goal: upon clicking a link, I want to load an external page (with a image upload form) into a jQuery UI Dialog and have it submitted AJAX style.
My problem: The dialog loads the external PHP page just fine and I'm able to submit the form via AJAX -- using the jQuery form plugin shown here http://jquery.malsup.com/form/ -- BUT for some reason the AJAX submission won't work inside the dialog box, only when I view the page directly. It simply loads the page itself as if the JS was turned off or something.
Here's the parent page displaying the dialog:
port_edit.php (header)
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow(){
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
</script>
port_edit.php (link)
Modify
And the external document loaded into the dialog:
image_upload.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
}); });
</script>
</head>
<body>
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>
HELP!
Would you want to try moving the code within the document.ready() in image_upload.php into the same function in the port_edit.php and try again? I am not sure this would work, but you could try that...
Like below:
port_edit.php
<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
location.reload(true);
}
$(document).ready(function() {
$('#gallery-display').each(function() {
var $link = $(this);
var $dialog = $('<div></div>').load($link.attr('href')).dialog({
autoOpen: false,
title: 'Gallery Display',
width: 280,
height: 280,
close: refreshWindow,
resizable: false
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
// attach handler to form's submit event
$('#image-upload').submit(function() {
// submit the form
$(this).ajaxSubmit();
return false;
});
});
</script>
Modify
image_upload.php
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" />
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>