I would like to load jquery dialog after a delay of few seconds after page load. Here is my code so far.
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
The problem is now that the popup animation of sliding from top is good for Chrome but in firefox it does not come to the center of the screen and for IE there is no popup at all.
http://jsfiddle.net/fakhruddin/x39Rr/9/
Please guide.
Use setTimeout() to delay.
$(document).ready(function() {
setTimeout(function(){
$("#dialog").dialog({
show: {
effect: 'fade',
duration: 800,
},
});
}, 2000)
});
Try this
$(function(){
$('yourDiv').dialog({
autoOpen: false
});
});
function openMyDialog(){
$('yourDiv').dialog('open');
}
$(document).ready(function(){
setTimeout(function(){
openMyDialog();}, 2000);
});
You can use the jquery slidedown/slideup: http://api.jquery.com/slideUp/
Related
I'm trying to open a dialog, please see comment below:
var user_ids = $('.user_ids:checked').map(function() {
return this.value;
}).get();
var opt = {
autoOpen: false,
modal: true,
width: 550,
height:650,
title: 'Dialog'
};
tried this one but
this wont trigger open dialog
$("#dialog-confirm")
.dialog(opt)
.data('uids','user_ids')
.dialog({
open: function( event, ui ) {
alert('do something!');
},buttons:{
'Confirm': function() {
//do something
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
this one successfully open the dialog box
but i want to put the Confirm and Cancel button
$("#dialog-confirm")
.dialog(opt)
.data('uids','user_ids')
.dialog('open');
});
how can i open the dialog with button triggers?
According to the jQuery UI documentation: http://api.jqueryui.com/dialog/#option-buttonsThis is how you put buttons inside your dialog
$(document).ready(function(){
var user_ids = $('.user_ids:checked').map(function() {
return this.value;
}).get();
var opt = {
autoOpen: true,
modal: true,
width: 300,
height:300,
title: 'Dialog'
};
$( ".selector" )
.dialog(opt)
.data('uids','user_ids')
.dialog({
buttons: [
{
text: "Confirm",
icon: "ui-icon-heart",
click: function() {
console.log("confirmed");
}
},
{
text: "Cancel",
icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
$( ".selector" ).dialog( "open" );
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<body>
<div class="selector" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
I am having a working while loading a div, $(document).ready(function() { works well before div load, but it stop working after div loaded. Why is it happening?
Here is the sample of code I am working with:
<div id="abc0">
<div id="abc">
<script>
$(document).ready(function() {
alert("test");
});
</script>
</div>
</div>
And here is the load function I am using:
$("#abc0").load('mypage #abc');
Use callback function for alert.
$("#abc0").load("mypage #abc > *", function(){
alert("test");
});
$(function() {
alert("test me");
});
Some time you have to write jQuery instead of $
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
});
I have jquery dialog and when i click over the button it open but only first time when i close it and click second time over the same button it not appears. Here is my code :
Script:
$(function () {
$("#dialogPicture").dialog({
autoOpen: false
});
$(".buttonClass").on("click", function () {
// get the div element with the id dialogClass contained at the same scope as button!
var id = ($(this).siblings(".dialogClass").attr("id"));
$("#" + id).dialog({
autoOpen: false
});
$("#" + id).dialog("open").css({
"font-size": "13px"
});
});
});
HTML :
<td>
<?=$row['NOMER']?><input id="btn2" class="buttonClass" type="button" value="ВИЖ" />
<div class="dialogClass" id="dialogPicture_<?=$row['NOMER'];?>" style="display:none;">
<table class="bilet">
<tr>
<h2>
<td colspan="4">
<div align="center"><strong>ПРЕВОЗЕН БИЛЕТ</strong></div>
</td>
</h2>
</tr>
<p>
<tr >
<td colspan="2" align="right">
</table>
</div>
I think the problem is that on each button click you create a new instance of dialog box.
Try initializing all the dialog boxes in the beginning of the script and let the buttons only open them.
Another issue is that the dialog div is no longer on the table after initialization:
<div id="btn<?=$row['NOMER']?>".....
$(function () {
$(".dialogClass").each(function(){
$(this).dialog({ autoOpen: false });
});
$(".buttonClass").on("click", function () {
// get the div element with the id dialogClass contained at the same scope as button!
var btnId = ($(this).attr("id"));
btnId = btnId.replace("btn","");
$("#dialogPicture_" + btnId).dialog("open").css({
"font-size": "13px"
});
});
});
You can try out this.
You should use this Code to destroy the Dialog in Button Section
$("#TestMenuDialog").dialog("close").dialog("destroy").remove();
var NewDialog = $('<div id="TestMenuDialog"><p style="color:Red;style="font-size:7x;font-weight:normal">' + Message + '</p></div>');
NewDialog.dialog({
modal: false,
title: "Test Dialog",
height: 200,
width: 375,
show: 'clip',
hide: 'clip',
buttons: [
{ text: "OK", click: function () { $(this).dialog("close").dialog("destroy").remove(); } }
]
});
check the Jfiddle Link It works fine
http://jsfiddle.net/zpP3c/1/
I am using a fullcalendar:-
http://arshaw.com/fullcalendar/
and I am using jquery .post to get a parameter back to the same page to generate some result, and this is working well.
At the same time, I wish to use jquery ui dialogue to hold the displayed contents. While pasting the sample codes from official site, the example works. However, when combining the .post output with dialogue, it was not successful.
I would like to seek help in combining the below 2 sets of scripts:-
//for generating .post output (working!)
<script>
function event_details(thevalue){
$.post('module/calendar/event_details.php',{
eid:thevalue},
function(output){
$('#theeventmsg').html(output);
});
}
</script>
<div id='theeventmsg'></div>
//jquery ui dialogue (working!)
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: true,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</div><!-- End demo -->
Can help??? Thanks a lot!!
Try something like this:
<script>
$.fx.speeds._default = 1000;
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$('#button').click(function () {
var data = { ... };
$.post('module/calendar/event_details.php', data, function (output) {
$('#dialog p').html(output);
$( "#dialog" ).dialog("open");
});
});
});
</script>
<div id="dialog">
<p>content</p>
</div>
<button id="button">button</button>
Or:
<script>
$(document).ready(function () {
function eventdetail(thevalue) {
$.post('event_details.php', { eid: thevalue }, function (output) {
$('#dialog p').html(output);
$("#dialog").dialog({ autoOpen: true });
});
}
$('#button').click(function () { eventdetail('value'); });
});
</script>
<div id="dialog">
<p>content</p>
</div>
<button id="button">button</button>
Here's my problem...
I have the following jQuery UI script :
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "slideUp",
hide: "slideDown",
height: "300",
width: "400",
title: "Test pop-up",
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
}
);
$( "p.diag").click(function(e) {
var monUrl = 'test2.php';
$('#dialog').load(monUrl, function(response, status) {
$('#test_dialog').html(response);
});
e.preventDefault();
});
$( "p.diag").click(function() {
$( "#dialog" ).dialog("open");
});
It's a pretty simple code, it opens correctly my dialog box when I click on a p.diag class, but it won't re open after I close it.
The test2.php page just print a "lol" with a echo "lol";
And here's my HTML :
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
</div>
Thanks !
Pleas remove e.preventDefault();
see this demo: http://jsfiddle.net/ngwJ3/
Reason: http://api.jquery.com/event.preventDefault/ : If this method is called, the default action of the event will not be triggered.
Hope this help :)