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
Related
Im using jqwidjets jqxgrif for one of my project.
In grid i want select a row and edit it in another page(href link).the EDIT link in outside the grid.
currently im using following code to row select.but its only working for keyboard navigation not for mouse select.how do i enable mouse select and pass row index to outside edit link onclick event.
$("#jqxgrid").jqxGrid(
{ width : '100%',
source: dataadapter,
selectionmode: 'singlerow',
altrows: true,
theme: theme,
filterable: true,
autoheight: true,
pageable: true,
columnsresize: true,
//virtualmode: true,
pagesizeoptions: ['10', '15', '20'],
pagesize:20,
sortable: true,
ready: function () {
//$("#jqxgrid").jqxGrid('sortby', 'ObjectId', 'asc');
//$("#jqxgrid").jqxGrid('selectionmode', 'singlerow');
$("#jqxgrid").jqxGrid('selectrow', 0);
},
rendergridrows: function () {
return dataadapter.records;
},
columns: [
I use the following for getting the click and keyboard, hopefully this helps.
$('#jqxgrid').bind('rowselect', function(event) {
var current_index = event.args.rowindex;
var datarow = $('#jqxgrid').jqxGrid('getrowdata', current_index);
// Use datarow for display of data in div outside of grid
});
$("#jqxgrid").bind('rowselect', function (event) {
});
i have a jquery dialog, which in i have:
$(document).ready(function() {
if( window.location.href.indexOf( '#product' ) != -1 ) {
var productID = window.location.href.split('-');
showDialog(productID[1]);
}
});
function showDialog(productID)
{
$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );
$( "#dialog-modal_"+productID ).dialog({
width: 790,
height: 590,
modal: true,
open: function(event, ui)
{
}
});
}
it works fine when i open it, but if i close that window and try to re-open it - it does not responding.
thanks!!
Below is a sample of how jQuery UI Dialog code should appear. Remember, you need a way to open the dialog. So create a function that calls showDialog on that modal again. A button, or link would work.
jQuery UI Code
function showDialog(productID)
{
var container = $('#dialog-modal_'+productID).html('<blah blah>');
container.dialog({
autoOpen: false,
modal: true,
width: 790,
height: 590
});
container
.dialog('option', 'title', 'Your Title')
.dialog('option', 'buttons', {
Close: function() {
$(this).dialog('close');
}
})
.dialog('open');
//do open event work here
}
DOM for a Open Button
Open My Modal
jQuery for Open Button
$('a#open').click(function(e) {
e.preventDefault();
showDialog(<your id>);
});
jQuery( "#dialog" ).dialog({ width: 'auto', zIndex: 9999, height: 370, resizable: false, draggable: false,
open :function(event, ui) {
jQuery('body').addClass('black-overlay');
},
show: { effect: 'drop', direction: "up", mode: 'slow'},
close:function(event, ui) {
jQuery('body').removeClass('black-overlay');
}
});
I want Dialog Window Should be Drop From Starting of Browser window and No border to that dialog box
and also drop from top Should be slow
Currently dialog box is Drop up very fastly and not from Starting of Browser window
Can any one help me in this
reduce the default animation speed to exaggerate the effect
$.fx.speeds._default = 3000;
Put this code just before:
jQuery( "#dialog" ).dialog({...
You can add duration:1000 to the show properties
show: { effect: 'drop', direction: "up", mode: 'slow' ,duration:1000}
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.
});
}
}
});
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);
}