Not sure what i am doing wrong here but I have a webpage which has a usercontrol wrapped in an update panel. This usercontrol has a gridview with a textbox in an ItemTemplate and a textbox in a footer template. The textbox in the footertemplate is supposed to get the calculated value from a function in jquery. Below is my script to get the total but the total doesn't get calculated. Please advise what am I doing wrong here. Also, let me know if I need to provide additional information. This script is in the master page. I tested to make sure jquery is working by putting the alert after the document ready which it works. Any help would be greatly appreciated.
<script language="javascript">
var totalQuantity = 0;
$(document).ready(function() {
//alert('This is test');
$(document).on('blur', 'input[id^="MainContent_MainContent_ucProjectionSet3_upProjections"]', function() {
alert('This is test');
totalQuantity = 0;
$('input[id^="MainContent_MainContent_ucProjectionSet3_gvProjections_txtCurrentTime_"]').each(function(index) {
doTotalCal($(this).attr("id"));
});
});
function doTotalCalc(_id) {
var indexVal = _id.Replace("MainContent_MainContent_ucProjectionSet3_gvProjections_txtCurrentTime_", "");
console.log(indexVal);
var strTotalQuantity = $('input[id^="MainContent_MainContent_ucProjectionSet3_gvProjections_txtCurrentTime_' + indexVal + '"]').val().replace("$", "");
totalQuantity += Number(strTotalQuantity);
}
$("#MainContent_MainContent_ucProjectionSet3_gvProjections_lblCurrentTimeTotal").html(totalQuantity);
});
</script>
I was able to accomplish this without using update panel. I didn't need to have an asynchronous postback for this project, so removing it was a fine option in making the jquery to work.
<script type="text/javascript">
$(document).ready(function() {
$("[id*=gvProjections]input[type=text][id*=txtCurrentTime]").keyup(function(e) {
GrossTotal();
});
});
var gross;
function GrossTotal() {
gross = 0;
$("[id*=gvProjections]input[type=text][id*=txtCurrentTime]").each(function(index, item) {
gross = gross + Number($(item).val());
});
$("[id*=gvProjections][id*=lblCurrentTimeTotal]").text(gross);
}
function isNumberDecimalKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode == 46) //decimal
return true
else if (charCode > 57 || (charCode > 31 && charCode < 48))
return false;
else
return true;
}
Related
In a form, I have a spin edit control like this:
formLayoutSettings.Items.Add(i =>
{
i.FieldName = "FieldA";
i.NestedExtension().SpinEdit(s =>
{
s.Properties.MinValue = 1;
s.Properties.MaxValue = 9999999999999;
s.Properties.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithTooltip;
s.Properties.ClientInstanceName = "seFieldA";
s.Properties.Increment = 10;
s.ShowModelErrors = true;
s.Width = Unit.Percentage(100);
s.Properties.AllowMouseWheel = false;
s.Properties.ClientSideEvents.KeyDown = "OnFieldAKeyDown"; // This is the event heandeler
});
});
And the function:
function OnFieldAKeyDown(s, e) {
if (e.htmlEvent.keyCode == 38 || e.htmlEvent.keyCode == 40) {
ASPxClientUtils.PreventEventAndBubble(e.htmlEvent); // this doesn't work
ASPxClientUtils.PreventEvent(e.htmlEvent); // this either
}
}
My aim is to prevent the spin edit control value from changing when the user presses the Up key or Down keys. When I debug this, the if test inside the OnFieldAKeyDown works but PreventEventAndBubble and PreventEvent fails miserably. Also, is there any other way to do this with jquery ??
Thanks.
AFAIK, there is a workaround to prevent a user incrementing/decrementing SpinEdit value using up/down arrow keys without using PreventEvent or PreventEventAndBubble. When there's no public method available on JS side, you can try restore SpinEdit previous value in KeyDown event handler like this:
<script type="text/javascript">
function OnFieldAKeyDown(s, e) {
if (e.htmlEvent.keyCode == 38 || e.htmlEvent.keyCode == 40) {
// check if ASPxClientSpinEdit exists
if (typeof ASPxClientSpinEdit !== "undefined") {
ASPxClientSpinEdit.prototype.OnPageOrArrowKeyDown = function() {
// when user tries either increment or decrement, it returns last value instead
if (s.GetValue() != s.lastChangedValue) {
s.SetValue(s.lastChangedValue);
}
// if spinedit's minimum & maximum values also affected, set current limit
else {
s.maxValue = ASPxClientSpinEdit.MaxValue;
s.minValue = ASPxClientSpinEdit.MinValue;
}
}
}
}
}
</script>
Combine this function with jQuery may possible, any suggestions welcome.
Reference: https://www.devexpress.com/Support/Center/Question/Details/Q254514
i'm doing a search function on a gridview with Jquery
i am able to hide the grid when entering text in the search box but the code does not validate the text on the gridview making it not able to search the rows
my gridview is edited and can be selected to display a datalist so i'm not very sure how to make it work
$(document).ready(function () {
$('#<%=lblNoRecords1.ClientID%>').css('display','none');
$('#<%=Button2.ClientID%>').click(function(e){
$('#<%=lblNoRecords1.ClientID%>').css('display','none');
$("#<%=GridView1.ClientID%> ").hide();
var iCounter = 0;
var sSearchTerm = $('#<%=SearchBox1.ClientID%>').val();
if (sSearchTerm.length == 0){
$("#<%=GridView1.ClientID %> tr:has(td)").show();
return false;
}
$("<%=GridView1.ClientID%> tr:has(td)").children().each(function(){
cellText = $(this).text().toLowerCase();
if(cellText.indexOf(sSearchTerm.toLowerCase()) >=0){
$(this).parent().show();
iCounter++;
return true;
}
});
if(iCounter == 0)
{
$('#<%=lblNoRecords1.ClientID%>').css('display','');
}
e.preventDefault();
})
})
</script>
I am pulling out my hair on this one for far too long now. Hopefully you guys can help out.
I have a form that allows a user to add "My Personal Skills" from the "Skills" list.
I have done the "Plus button (+)" and Minus button (-) code using the jQuery as below:
<script language="javascript" type="text/javascript">
function AddItSkills() {
var selectedOptions = jQuery('#<%=ListITProgramming.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move.");
return false;
}
if (selectedOptions.length == 1) {
if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
}
else {
jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
}
}
else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListMyITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListMyITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
jQuery(selectedOptions).remove();
return false;
}
function RemoveITSkills() {
var selectedOptions = jQuery('#<%=ListMyITProgramming.ClientID %> option:selected');
if (selectedOptions.length == 0) {
alert("Please select option to move.");
return false;
}
if (selectedOptions.length == 1) {
if (jQuery("#<%=ListITProgramming.ClientID %> option[value='" + selectedOptions.val() + "']").length > 0) {
}
else {
jQuery('#<%=ListITProgramming.ClientID %>').append(jQuery(selectedOptions).clone());
}
}
else if (selectedOptions.length > 1) { jQuery(selectedOptions).each(function () { if (jQuery("#<%=ListITProgramming.ClientID %> option[value='" + this.value + "']").length > 0) { } else { jQuery('#<%=ListITProgramming.ClientID %>').append(jQuery(this).clone()); } }); }
jQuery(selectedOptions).remove();
return false;
}
In this scenario, "Skills" are bounded from the database and "My Personal Skills" are empty. The user adds the "Skills" into "My Personal Skills" and click on the Save button.
In c# code behind, I'm not able to get items list from "My Personal Skills" because they are added via jQuery.
Can you anyone give me the guidance to get "My Personal Skills" items in c# code behind?
Hidden fields will be the silver bullets here.
step1. add a asp hiddenfield to your page lets say hf1 is its id.
step2. add a clientclick event to your save button
step3.in the client clickevent get all personal skill and make them into a single string using comma or '|'
step4. set the hf1 value to the string generated by step3 and then post it.
step 5.On the server side get the value of the hf1 which will be the same string generated in 3rd step.
step6. deserialize it and //do any thing you want.
hope this help
I have a textbox in web form(asp.net). when user already keyin data, then they will press Enter key, so that the data will be update to database.
Is there any way possible to perform this?
function InitTextBox() {
//var _txt = $('#<%= txt.ClientID%>'); or
var _txt = $('input:[id*="txtId"]');
if (_txt.length < 1) return;
_txt.get(0).autocomplete = 'off';
_txt.on('keydown', function (evt) {
var _self = $(this);
event = evt ? evt : window.event;
if (event.keyCode == 13) {
if ($.browser.msie)
{ event.cancelBubble = true; event.returnValue = false; }
else { event.preventDefault(); }
if (_self.val().length > 0 && _self.val().match(/^\s*$/) == null)
__doPostBack(_self.attr('name'), '');
}
});
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(InitTextBox);
And set autopostback for textbox to false, please
Dino Esposito had wrote about this a while back. You wouldn't necessarily need a custom control, but can use his JavaScript.
If you have a control wrapped around a Panel, and you have the DefaultButtonID property set, the panel will trigger a postback on enter too by clicking the desired button specified by the ID. That's another way.
I am having a problem with disabling DropDownList based on the chice of 1st DropDownList, there is no post back occuring, and it is a template based web app here is the current code:
<script type="text/javascript">
$(function() { var dropDownList1 = $('#<%= ddlUserType.ClientID %>');
var dropDownList2 = $('#<%= ddlMember.ClientID %>'); dropDownList1.change(function(e) {
if ( jQuery("#ddlUserType").val() != "ETOC") dropDownList2.removeAttr('disabled'); e.preventDefault();
else
dropDownList2.removeAttr('enabled'); e.preventDefault(); }
} );
</script>
what is happening now is page is blank and if I remove the above code everything shows, where I am going wrong.
here is the plain and final javascript code which worked:
<script language="javascript">
function CheckDropDownState(lstbox)
{
if (lstbox.selectedIndex == 3) { document.forms[0].ddlMember.disabled = 1; }
else { document.forms[0].ddlMember.disabled = 0; }
}
</script>
and thew .aspx code:
<asp:dropdownlist id="ddlUserType" runat="server" onclick="CheckDropDownState(this);"></asp:dropdownlist>
Once again appreciate the help guys.
I've tried cleaning your code a little bit:
$(function() {
var dropDownList1 = $('#<%= ddlUserType.ClientID %>');
var dropDownList2 = $('#<%= ddlMember.ClientID %>');
dropDownList1.change(function(e) {
var selectedValue = $(this).val();
if (selectedValue != 'ETOC') {
// enable the second combo if the value selected in the first combo
// is not ETOC
dropDownList2.removeAttr('disabled');
} else {
dropDownList2.attr('disabled', 'disabled');
}
e.preventDefault();
}
});