We Keep Coding

jquery dialog opens and all things work but not second time

my site is in mvc-4, i am opening partial view in dialog. partial view works fine first time, but when i open it second time and so on it opens he dialog but partial view is not working. I think some jquery issue i am doing wrong. In partial view div hover event is not working.
This is my code to open dialog:
<div onclick="ShowHistory();">Actions History</div>
function ShowHistory()
{
myDialog = $("<div> </div>");
myDialog.dialog({
autoOpen: false,
width: 1050,
title: "Title",
resizable: false,
modal: true,
draggable: false,
});
myDialog.load("#Url.Action("Method_return_partial_view", new {id = 1 })",
function () {
myDialog.dialog('open');
});
}
Controller method:
[Authorize]
public PartialViewResult Method_return_partial_view(int id)
{
var list = GetHistory(id);
return PartialView("_partialViewName", list);
}
Edit:
I am also sorting the grid, and grid sorting is done using jquery ajax, it works fine when open first time and controller method for sorting called once, but when i open dialog second time and i click on sorting header then controller methods called with multiple of two, means if click once then call once, if click 2nd time then controller method calls 2 times, if 3rd then calls 4 times.

You should try and specify what happens when the dialog closes so that it can be reused again. Try this:
function ShowHistory()
{
myDialog = $("<div> </div>");
myDialog.dialog({
close: function (event, ui) {
// remove div with all data and events
myDialog.remove();
},
autoOpen: false,
width: 1050,
title: "Title",
resizable: false,
modal: true,
draggable: false,
});
myDialog.load("#Url.Action("Method_return_partial_view", new {id = 1 })",
function () {
myDialog.dialog('open');
});
}

Javascript do not return a proper value when used in a content page ASP.NET

I'm totally new to Javascript(Jquery) and still a beginner in ASP.NET.
I have a contentpage that has a gridview gvUsers I made a code for the event RowDatabound that add an "id" in its markup for every rows.
and its rows are clickable and can be selected through javascript in the contentpage page.
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#<%=gvUsers.ClientID%> tr[id]').click(function() {
$('#<%=gvUsers.ClientID%> tr[id]').css({ "background-color": "White", "color": "Black" });
$(this).css({ "background-color": "Black", "color": "White" });
});
$('#<%=gvUsers.ClientID%> tr[id]').mouseover(function() {
$(this).css({ cursor: "hand", cursor: "pointer" });
});
});
$(function() {
var RowID = $('#hdnEmailID').val();
if (RowID != "0") {
$('#<%=gvUsers.ClientID%> tr[id=' + RowID + ']').css({ "background- color": "Black", "color": "White" });
}
$('#<%=gvUsers.ClientID%> tr[id]').click(function() {
$('#<%=gvUsers.ClientID%> tr[id]').css({ "background-color": "White", "color": "Black" });
$(this).css({ "background-color": "Black", "color": "White" });
$('#hdnEmailID').val($(this).attr("id"));
});
$('#<%=gvUsers.ClientID%> tr[id]').mouseover(function() {
$(this).css({ cursor: "hand", cursor: "pointer" });
});
});
</script>
In these scripts, they get the "id" property of the selected row and save it to hdnEmailID...
<INPUT id="hdnEmailID" type="hidden" value="0" runat="server" >
To make the value hdnEmailID displayed in the page I made a code in inside a button click event that has a code like this..
Response.write(hdnEmailID.value);
At first it works pretty fine and displays the "id" of the row that I clicked however after I used this code in a master-content pages
the script returns 0. And it seems that when I click the button..
The masterpage is reloaded and seems the script is reloading too thus returning the default 0
I am not sure if this is really what happened since I'm a beginner in ASP.NET :)

Is because you do not use the rendered id, the error is on this code:
var RowID = $('#hdnEmailID').val();
and
$('#hdnEmailID').val($(this).attr("id"));
it sould be as
var RowID = $('#<%=hdnEmailID.ClientID%>').val();
and
$('#<%=hdnEmailID.ClientID%>').val($(this).attr("id"));
The id that is rendered by the controls is not the one you see on code behind, when you use it on a single page some time is the same, but when you add it to the master is change dynamically, now on your html rendered code you need to render that dynamic id.
In asp.net ver 4 there is a parameter on the controls that you can use it to make them static and not change the ClientIDMode ="Static"
Similar:
How do I access a DIV from javascript, if ASP.NET mangles its ID?
Accessing control client name and not ID in ASP.NET
Get clientid in user control from external javascript file
How to find and modify an asp.net control with JavaScript?

Sharepoint How to show popup when click on gridview?

I using Gridview control on sharepoint. I'm Bind data to column Name of Gridview. And now, I want to click direct on row of column Name, program will display detail popup window of this row.
Thanks !

I dont know if I understand you right but you could try opening a ModalDialog directing to a custom .aspx Page to Display your Information
http://sqldev-samir.blogspot.de/2012/08/open-modal-dialog-in-serverside-code-in.html

Here is client-side code to open a dialog box that will point to a page which contains the detail (editform.aspx, in this example). This code also causes a postback so the grid gets updated with the changes the user makes on EditForm.aspx.
function CloseCallback(result, target)
{
eval(<%=Page.ClientScript.GetPostBackEventReference(new PostBackOptions(Button1))%>);
}
function OpenDialog(url)
{
var options = {
url: url,
title: '',
allowMaximize: true,
showClose: true,
width: 700,
height: 800,
dialogReturnValueCallback: CloseCallback
};
var dlg = SP.UI.ModalDialog.showModalDialog(options);
}
And here is the server-side code to add the hyperlink column to the grid (this happens to be a RadGrid instead of an SPGridView server control). This column will display a hyperlink that points to the above JavaScript function and when clicked opens EditForm.aspx with the data from the selected row item.
GridColumn fldEditLink = new GridHyperLinkColumn() { UniqueName = "Edit", Text = "Edit/View",DataNavigateUrlFields = new string[] { "ID" }, DataNavigateUrlFormatString =String.Format("javascript:OpenDialog('{0}/Lists/Events/EditForm.aspx?ID={{0}}');", web.Url) };

How to postback from jQuery Dialog to the parent page?

I have a pageA.aspx. In it I open a jQuery dialog with an iframe containing the pageB.asxp.
var dlg = $('#dialog1').html('<iframe id="ifrm"></iframe>');
dlg.dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true
});
dlg.parent().appendTo(jQuery("form:first"));
$('#buttonOpenDialog').click(function () {
var url = '../PageB.aspx';
$("#dialog1>#ifrm").attr("src", url);
$('#dialog1').dialog('open');
return false;
});
Until here is all alright. Now I submit the form and when postback finishes I want to close this dialog I do it like that:
function closePopup() {
parent.$("#dialog1").dialog('close');
__doPostBack();
}
and I want to refresh the parent page pageA.aspx without doing the ugly
__doPostBack()
How Can I accomplish this?
thank you
EDIT: It seems is a complex issue. Please get involved ;P

Add a hidden button in parent page. And when the modal closed, generate the hidden button's click event. It will refresh the parent page.
dlg.dialog({
autoOpen: false,
resizable: false,
draggable: false,
modal: true,
close: function (event, ui) {
// btnHidden is the id of the hidden button.
document.getElementById('<%=btnHidden.ClientID%>').click();
// To refresh gridview when user close dialog
}
});

You can set the _target attribute of the submitted form to _parent . The result of the POST will then be displayed in the parent frame (pageA.aspx)
<form target="_parent">
</form>
Is this what you wanted?

How to pass parameters to an action that's called on JQuery dialog() Open event

Good morning.
I have a modal JQuery dialog that on Open calls and loads a Partial View. Good example can be seen here https://stackoverflow.com/a/4802423/1193841 but I'll re-paste:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
In my case ActionMethod "CreateAlbumPartial" takes an ID parameter that's passed from another page with onclick="" event.
How can I make that Id available to pass to an ActionMethod when its called as shown above ? Something like
$('#dialog').dialog('open',Id)
Would be awesome but I dont think that's how it works.
P.S. Right now I'm displaying my popup by doing $.post() to load .html(data) to div and then displaying that DIV in a .show().dialog('open').
However, instead of having my Action method call and Dialog related stuff separately I would really like to re-do it the way I'm asking to keep all logic in one place.
Thank you in advance.

Why dont you make a hidden control and assign the value to that and use it in the dialog