I have 2 textboxes and a label on my page. The 2 textboxes will contain numeric values. The label text will be the product of the 2 textbox values. Is there a way to do this using JQuery so that the value can get updated when I edit the textboxes without having to do a postback?
Also the textboxes may contain values with commas in it: e.g. 10,000. Is there a way I can extract the number from this so that it can be used to calculate the label value.
Thanks in advance,
Zaps
I can't add comments to other answers yet, so I'll just post an update here.
The original question involved product, which means multiplication, so here's a version that allows for unlimited textboxes and completes the multiplication.
function makeInt(text) {
return parseInt(text.replace(',', ''));
}
$(function(){
//hook all textboxes (could also filter by css class, if desired)
//this function will be called whenever one of the textboxes changes
//you could change this to listen for a button click, etc.
$("input[type=text]").change(function(){
var product = 1;
//loop across all the textboxes, multiplying along the way
$("input[type=text]").each(function() {
product *= makeInt($(this).val());
});
$("#display-control-id").html(product);
});
});
$('#SecondTextbox').keyup(function() {
var t1 = $('#FirstTexbox').val();
var t2 = $(this).val();
var result = t1+t2;
$('#resultLabel').html(result);
});
This could do the trick, or you could have it on a click event with some link element. This would also not have any page refresh.
$('#checkButton').click(function() {
var t1 = $('#FirstTexbox').val();
var t2 = $('#SecondTextbox').val();
var result = t1+t2;
$('#resultLabel').html(result);
});
Link could be something like,
<a id="checkButton" title="Check your result">Check</a>
And with that you would have the css settings of 'cursor:pointer;' to make it seem a proper link.
Related
I have a created a gridview and added a checkbox in item template. This grid has few columns along with DataKey (primary key). Due to performance gain, this grid will fetch the next set of recrods on each page change based on the page number click. So that is done.
Now when user selects a checkbox in page one and then go to page 2 and coming back to page one, then user will not see the checkbox checked as the user did earlier.
So is there a good way to persist the checkbox when user move page to page?
This checkbox be used as a flag to select the rows that can be deleted later by a button outside the grid.
Since you receive a new set each time a paging is selected, I suggest the following approach:
Create an array[] object via javascript that will add to list the datakey whenever a checkbox is selected and in turn remove it if the checkbox is deselected. Something like this:
var selectedDataKeys = [];
$('.checkboxclass').on('change', function() {
// Considering you assign the data key as id for the checkbox otherwise implement a way to retrieve the id.
var dataKey = $(this).prop('id');
// Determine if the dataKey is in the selected data keys array
var isContained = (selectedDataKeys.indexOf(dataKey) > -1 );
if($(this).is(':checked')) {
// If is contained is false - add to the array
if (!isContained)
selectedDataKeys.push(dataKey);
} else {
// If is contained is true - remove to the array
if (isContained){
selectedDataKeys = $.grep(selectedDataKeys, function(value) {
return value != dataKey;
});
}
}
});
From this point on the client user will have an active list of selected items, now its up to you to use that list to manipulate your grid display page. Either modify the display on document ready by comparing all the item on the grid display with the selectedDataKeys array or sending those keys and do the comparison server side.
Hope this helps.
I have a grid I created in Gridx which lists a bunch of users. Upon clicking a ROW in the grid (any part of that row), a dialog pops up and shows additional information about that user and actions that can be done for that user (disable user, ignore user, etc.) - when one of these options is selected from the pop up, I want to DISABLE that row. The logic for getting the row, etc. I can take care of, but I can't figure out how to make a grid row actually "appear" disabled and how to make that row no longer clickable.
Is there a simple way to do this? If you aren't familiar with gridx, solutions that apply to EnhancedGrids or other Dojo grids are also appreciated.
Alright now that I have a little more information here is a solution:
Keep a list of all the rows you have disabled so far either inside the Grid widget or in its parent code. Then on the onRowClick listener I would write code like this:
on(grid, "onRowClick", function(e) {
if(disabledRows[rowIndex]) {
return;
}
// Do whatever pop up stuff you want and after
// a user selects the value, you can "disable"
// your row afterwards by adding it to the disabled
// list so that it can no longer be clicked on.
var rowIndex = e.rowIndex;
disabledRows[rowIndex] = true;
// This is just some random class I made up but
// you can use css to stylize the row however you want
var rowNode = e.rowNode;
domClass.add(rowNode, "disabled");
});
Note that domClass is what I named "dojo/dom-class". Hope this helps!
This is perhaps not exactly what you are seaching for:
If you want to hide one or more rows by your own filterfunction you could just add to these rows in the DOM your own class for nodisplay. Here I show you a function for display only those rows which have in a choiceable field/column a value inside your filterlist.
function hideRowFilter(gridId, fieldName, filterList)
{
var store = gridId.store;
var rowId;
store.query(function(object){
rowId = gridId.row(object.id,true).node();
if (filterList.indexOf(object[fieldName]) == -1)
domClass.add(rowId, "noDisplay"); // anzeigen
else
domClass.remove(rowId, "noDisplay"); // verstecken
});
}
CSS:
.noDisplay { display: none; }
So I can for example display only the entries with a myState of 3 or 4 with this call:
hideRowFilter(gridId, 'myState', [3, 4]);
Note that domClass is what I named "dojo/dom-class"
Basically I want that the Title field(Combo Box) should not allow me to enter more than 40 characters.
Can you provide any pointers?
I looks like the control itself does not have that functionality, so you will probably have to write your own version.
You could create a custom control to extend the ComboxBox control. Check out this blog post.
Another idea is to use jQuery to prevent more than 40 characters from being added to the input control the ComboBox control generates:
$(function() {
var comboxBoxControlInput = $("#<%=comboBoxControlId.ClientID%>$TextBox");
$(comboxBoxControlInput).keyup(function() {
limitLenth(this, 40);
});
});
function limitLength(control, length) {
var currentContent = $(control).val();
var currentLength = currentContent.length;
if(currentLength > length) {
$(control).val(currentContent.substr(0, length));
return false;
}
}
Unfortunately it's a bit hacky. You have to get the ClientID of the ComboBox control (<%=comboBoxControlId.ClientID%>) and then append $TextBox to the end in order for jQuery to select the correct control.
Edit:
Another way to select the correct input control is to do this:
$("#<%=comboBoxControlId.ClientId%>").find("input[type=text]");
This selects the first text input within the div the ComboBox control creates.
My applications sends emails to users, with a hyperlink for an aspx page. There is a guid in the get string. The aspx page shows gridview with rows across multiple pages.
My requirement is when the link is clicked the user should be directed to appropriate page and the row with mapping to guid should be highlighted?
Canavar has a point, but for a simple thing, you can take the load of the RowDataBound method and perform the hightlight at the end of the rendering.
Let's imagine (cause you did not provided any information regarding it - BTW, please give us always the most detailed version of a question) :)
GridView had 30 rows displayed and we need to hightlight the Row ID 22.
follow this steps:
1 - Add an HiddenField with
<asp:HiddenField ID="rowID" CssClass="rowids" Value='<%# Eval("YourROWID") %>' />
2 - Now that we have the row, all we need is, when the DOM is ready, loop trough all rows and hightlight the one that has the same Value to the selectrow that you mention in a comment
Are you using jQuery?
var selectedRow = '<%= Request["selectrow"] %>';
$(document).ready(function(){
$(".rowids").each( function() { // Get and Loop through all class=rowids elements
if( $(this).value() == selectedRow) {
// we found it! lets find the TR and add the highlight class to it
$(this) // the INPUT ELEMENT
.parent() // the TD element
.parent() // the TR element
.addClass("highlight"); // Add the class
}
});
});
if not using jQuery (you should though, cause I almost sure that you will re use it else where to improve more part in your code)
var selectedRow = '<%= Request["selectrow"] %>';
var arr = document.getElementsByTagName("input");
for (i = 0; i < arr.length; i++) { // Loop through all input elements
if( arr[i].className == "rowids" && arr[i].defaultValue == selectedRow ) {
// it's a rowids element and the value is the one we are looking out
var tableRow = arr[i].parentNode.parentNode; // get it's TR element
tableRow.className = tableRow.className + ' hightlight'; // Add the class
break; // no need to loop through more, we already found the one we are looking for
}
}
REMEMBER to add this in a script before the BODY tag, so it will be called when all elements are rendered in the page (DOM ready trick)
You can use JQuery for that.
$("a").click(function(){
$(this).effect("highlight", {}, 3000);
})
it would be something that simple. Hope it helps.
I have a hidden field on my page
<input runat="server" type="hidden" id="selectedIndex" />
and it is being set by this bunch of code, an onclick event to a gridview's row:
var gridViewCtlId = '<%=GridView.ClientID%>';
var selectedIndex = '#<%=selectedIndex.ClientID%>';
var itemVisible = '<%=ItemVisible.ClientID%>';
var gridViewCtl = null;
var curSelRow = null;
var previousRowIndx = null;
window.onload = function showQuery()
{
if ($(selectedIndex).val() != undefined)
{
if ($(selectedIndex).val() != '')
{
var prevRowID = $(selectedIndex).val();
var prevRow = getSelectedRow(prevRowID);
prevRow.style.backgroundColor = '#1A8CD4';
}
}
}
function getGridViewControl(rowIdx)
{
if (gridViewCtl == null)
{
gridViewCtl = document.getElementById(gridViewCtlId);
}
}
function onGridViewRowSelected(rowIdx)
{
if (document.getElementById(gridViewCtlId).disabled == false)
{
var selRowCCA = getSelectedRow(rowIdx);
if (curSelRow != null)
{
var previousRow = getSelectedRow(previousRowIndx);
var CountIdx = previousRowIndx % 2;
if (document.getElementById(itemVisible) == null)
{
if (CountIdx == 0)
{
previousRow.style.backgroundColor = 'Silver';
}
else
{
previousRow.style.backgroundColor = 'White';
}
}
}
if (null != selRow)
{
previousRowIndx = rowIdx;
curSelRow = selRow;
selRow.style.backgroundColor = '#1A8CD4';
}
}
}
function getSelectedRow(rowIdx)
{
getGridViewControl(rowIdx);
if (gridViewCtl != null)
{
$(selectedIndex).val(rowIdx);
return gridViewCtl.rows[rowIdx];
}
return null;
}
This is what happens: When The page first loads, the hidden field is undefined, which it should be. When I click on a row and then click the 'select' button which then calls this:
GridView.Attributes.Add("disabled", "true");
The gridview becomes disabled (along with the select button) and another gridview comes up (which should happen depending on what is seleted in the first gridview). So now, here is the problem. When I click on a row in the gridview (I'm only talking about the initial gridview, not the secondary one which comes up, that's not an issue here), and click select, everything gets greyed out and most of the time, the selected row will highlight when the page loads (the other times for some reason it defaults to row #2). Then, say you click on row 4 then click on row 1 and then click select, for some reason row 4 will remain highlighted and row 4's data will then populate the second gridview, like you never clicked row 1. But if I click row 4 then click row 1 then click row 1 again, does it save. Does anyone know why that happens?
Also, I'm pretty much trying to disable the first gridview when select is hit so I do
GridView.Attributes.Add("disabled", "true");
rather than
GridView.Enabled = false;
If a user re-clicks the search button (another button located previously on the page which makes this gridview become visible), I would like the secondary gridview to become hidden, and the primary gridview (this one in question) to become re-enabled. But doing
GridView.Attributes.Add("disabled", "false");
when the search button is fired only disables the gridview, which is very weird. Now I know that the disabled field is not supported by any other browser except IE, and i only use it because I need to check if the gridview is disabled so a user cant click on another row after they've made their selection (which happens if I dont do the following:
if (document.getElementById(gridViewCtlId).disabled == false)
So could anyone let me know of another way of accomplishing that task? Thanks again in advance.
Some bits of info on disabled:
Browsers won't send any disabled control's value to the server. This is by definition.
Disabled field is supported by other browsers, but it uses a different model. Note list of supported browsers: http://www.w3schools.com/tags/att_input_disabled.asp (also how it is defined disabled='disabled').
Also see how it compares to the read-only: http://www.w3.org/TR/html401/interact/forms.html#h-17.12.2
Also note according to the standard its support its limited to certain elements. This is important, as you are applying it at an unsupported html element, which is also a likely cause of it not working in other browsers in your scenario. You can disable the supported control by using an script, getting the controls to apply it like $get("someClientID").getElementsByTagName("input");