We Keep Coding

How to pass Javascript value to label server side

I have a gridview that contains two(2) ASPxComboBox the value of the second Combo box is base on the value of the first combo box. DevExpress demos and sample are a bit complicated and time consuming so I think of a workaround that when the selected item of combo box is exchange the value will store in a label. And I will get the value of label to store in dropdown. But I don't know how to pass the value of label in server side. Any help would be much appreciated. Thank you!
Here's my code.
FrontEnd
<asp:Label ID="LblProduct" runat="server" Text="Label"></asp:Label>
<dx:ASPxGridView ID="ASPxGridView2" OnRowDataBound="ASPxGridView2_RowDataBound" ClientInstanceName="GridV" runat="server" AutoGenerateColumns="False" DataSourceID="forprod" KeyFieldName = "ppdtl_no">
<columns>
<dx:GridViewDataTextColumn FieldName="fld_product" Name="Dd_product" ShowInCustomizationForm="true" VisibleIndex="3">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxProduct" runat="server" DataSourceID="pp_prod" TextField="pp_ppname" ValueField="pp_ppcode">
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnProductChanged(s); }"></ClientSideEvents>
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataComboBoxColumn FieldName="fld_type" Name="dd_type" ShowInCustomizationForm="true" VisibleIndex="4">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxType" runat="server" DataSourceID="pp_type" TextField="pp_codetype" ValueField="pp_codetype">
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataComboBoxColumn>
</columns>
</ASPxGridView>
JavaScript
function OnProductChanged(s, e) {
var selected_index = s.lastSuccessValue;
var aa = document.getElementById('LblProduct').innerText = selected_index;
}
onload = OnProductChanged;

You need to use the ClientID property of any element you run at server level in your selector. To achieve this, you have to write the JavaScript inside the file with your label, and then use <%= LblProduct.ClientID %>.
<script type="text/javascript">
document.getElementById('<%= LblProduct.ClientID %>');
</script>
Look at your project during runtime with Inspect - you will see the ID after compilation is not LblProduct, but something similar to ProjectName_PageName_ContentPlaceHolderName_LblProduct.
You could also just copy-paste that, though it's not open to change.

Changing Tabs with AspxPageControl

I have a problem about changing tabs in my AspxPageControl.I use this tool for showing my web pages dynamically. When I change my active tab, the old tab vanishes. I searched a bit and found this problem can be fixed with saving states in cache or session.
However I am really rookie about developing web apps. How can I do that ? I also used jquery ui on my project but it didn't work. So I changed my project with this tool. Also I could take advice about tabpages that have dynamic webpages in.
This button basicly adds a new page on my tab and set active page this tab:
protected void bt_yeniEklenenler_Click(object sender, EventArgs e)
{
YeniEklenen_count= YeniEklenen_count + 1;
TabPage tab = new TabPage();
tab.Text = "Yeni Eklenenler";
tab.Name = "tab_yenieklenenler" + YeniEklenen_count.ToString();
LiteralControl l = new LiteralControl("<iframe src='YeniEklenenler.aspx' runat='client' id='frm2' style='width: 99 %; height: 78vh; margin - top:20px'></ iframe >");
l.ID = "lit_yenieklenenler" + YeniEklenen_count.ToString();
tab.Controls.Add(l);
ASPxPageControl1.TabPages.Add(tab);
ASPxPageControl1.ActiveTabPage = ASPxPageControl1.TabPages.FindByName(tab.Name);
}
And my design source:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager runat="server" ID="ScriptManager1">
</asp:ScriptManager>
<asp:Button ID="bt_yeniEklenenler" runat="server" OnClick="bt_yeniEklenenler_Click" Text="Yeni Eklenenler" OnClientClick="ButtonClick();" />
<asp:Button ID="bt_kampanya" runat="server" Text="Kampanya" OnClick="bt_kampanya_Click" />
<asp:Button ID="bt_fiyatListesi" runat="server" Text="Fiyat Listesi" OnClick="bt_fiyatListesi_Click" />
<asp:Button ID="bt_sepetim" runat="server" Text="Sepetim" OnClick="bt_sepetim_Click" />
<asp:Button ID="bt_siparisListesi" runat="server" Text="Sipariş Listesi" OnClick="bt_siparisListesi_Click" />
<asp:Button ID="bt_firmaBilgileri" runat="server" Text="Firma Bilgileri" OnClick="bt_firmaBilgileri_Click" />
<asp:Button ID="bt_cariHareket" runat="server" Text="Cari Hareket" OnClick="bt_cariHareket_Click" />
<asp:Button ID="Button2" runat="server" OnClick="Button1_Click" Text="KAPAT" />
<dx:ASPxPageControl runat="server" ActiveTabIndex="0" RenderMode="Lightweight" Width="1146px" Height="555px" ID="ASPxPageControl1" OnActiveTabChanged="ASPxPageControl1_ActiveTabChanged" AutoPostBack="True">
<TabPages>
<dx:TabPage Text="Ana Sayfa">
<ContentCollection>
<dx:ContentControl runat="server" SupportsDisabledAttribute="True">
<h1 style="text-align:center">_____ SİSTEMİNE HOŞGELDİNİZ...</h1>
<h1 style="text-align:center"> </h1>
<h1 style="text-align:center">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="KAPAT" />
</h1>
</dx:ContentControl>
</ContentCollection>
</dx:TabPage>
</TabPages>
</dx:ASPxPageControl>
</ContentTemplate>
</asp:UpdatePanel>
Note: I tried turn on AutoPostBack also, but then my tab don't change when I click another tab.
Thanks in advance :)

Refer these:
ASPxPageControl - how to add a new page using Client-Side Scripts
ASPxPageControl - How to add tab on client side
AspxPageControl add tabpage dynamically
You can try adding a tab page using the javascript(client side methods) and after that you can set the active tab. Try using the the client side ASPxClientTabControlBase.SetActiveTab method
ASPxPageControl how to ActiveTabChanged event after client side event to get data first
ASPxPageControl clientside event ActiveTabChanged
ASPxPageControl - How to set an active tab on the client-side
Hope these help you to implement the functionality as you want to do.

Enable button after an item in ListBox is selected

At the moment I'm using
<asp:ListBox ID="UserListBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
the button is disabled by default and after the OnSelectedIndexChanged is fired I am executing this behind.
protected void UserListBox_SelectedIndexChanged(object sender, EventArgs e)
{
loginBtn.Enabled = true;
}
This is causing the site to reload. I don't want that, instead I need javascript but I'm not familiar.

#Marco's answer is definitely more in-line with what you're looking for in the Web Forms world, but if you're set on using JavaScript start with:
document.getElementById("loginBtn").disabled = true;
This assumes that you've given your login button a fixed ID and ASP.NET isn't automatically assigning something crazy.
You'll have to remove the server-side event handler UserListBox_SelectedIndexChanged and replace it with a JavaScript event handler, otherwise the button will be disabled by JavaScript, but then the page will reload and undo the disable. If you had any other server-side code in that method it would need to find a new home, or you'd have to start really hacking at it.
Reasons like this are why it's nice to be able to stick with a single paradigm - do either server-side Web Forms work or client-side JavaScript. Avoid mixing & matching unless absolutely necessary - it's doable, but there will be tears and long nights.

Solution using javascript:
<script>
function checkSelect() {
if (document.getElementById('<%=UserListBox.ClientID %>').value != '')
document.getElementById('<%=loginBtn.ClientID %>').disabled = false;
}
</script>
just before </asp:content> also my list box now is:
<asp:ListBox ID="UserListBox" runat="server" onchange='checkSelect(this);'></asp:ListBox>

A usefull way to solve it is use update panels:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListBox ID="UserListBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
</ContentTemplate></asp:UpdatePanel>
....
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListBox ID="loginBtn" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UserListBox" EventName="SelectedIndexChanged" />
</Triggers></asp:UpdatePanel>

Hi you can simply use jquery to achieve the same, please consider below example
<div>
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
<asp:ListItem Text="Guava" Value="4"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
<asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" Enabled="false"/>
</div>
and register change event of select list in $(document).ready event of jquery like shown below
<script type="text/javascript">
$(document).ready(function () {
$('select[id*=ListBox1]').change( function () {
if($('select[id*=ListBox1] :selected').length >0)
$('#<%= btnLogin.ClientID%>').prop('disabled', false);
else
$('#<%= btnLogin.ClientID%>').prop('disabled', true);
});
});
</script>
comment for any problem, Enjoy !!

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?

Retrieve previous and next rows in a table using jQuery

I am using ASP.NET to create a page with a GridView that is very editable for the end user. Basically, all rows contain TextBoxes (instead of static text) which the user can edit whenever he wants. No postback occurs ever, except when he clicks the Save button on the bottom of the page. Then, I loop through each row in the grid, retrieve the values in the controls in each row and save them back to the database.
I am now trying to implement swapping two rows (to move a row up or down) in Javascript, and for that I need some way to retrieve the previous and next rows in a table.
At the moment my GridView contains a HiddenField as the first column, which contains the unique Id of the data item (I need this to store it back to the database of course). For other purposes (deleting a row) I have figured out how to retrieve this Id, which is this:
var itemHf = $(this).parent().parent().parent().find(':input');
There's so many 'parent' calls because this happens in the click event of an Image, which is inside a LinkButton, which is inside the last column of my grid. So the first parent is the LinkButton, the next is the table cell, and finally the table row. Then, I suppose the find(':input') function returns the first input element in this row (which in my case is the hidden field that contains the id).
So, using the same method I can get the current row:
var row = $(this).parent().parent().parent();
But how do I get the previous and next rows?
Also, once I have those rows, I will need to retrieve values from more input elements. I know I can find the first one using find(':input'), but how do I find the second and the third input elements in this table row?
EDIT
I don't have any html at this time but here is the ASP.NET markup for the grid:
<asp:GridView runat="server" ID="grid" AutoGenerateColumns="False"
onrowcommand="grid_RowCommand" onrowdeleting="grid_RowDeleting">
<Columns>
<!-- Move Up button -->
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" OnClientClick="return false;">
<asp:Image ImageUrl="~/Images/moveUp.png" AlternateText="moveUp" runat="server" CssClass="moveUp" ID="moveUp" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<!-- Move Down button -->
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" OnClientClick="return false;">
<asp:Image ImageUrl="~/Images/moveDown.png" AlternateText="moveDown" runat="server" CssClass="moveDown" ID="moveDown" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<!-- ID Hidden Field -->
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "Id") %>' />
</ItemTemplate>
</asp:TemplateField>
<!-- Name textbox field -->
<asp:TemplateField HeaderText="Naam">
<ItemTemplate>
<asp:TextBox runat="server" Width="200px" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>' />
</ItemTemplate>
</asp:TemplateField>
<!-- Price textbox field -->
<asp:TemplateField HeaderText="Prijs">
<ItemTemplate>
<asp:TextBox runat="server" Width="50px" Text='<%# DataBinder.Eval(Container.DataItem, "Price") %>' />
</ItemTemplate>
</asp:TemplateField>
<!-- Delete button -->
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" OnClientClick="return false;">
<asp:Image ImageUrl="~/Images/delete.png" AlternateText="delete" runat="server" CssClass="delete" ID="delete" />
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And here is an example of the jQuery I'm using:
$(document).ready(function () {
$('table td img.delete').click(function () {
var id = $(this).closest('tr').find(':input').val();
alert(id);
});
});

You can access the row by doing this:
var row = $(this).closest('tr');
Now that you have the row, you can get the next/pre row by doing this:
var next = row.next();
var prev = row.prev();
To switch the rows around, you can use .detach() and .appendTo()

I figured it out. Once I got a row (either the current row or the previous row), I can find the first input element using the same format as before. Then I can find the closest cell ('td'), call next() on that and then find the first input element again:
var row = $(this).closest('tr');
var idInput = row.find(':input');
var nextInput = idInput.closest('td').next('td').find(':input');
There might be a better way, but this works so I'm happy with it for now.
Thanks for your help, for some reason I can never quite grasp the concepts of jQuery...

As far as I understand your post var row = $(this).parent().parent().parent(); could be replaced with
var row = $(this).parents("tr");
Furthermore var itemHf = $(this).parent().parent().parent().find(':input'); would probably better be expressed as
var itemHf = $(this).parents('tr').find('input:first');
So, to get the previous row you would use
var prevHf=$(this).parents('tr').prev().find('input:first');
and the next row would be
var nextHf=$(this).parents('tr').next().find('input:first');