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
Related
I have a tag of html for a href. This is my code:
<a href='#' class='popup' onclick='getPopup();'>$item->NAMA_NASABAH</a>
the code is sended from ci controller using ajax, and looped from database. So i have many a href. When i try to click the a href, the popup will show up.
here code in javascript:
function getPopup(){
alert('popup');
dialog.dialog("open");
}
dialog = $( "#loginform" ).dialog({
autoOpen: false,
height: 600,
width: 400,
modal: true
});
<div id="loginform" title="Create new user">TEST</div>
when i try to run my application, the alert is running, but my popup not showup. How can i fix it?, thanks.
function getPopup(){
dialog = $( "#loginform" ).dialog({
autoOpen: false,
height: 600,
width: 400,
modal: true
dialog.dialog("open");
}
The dialog must in above of open syntax.
I'm trying to load the content of a PHP file in a jQuery UI dialog, but the dialog won't open.
If I debug the code with FireBug, there seems to be an break without any error report on the following line $('#formDialog_open').load($(this).attr('href'), function()
HTML
<div id="formDialog_open" class="widget grid6" title="Dialog with form elements">
//my php codes
</div>
hyperlink what fires the dialogbox
<a href="edit.php?id=' .$aRow['id']. '" id="form" class="tablectrl_small bDefault tipS" title="Edit">
The Javascript
$('#form').live('click',function(e) {
e.preventDefault();
$('#formDialog_open').load($(this).attr('href'), function(){
$('#formDialog_open').dialog({
title: 'User Administration',
resizable: true,
modal: true,
hide: 'fade',
width:350,
height:275,
});//end dialog
});
});
Suggest you following `
$("#button1").click(function () {
$('#formDialog_open').dialog({
title: 'User Administration',
resizable: true,
modal: true,
hide: 'fade',
width:350,
height:275,
});//end dialog
});`
Check it out and find out that it seems click event is not execute. So I have given a code for the #button1 click event.
Also you can use followJquery Dialog and Click Event Jquery documents
$("#modal_confirmation").dialog({
autoOpen: false,
bgiframe: true,
resizable: true,
width:500,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Delete': function() {
//HERE I HAVE TO PUT A LINK TO GO TO A URL*
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
The link has to pass php variables. I've tried something like:
'Delete':
function() {
window.location = "delete_content?id=" $idC
and also
window.location = "delete_content?id=" <?php echo $idC;?>
<a class='btn_no_text btn ui-state-default ui-corner-all tooltip modal_confirmation_link' title='Eliminar' href=''>
<span class='ui-icon ui-icon-circle-close'></span>
</a>
When you click on that link it opens a model-dialong with the buttons that I show above. So summing up when u click on delete it should go to a link that looks something like:
delete_content.php?id=SOME NUMBER.
I've also tried to acess the href attribute on the html/php but didn't succeed.
buttons: {
'Delete': function() {
**var linkToRedirect = document.getElementById('completeLink').value;
window.location = linkToRedirect;**
$(this).dialog('close');
},
And on the form:
<input type='hidden' name='completeLink' id='completeLink' value='delete_content.php?&id=$idC' />
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 :)
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.