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 :)
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>
Hi I am using a framework called CodeIgniter and its a sample of MVC. I need a popup box where it will display the subvalues of an application however my dialog box is not working everytime I echo it. but you see i need to loop the dialog box for different values. my code is below
<?php
foreach($people as $row){
echo"<div id='dialog' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener'>".$row->app_name."</button>";}
?>
My javascrip code is fro jquery
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
Use event delegation
$(document).on("click" , "#opener" ,function() {
$( "#dialog" ).dialog( "open" );
});
Update the code as below:
<?php
$i = 1;
foreach($people as $row){
echo"<div id='dialog". $i."' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener". $i."'>".$row->app_name."</button>";
?>
<script>
$(function() {
$( "#dialog<?php echo $i?>" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener<?php echo $i?>" ).click(function() {
$( "#dialog<?php echo $i?>" ).dialog( "open" );
});
});
</script>
<?php
$i++;
}
?>
Basically there will be multiple popup and you need to give unique id to each popup and button.
to use id in this situation is not good idea ... you should change id to class
echo "<button class='opener'>".$row->app_name."</button>";
then
$( ".opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
id is unique you should use a class
Enjoy :)
why is that ajaxForm is not running in jQuery Dialog modal confirmation whenever it is included in a "Delete Item" button.
Here is my jquery dialog:
<div id="deleteDialogForPartylist" title="Delete this item?">
<form id="deleteDialogForPartylistForm" action="mEdit/editPartylist/storeDataToDb/deleteData.php">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><span id="acronymOfTheParty" style="font-weight:bolder"></span> will be permanently deleted and cannot be recovered. Are you sure?</p>
<input type="hidden" id="deleteDialogForPartylistHiddenId" name="deleteDialogForPartylistHiddenId">
</form>
</div>
Here is my script
$(function(){
$( "#deleteDialogForPartylist" ).dialog({
autoOpen: false,
resizable: false,
height:225,
hide: 'fade',
modal: true,
buttons: {
Cancel: function() {
$("#deleteDialogForPartylist").dialog('close');
},
"Delete item": function() {
$('#deleteDialogForPartylistForm').ajaxForm({
target: '#partyListInAddCandidate',
type: "post",
success: function(){
alert("Success");
$("#deleteDialogForPartylist").dialog('close');
}
});
}
}
});
});
.ajaxForm() does not submit the form as stated in the documentation of the plugin (http://malsup.com/jquery/form/#api)
In your case you should use .ajaxSubmit() instead, which will instantly submit your form on button-click as already suggested by charlietfl's comment
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>
I need to output alert message if val = -1, but the problem is that this message appears at the bottom of the page and this does not depend on the value of val.
if ($val == -1)
echo '
<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
';
else { //... }
<div id="dialog-message" title="Process failed.">
<p><span class="ui-icon ui-icon-circle-check"
style="float: left; margin: 0 7px 50px 0;"></span> Error message.</p>
</div>
To hide the div use css
#dialog-message{
display:none;
}
For a better alert there is a nice plugin for Alert, Confirm & Prompt use that plugin
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
It's download page is here
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
You can use position function to position the dialog:
Link
What's wrong with the good old fashioned alert() javascript function? It should do the job just fine in this situation.