I am trying to integrate new functionality using jQuery UI's dialog.
I have a page with a link. When a link is clicked a modal dialog with a form in it opens. That part works OK.
$("#myForm").hide();
$("#myLink").click(function(){
$("#myForm").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function() {
// ???
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Open Dialog
<div id="myForm">
<form>
<textarea id="myValues" rows="10"></textarea>
</form>
</div>
Now, I need to submit the form from within my dialog and POST results to the same page. I am getting all confused with how to implement the rest. I did look at the jQuery .post() example which made me even more confused. The page is in PHP, so when the results are submitted I need to get the post value and do some server-site action.
if (isset($_POST["myValues"])) {
// do something
}
Stuck, need help.
In jQuery function for "Submit" button:
$('form#myFormId').submit();
And in HTML:
<form id="myFormId" method="POST" action="processingscript.php">
Then the php script will get all the values that have been POSTed and can process them.
Look into using the jQuery submit function
Reference: http://api.jquery.com/submit/
Use this method that updates dialog content:
$("#myformid").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function (event) {
event.preventDefault();
var formvalues = $("#myformid").serialize();
$.post('/Home/Edit', formvalues, function (data) {
//use data
$('#myformid').html(data);
}, "html");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
In the Control,
[HttpPost]
public PartialViewResult Edit(ViewModel model) {
//use data
return PartialView("MyDialogView", model);
}
Related
hello guys : i'm trying to make popup using Jquery inside Razor Mvc
4 , the popup done correctly but the problem when i press on close "x"
and press again to let popup appears again jquery redirect to new page
that contains the content of the dialog when im refresh the page and
let dialog apears again worked
$("#dialog-edit").dialog({
title: 'Card Types',
autoOpen: false,
resizable: false,
dialogClass: 'CreateClass',
closeOnEscape: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: false,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").show();
$(this).load(url);
}
});
$("#lnkCreate").live("click", function (e) {
//e.preventDefault(); //use this or return false
//
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
the answer is
the partial view that i'm loaded inside the dialog contains
#*<script src="~/Scripts/jquery-1.7.1.min.js"></script>
when i'm removed it everything worked correctly
I have the following in a table, repeated for each row:
<a <?php echo 'id="'.$id.'"'; ?> class="custom-dialog-btn btn btn-small">
<i class="icon-trash"></i>
</a>
where id is different for each line, because it is taken from a table in database where it is the primary key.
Then, I used th following jQuery code:
$(".custom-dialog-btn").bind("click", function (event) {
$("#mws-jui-dialog").dialog("option", {
modal: false
}).dialog("open");
event.preventDefault();
});
$("#mws-jui-dialog").dialog({
autoOpen: false,
title: "Alert",
modal: true,
width: "640",
buttons: [{
text: "NO",
id: "cancel_button",
click: function () {
$(this).dialog("close");
}
},
{
text: "OK",
id: "confirm_button",
click: function () {
myremovefuntion(id); // I need the id
}}
]
});
that refers to the dialog:
<div id="mws-jui-dialog">
<div class="mws-dialog-inner">
<h2>Are you sure you want to delete?</h2>
</div>
</div>
How can I pass the id to the modal?
You can append a data attribute to your dialog div as follows;
$('a').click(function (e) {
e.preventDefault();
$("#your_dialog").data('mycustomdata', $(this).prop('id')).dialog('open');
});
And retreive it like this
$("#your_dialog").dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Delete': function() {
$(this).dialog('close');
var mydata = $(this).data('mycustomdata'); // = gives you the id of anchor element
// some delete logic
}
}
});
While Emin's answer certainly works, I wonder if this fabuolus jQuery UI library perhaps has a dialogue flavour analogue to JavaScript's native confirm() method? Or perhaps a possibility to pass in callback functions? This would remove the need from the dialogue code containing business logic.
Use the following code to get the id:
var id = $(this).prop("id");
And you will get the id of that which element you have clicked.
I want to pop-up a jQuery Ui Dialog, but it doesnt work. Instead of dialog, i get a new page opened. My code is next:
Controller's action:
public function diaAction()
{
$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return new ViewModel();
}
index.phtml:
<a class="some-link" title="title here" href="<?= $this->url('dialog', array('action' => 'dia'))?>">open form</a>
dia.phtml (dialog code)
<script type="text/javascript">
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
</script>
I just don't get it, why this is not as simple as it should be. Any help?
You have to handle 'click' so it show the dialog instead of following a link. Something like this:
$('.table a.button').on('click',function(e){
e.preventDefault();
$('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
In my opinion, the javascript is just not at its right place. It is called by the index.phtml, not the dia.phtml. How can it be executed it the browser just doesn't know the existence of it?
I think my answer comes too late for you but I hope it will help some other people.
How can I use the action in html form so I can send all the data form my form
I tried $("#formupload").attr('action') seems not working
Here is my code:
$(".clickupload").click(function () {
$("#dialog-form").dialog("open");
});
$("#dialog-form").dialog({
autoOpen: false,
closeOnEscape: true,
title: "Upload Picture",
width: 400,
height: 300,
modal: true,
buttons: {
Cancel: function () {
$(this).dialog("close");
},
Upload: function () {
$(document).ready(function () {
$("#formupload").attr('action');
});
}
}
});
<div id="dialog-form">
<form id="formupload" action="ProfileImages/FileUpload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="uploadProfilePicture"/>
</form>
</div>
You mean eventually $("#formupload").sumbit();? What you're doing is reading the attribute and then doing nothing with it?
Try simply $("#formupload").submit()
What bweobi said, and eventually put all the jQuery initialisation stuff on document ready to make sure the document is all initialised before you add event handlers to its elements :
(function($) { // Allows you to create variables locally so
// there are no conflict with other stuffs.
$(document).ready(function() {
// You can name jQuery variables with a dollar so you can easily make
// the difference betwen jQuery and non-jquery objects.
$dialogForm = $('#dialog-form'); // Half queries, double speed.
$(".clickupload").click(function () {
$dialogForm.dialog("open");
});
$dialogForm..dialog({
autoOpen: false,
closeOnEscape: true,
title: "Upload Picture",
width: 400,
height: 300,
modal: true,
buttons: {
Cancel: function () {
$(this).dialog("close");
},
Upload: function () {
$("#formupload").submit();
}
}
});
});
})(jQuery); // Alows you not to use $ in global scope in case
// you use multiple libraries that use the $.
Hello I've got another question. I am creating an administration system. I added registration for users and a delete function. Now I need to make a good design.
So I created a table from a MySQL DB with following infos:
ID, Username, Last Login and Delete.
This is an extraction of my php code where I print the table:
echo "<td class=\"center\">
<a href=\"#\" class=\"delete_user\">
<img src=\"images/delete.png\" />
<script type=\"text/javascript\">
var id = \"index.php?section=user_delete&id=".$getUserID[$i]."\";
</script>
</a>
</td>
As you can see I am using the ID for the delete process.
Now I want to use a jQuery modal popup to make sure that I really want to delete this person.
This is my js code:
$(".delete_user").click(function() {
$( "#dialog_delete_user" ).dialog( "open" );
});
$( '#dialog_delete_user' ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
'ok': function() {
alert(id);
//document.location = id;
$( this ).dialog( 'close' );
}
}
});
As you can see I need to add a variable id to identify the person and make sure that the right person gets deleted.
I thought that the javascript only executes if i click the link. This seems to be incorrect.
So how can I define/identify each person?
The displayed table is useless cause there is no way to identify each delete button with its owner. So I have to define it right there where I create the table.
Without this jQuery modal form it would be easy. But there has to be a way to get it work. Any idea?
Personally I would set an attribute on the link that opens the dialog something like
Click me!
then in the onclick event of the link that opens the dialog box I would have it set the dialog's hidden user field to the value of $(this).data("user-id"); If you're not doing a form and just immediately firing an ajax request it gets even easier.
var currentUserId;
$(".delete_user").click(function() {
currentUserId = $(this).data("user-id");
$( "#dialog_delete_user" ).dialog( "open" );
});
$( '#dialog_delete_user' ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
'ok': function() {
//document.location = "/somephpfile.php?user_id=" + currentUserId;
$( this ).dialog( 'close' );
// ajax version
$.ajax({
url : "/somephpfile.php?user_id=" + currentUserId,
// Other ajax related code.
});
}
}
});