We Keep Coding

Data from entity framework displayed in javascript/Jquery dialog

I have a problem, and looking for a solution for 2 days
Target : Create/edit client... in HTML build a dialog with and asp fields with clientIDMode static
<div id="divDialog" runat="server" clientidmode="Static" style="display: none;">
<div class="DialogFields">
<asp:Label ID="Label1" runat="server" Text="Firstname"></asp:Label>
<br />
<asp:TextBox ID="tbxFirstName" runat="server" ClientIDMode="Static"></asp:TextBox>
</div>
...
In script
$("#btnShowDialog").click(function () {
openDialog();
});
function openDialog() {
$("#divDialog").dialog('open');
$("#divDialog").parent().appendTo($("form:first"));
}
When I click the button btnShowDialog it works fine... But
Beneath it I have a gridview within it a edit button (asp:Linkbutton) with a event to the codebehind it looks like:
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="Edit" OnCommand="Edit_Click" CommandArgument='<%#Eval("RelationID") %>'
runat="server"><img src="../images/Edit-item.png" alt="Edit" /></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
In codebehind take the parameter from commandargument and fire LoadInfo (specific data to all the fields in de dialog).
LoadInfo(e.CommandArgument != null ? int.Parse(e.CommandArgument.ToString()) : -1);
but no way I get the dialog open.
I tried
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "openDialog();", true);
and
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "openDialog();", true);
after this LoadInfo, push btnShowDialog button and it opens the dialog and all data perfect in place.
Also tried the other way around as Directly to Jquery function, get all data loaded and open the dialog. 2 problems, loading in codebehind was not even started before the dialog opens. and I only can get a static function in the codebehind.
A lot of ground to cover for me, but can any body help me out (even for a part).
...Thanx

If I understand your question correctly, you are trying to fire some client scripts (openDialog) from the server side, but they wont fire?
Try placing your page in an update panel, lets assume that we name the update panel "MyUpdatePanel". And then refer to the update panel like this:
ScriptManager.RegisterStartupScript(MyUpdatePanel, MyUpdatePanel.GetType(), "MyUpdatePanelScript", "openDialog();", true);

Asp.net repeater based Modal with ContentTemplate needs eval passed to parameter

I believe a few friends and I have coded each other into a bit of a corner. Here's what's happening: We have an aspx page building a table of Entries using a repeater, and each row has its respective EntryID. Each row has a link to a modal that displays more detailed information, which we create on the fly with a div template and an eval('EntryID') on the repeater.
The problem now is we have a ContentTemplate we use with an UpdatePanel for a series of LinkButton presses the user can follow to alter the Entry. The issue is that we pass all of the information for the Modal details via a Javascript call that opens the modal, and I need to somehow get this information to the code behind for the LinkButton's onclick call.
<asp:UpdatePanel ID="StatusUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlStatus" runat="server">
<asp:Panel ID="pnlStatusMain" runat="server">
<asp:Label ID="lblStatusText" runat="server" Text="Our validator returned a yellow status for this entry"></asp:Label>
<asp:LinkButton ID="lnkbtnChangeStatusToGreen" runat="server" OnClick="ChangeStatusToGreen_Click">Change status to green</asp:LinkButton>
<asp:Panel ID="pnlStatusConfirm" runat="server" CssClass="hideDiv">
Are you sure?<br />
<asp:LinkButton ID="lnkbtnCancelChangeStatus" runat="server" OnClick="CancelChangeStatus_Click" CssClass="grayText">Cancel</asp:LinkButton>
|
<asp:LinkButton ID="lnkbtnProceedChangeStatus" runat="server" OnClick="ProceedChangeStatus_Click" CommandArgument="">Yes, proceed</asp:LinkButton>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
The link in question being lnkbtnProceedChangeStatus.
The rest of the modal is template divs and tables that we use the Javascript call to populate with the appropriate information using html inserts. I'm thinking some sort of post back, but am not sure what would be the best way to go about it. Any ideas?

Hyperlink (with query string) open new window specific size

I have GridView2 that populates from a query string. This is done by clicking a hyperlink in GridView1. It all works perfectly, but I want the window to be a specific size instead of in a new tab. How can I achieve this?
Here's my code in GridView1:
<asp:TemplateField HeaderText="DateHL">
<ItemTemplate>
<asp:HyperLink ID="hl1" runat="server" Target="_blank" NavigateUrl='<%# Eval("DateFormat", "~/DateProfile.aspx?sdate={0}") %>'><%# Eval("DateFormat")%></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>

Have you tried a call to window.open in the onclientclick event of the hyperlink instead of using navigateURL? You should probably try naming the window too.
window.open method quick reference

Use javascript:window.open() in NavigateUrl or event of
e.g:
NavigateUrl='<%# string.Format("javascript:window.open('~/DateProfile.aspx?sdate={0}', 'MsgWindow','width=200,height=100')", Eval("DateFormat")) %>'
OR
You can try the following to OnClick:
OnClick='<%# Eval("DateFormat", "javascript:window.open('~/DateProfile.aspx?sdate={0}', 'MsgWindow','width=200,height=100')") %>'

How to show a popup to confirm update operation

Using AspxGridView, I want to implement aspxpopup to confirm updating record.
I need to do some server-side data check with what user input before updating, and I can check that in server side grid.RowValidating event. After checking, how do I launch a aspxpopup afterward to let user confirm updating the record?
In summary, after user click Update button in EditForm, is it possible to include a Aspxpopup to confirm the Update, and base on user input, decide to execute or not execute grid.RowUpdating/grid/RowInserting event code?

Try like this
<asp:TemplateField HeaderText="Update" HeaderStyle-BackColor="#8d3736" HeaderStyle-CssClass="gridheader">
<ItemTemplate>
<asp:ImageButton ID="ImageButton8" runat="server" CommandName="del"
ImageUrl="~/Images/delete.png"
onclientclick="return confirm('Do You Want To Update?')"
onclick="ImageButton8_Click" />
</ItemTemplate>

Creating a Button Click Event and Validating TextBoxes using Javascript

I am having so much trouble with this. I have looked everywhere so I hope someone can either explain to me how to do this or show me. Here's my problem:
I have a DataGrid filled with DataBound Items (ItemTemplate) which was created using ASP.Net.
My reason for the ItemTemplates over a regular DataBound field is to enable the Edit Mode of the DataGrid. In my ItemTemplates, I have labels to display the data and two option buttons (Edit/Delete). I've got the buttons working in the code behind (C#).
Edit places the DataGrid in Edit Mode. In the EditItemTemplates I've got DropDownLists, TextBoxes, and a Save button in place of the Edit button.
The Save button also works with the code I've written for it. All-in-all, the DataGrid works beautifully and displays everything neatly. However, there is one final job I want the Save button to do: I want it to check the TextBoxes and validate that the values entered match the criteria I have set (keep in mind that these are in EditItemTemplates).
I have Javascript already written that will check for validation. I want a modal window (that I have already set up) to display and I want the CSS of the TextBoxes in question to change.
I want to do this using Javascript but my problem is that I can't check for the Save button to create the Click event and I can't 'locate' the TextBoxes to validate them. Is there a way I can 'find' those elements while the DataGrid is in Edit Mode?
Here's a small bit of the code used to create the DataGrid if it helps:
<asp:DataGrid ID="dgCamsizer" CssClass="data" runat="server" AutoGenerateColumns="False"
GridLines="None" OnItemCommand="dgCamsizer_ItemCommand" ShowHeader="true">
<Columns>
<asp:TemplateColumn HeaderStyle-CssClass="infoHeaderDG">
<HeaderTemplate>
Operator</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Operator" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>'
runat="server" /></ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="EditOper" Width="40px" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>'
runat="server"></asp:TextBox></EditItemTemplate>
<HeaderStyle CssClass="infoHeaderDG"></HeaderStyle>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderStyle-CssClass="infoHeaderDG">
<ItemTemplate>
<asp:Button ID="Edit" Text="Edit" CommandName="Edit" runat="server" /></ItemTemplate>
<EditItemTemplate>
<asp:Button ID="Save" Text="Save" CommandName="Save" runat="server" /></EditItemTemplate>
<HeaderStyle CssClass="infoHeaderDG"></HeaderStyle>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Perhaps I should re-phase my question: I managed to 'find' the TextBoxes thanks to Zetlen. I've also managed to get the values. Now... How do I use those values to test for validation?
Here is the code I used to get the values:
$("#<%=dgCamsizer.ClientID %> :text").each(function () {
alert($(this).val());
});

ASP.NET webforms are hard to work with in JavaScript, because the IDs of your HTML elements change during the page lifecycle! The input you're calling "EditOper" will get an HTML ID of something like "dgCamSizer_ctl102_EditOper". One thing you can do is collect these elements on pageload in a cache of DOM element references. I recommend using jQuery or a similar DOM querying library.
<script type="text/javascript">
$(document).ready(function() {
var $editorElms = {},
idSeparator = "_"; // the underscore is ASP.NET's default ID separator, but this can be changed if you wish with the IDSeparator property.
$('#dgCamSizer input').each(function() {
$editorElms[this.id.split('_').pop()] = $(this);
});
// now you can access every input using the $editorElms hash.
// e.g.
function someValidationRoutine() {
if (!$editorElms.EditOper.val()) {
someErrorDisplayer("EditOper must not be blank.");
return false;
}
}
})
</script>
And, again using jQuery, the Save button shouldn't be too tough to find.
var $saveButton = $('#dgCamSizer :submit[value=Save]');
So you can bind the event that way:
$saveButton.click(function(e) {
if (!someValidationRoutine()) {
e.preventDefault();
}
});
This is not the most high-performance solution--selectors of that complexity are always a bit slower. But it gets the job done without messing too much with the DataGrid.

So I managed to solve my own problems and answer my own question. I was able to get the id's of all of the TextBoxes and I even placed them into an array to be used for my validations. Here's what I used to do all of this:
var i = 0;
var data = [];
$("#<%=dgCamsizer.ClientID %> :text").each(function () {
data[i] = $(this).attr("id");
i++;
});