Develop Reference

How to change text for a Button with jQuery in ASP.NET

I tried this code on jQuery to change the btn text when I click on a span that opens a modal to add a ShipWay.
$(document).ready(function () {
$("#spanOpen").click(function () {
$("#fulldiv").fadeIn(1000);
$('#titleModal').text('הוספת שלוחה');
$("#ContentPlaceHolder1_btnAddShip").prop('value', 'הוסף');
$('#ContentPlaceHolder1_txtShipName').val('');
$('#ContentPlaceHolder1_txtShipPrice').val('');
$('#ContentPlaceHolder1_txtShipStart').val('');
$('#ContentPlaceHolder1_txtShipEnd').val('');
$('#ContentPlaceHolder1_txtShipPremium').val('No');
});
$(".close").click(function () {
$("#fulldiv").fadeOut(500);
});
});
function UpdateClick(btn)
{
$("#fulldiv").fadeIn(1000);
var row = btn.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
$('#ContentPlaceHolder1_txtShipName').val(row.cells[6].innerHTML);
$('#ContentPlaceHolder1_txtShipPrice').val(row.cells[5].innerHTML);
$('#ContentPlaceHolder1_txtShipStart').val(row.cells[4].innerHTML);
$('#ContentPlaceHolder1_txtShipEnd').val(row.cells[3].innerHTML);
$('#ContentPlaceHolder1_txtShipPremium').val(row.cells[2].innerHTML);
$('#titleModal').text('עדכן שלוחה');
$("#ContentPlaceHolder1_btnAddShip").prop('value', 'עדכן');
return false;
}
This is the button I use in my html for Add/Update the row:
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text=""
CssClass="btn" OnClick="btnAddShip_Click" />
When I tried to check his text in the code behind he said that he have nothing like = "".
This is my code in the C#
In the first if I want to ask if the text of the button is Add
and if not it will be Update in the else
the code go for WebService and to Xml
I tried the code he works well I just need that if will work perfect
because I don't want to create another button
ElectricWSL.Ship ship = new ElectricWSL.Ship();
ship.ShipName = txtShipName.Text.Trim();
ship.ShipPremium = txtShipPremium.Text.Trim();
ship.ShipPrice = double.Parse(txtShipPrice.Text);
ship.ShipStartTime = txtShipStart.Text.Trim();
ship.ShipEndTime = txtShipEnd.Text.Trim();
if (btnAddShip.Text == "הוסף")
{
ws.WSLAddShip(ship);
ShowXMLGrid();
}
else
{
int rowIndex = GetRow(txtShipName.Text);
ws.WSLUpdateShip(ship, rowIndex);
ShowXMLGrid();
}

Answering one of your point in details when i tried to check his text in the code behind it contains like =""
Button text is empty in code because
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text=""
CssClass="btn" OnClick="btnAddShip_Click" />
Add some text to it like
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text="Add"
CssClass="btn" OnClick="btnAddShip_Click" />
And get it in code behind like
if (btnAddShip.Text == "Add")
{
ws.WSLAddShip(ship);
ShowXMLGrid();
}
else
{
int rowIndex = GetRow(txtShipName.Text);
ws.WSLUpdateShip(ship, rowIndex);
ShowXMLGrid();
}

how to get the client id of Text box inside the grid using JavaScript?

i have a editable Gridview(containing 7 editable fields/textbox in each row) in which i have a text box and i am
calling JS function but i am not getting the client id if the text box
inside Grideview is there any way to do it ?
GEIDVIEW ->
<asp:TemplateField> <EditItemTemplate>
<asp:TextBox ID="txCTFact" runat="server" Text='<%# Eval("CT_Factor") %>' Width="50px" onchange="validateCTfactor(this);" />
</EditItemTemplate>
</asp:TemplateField>
JS locally i was doing it by
text = document.getElementById('GridSubMeter_' + v + '_txCTFact').value;
but in different browser it's getting different client id is there any
generic way.
function validateCTfactor(val) {
var v = val.id.split('_')[1];
var text = document.getElementById('GridSubMeter_' + v + '_txCTFact').value;
var re = new RegExp("^[0-9]+(\.[0-9]{1,1})?$");
if (re.test(text)) {
return true;
}
else {
alert("Required Field with Only numbers allowed with 1 decimal place in CT Factor");
return false;
}
}

function validateCTfactor(val)
{
var text = val.value;
var re = new RegExp("^[0-9]+(\.[0-9]{1,1})?$");
if (re.test(text))
{ return true; }
else
{
alert("Required Field with Only numbers allowed with 1 decimal place in CT Factor");
return false;
}
}
You can directly fetch the value of textbox by val.value. No need for it's id.
For getting id of each textbox inside grid:
$("#gridId input:text").each(
function ()
{
alert ($(this).prop("id"));
}
);

Looping RadGrid item in clientside

There is a radgrid with one of the column as checkbox in
itemtemplate.
I want to loop through this radgrid's items. And based on each item's checkbox.checked condition, enable a seperate button control.(in client-side using javascript)
I've deviced code for this, but it is not giving the desired output.
What's wrong in this please.
Javascript:
<telerik:RadScriptBlock ID="scriptBlock1" runat="server">
<script type="text/javascript">
function checkRestrictionAcceptance()
{
var masterTable = $find("<%=RGGroupedCartRestrictedAssets.ClientID%>").get_masterTableView();
var count = masterTable.get_dataItems().length;
var checkbox;
var item;
for (var i = 0; i < count; i++)
{
item = masterTable.get_dataItems()[i];
checkbox = item.findElement("AcceptedCheckbox");
alert(checkbox.checked);
if (checkbox.checked)
{
var DownloadButton = document.getElementById('DownloadButton');
DownloadButton.enabled = false;
}
}
}
</script>
</telerik:RadScriptBlock>
Aspx:
<telerik:RadGrid ID="RGGroupedCartRestrictedAssets" runat="server" DataSourceID="CslaDSGroupedCartRestrictedAssets" AutoGenerateColumns="False"
GridLines="None" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" EnableEmbeddedSkins="false">
<MasterTableView DataSourceID="CslaDSGroupedCartRestrictedAssets" DataKeyNames="RestrictionText">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<asp:Checkbox ID="AcceptedCheckbox" runat="server" />
</ItemTemplate>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:Button ID="DownloadButton" runat="server" Text = "Test" OnClientClick ="checkRestrictionAcceptance();"/>

You need to specify the clientID of the DownloadButton
var DownloadButton = document.getElementById('<%=DownloadButton.ClientID%>');

I'm not sure which browser you're using, but I think that using the 'i' directly in get_dataItems() can be problematic with Firefox. Your code worked fine for me in IE10 using Telerik.Web.UI 2013.3.1324.45 - I am getting the value of checkbox.checked. Try this instead though, it might help:
function checkRestrictionAcceptance() {
var masterTable = $find("<%=RGGroupedCartRestrictedAssets.ClientID%>").get_masterTableView();
var count = masterTable.get_dataItems().length;
var checkbox;
var items = masterTable.get_dataItems();
for (var i = 0; i < count; i++) {
checkbox = items[i].findElement("AcceptedCheckbox");
alert(checkbox.checked);
if (checkbox.checked) {
var downloadButton = document.getElementById('<%=DownloadButton.ClientID%>');
downloadButton.enabled = false;
}
}

How to Postback with radconfirm window with RadContextMenu?

I have the code as below ,
For ASPX-->
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicking="onClientContextMenuItemClicking"
OnItemClick="RadContextMenu1_ItemClick" OnInit="RadContextMenu1_OnInit">
<Items>
<telerik:RadMenuItem Value="AddNick" Text="" />
<telerik:RadMenuItem Value="Edit" Text="" />
<telerik:RadMenuItem Value="Delete" Text="" Font-Bold="true" />
</Items>
</telerik:RadContextMenu>
Javascript -->
var allowPosback = false;
function confirmCallBackFn(arg, eventArgs) {
if (arg) {
allowPosback = true;
}
}
function onClientContextMenuItemClicking(sender, eventArgs) {
var item = eventArgs.get_item();
item.get_menu().hide();
switch (item.get_value()) {
case "Delete":
var message = "Delete"
var event = "event";
var width = 300;
var height = 100;
var title = "Want To Delete";
radconfirm(message, confirmCallBackFn, width, height, null, title);
eventArgs.set_cancel(allowPosback);
break;
}
}
control is RadContextMenu not postback after confirm clicking why it is not having post back. Any help would be great ?

I think you've misunderstood how the radconfirm box works. I've recently answered a similar question (Strange behavior of confirmation in Telrik ?) which should help you re-write the code above to work properly.
Also you might find the following link useful (also posted at end of other answer): http://demos.telerik.com/aspnet-ajax/window/examples/confirmserverclicks/defaultcs.aspx.

mixing my jquery with an onclick event also tied to a SelectedIndexChanged event

The issue is that no post back occurs. I noticed that if I returned true this would not be the be case .. however there were non-deterministic results so I am at a loss.
Any help appreciated!
<DropDownList ID="ddlS1" runat="server" onclick = "checkHighDegreeCompliance(this, 1);" SelectedIndexChanged = "ddlS1_SelectedIndexChanged" AutoPostBack="true" >
Here is the markup on the actual page after loading
<select name="rptrSection1$ctl00$rptrSection2$ctl00$ddlS2" class="DDLSelector2 SDropDown IsNormal" id="rptrSection1_ctl00_rptrSection2_ctl00_ddlS2" style="width: 200px;" onchange="checkHighDegreeCompliance(this, 2);setTimeout('__doPostBack(\'rptrSection1$ctl00$rptrSection2$ctl00$ddlS2\',\'\')', 0)">
Here is the javascript
function checkHighDegreeCompliance(obj, sectionNum)
{
var parDdl = $(obj);
var parCompLev = parDdl.attr('selectedIndex');
var pnlDiv = parDdl.parents('.Section');
var ddls = pnlDiv.find('.DDLSelector' + (sectionNum + 1));
ddls.each(function ()
{
var childDDL = $(this);
var childComLev = childDDL.attr('selectedIndex');
if (childComLev > parCompLev)
{
parDdl.attr('selectedIndex', childComLev);
}
if (sectionNum < 4)
{
checkHighDegreeCompliance(childDDL, ++sectionNum);
}
});
}

try with return keyword before the onclick event
<DropDownList ID="ddlS1" runat="server" onclick = "return checkHighDegreeCompliance(this, 1);" SelectedIndexChanged = "ddlS1_SelectedIndexChanged" AutoPostBack="true" >
Let me know if it not worked.