My ASP .Net page has a repeater that is loaded from AJAX. This AJAX page repeater has a column of checkboxes. The repeater is inside a html table.
<input id="chkOptionSelected" runat="server" enableviewstate="false"
type="checkbox" data-bind="click: Add" />
On the main page, I have a label whose value is computed by a JavaScript function. My view model:
function VM() {
var self = this;
self.totalSqft = ko.observable(TotalSqFt);
self.Add = function () {
self.totalSqft(TotalSqFt);
return true;
};
}
ko.applyBindings(new VM());
TotalSqFt is a global variable. The label is:
<asp:Label ID="lblTotalSqFt" runat="server" ClientIDMode="Static" data-bind="text: totalSqft"></asp:Label>
The click event computes the new total in a javascript function. All the view model needs to do is update the label with the new value.
What am I doing wrong? Is it because the checkbox is inside of AJAX content? I can see it all in the view source.
like #Jeroen said, asp:Lable will processed by server and render differently at client side.
so instead you can use normal html label and use runat="server" if you want to access it at server
check this working demo http://jsfiddle.net/91mek1tk/
The direct cause of your issue is most likely that data-bind on an asp:Label is not rendered. You would need to call Attributes.Add or something similar to add it.
Having said that, you're mixing Webforms and client-side heavy tech like KnockoutJS in a way that will probably negate the advantages you'd get from using KO, or worse cause lots of inconvenient cases like the one you're having now. I suggest either moving away from asp controls to more html-oriented controls (like you did with the first input tag), or dropping KO in favor of other, simpler client side technology (which seems more appropriate anyways, since you're currently using KO merely to handle clicks, whereas it excels mostly at two-way data-binding tasks).
Try this for your javascript function:
function VM() {
var self = this;
self.totalSqft = ko.observable("totalSqft");
self.Add = function () {
self.totalSqft("totalSqft");
return true;
};
}
ko.applyBindings(new VM());
Thank you, JAG. I tweaked the demo and got it working. I had val instead of text for my label in one of the lines and hence was not seeing the reflected value. It's working now. Thanks, everyone.
Related
I have an FileUpload control on a page. I need to change some values based on the filename once a user selects a file. I'm trying to find out the best way to do this. The only option I can see is listening in JavaScript for a change event and then either..
a) forcing a post back and updating the form
b) updating things on the client side using JavaScript and some back end async calls.
Is there any other options and if not which of this is preferable?
Thanks
If you are using jquery, you can attach a function to the change of the file upload.
Consider the following example html:
<input id="myFile" type="file">
<p><label id="myLabel">No File</label></p>
And let's say we wanted to update the label with the name of the selected file. To do that, we'd use the following javascript:
$(document).ready(function () {
$("#myFile").change(function () {
$("#myLabel").html($(this).val());
});
});
Here's a fiddle in action: http://jsfiddle.net/ffkuL/1/
If you aren't using jquery, you can do something like this:
var upload = document.getElementById("myFile");
upload.onchange = function (e) {
var label = document.getElementById("myLabel");
label.innerHTML = this.value;
};
And here's a fiddle for that one: http://jsfiddle.net/8PYwK/
(Honestly, though, I find that it's far simpler in the long run to use jquery in the long run when dealing with ASP.NET controls.)
Obviously, the label changing in my samples are just examples. Following that pattern, though, you can make whatever changes you need to on the client side (rather than needing to post back).
I have a read-only form filled out automatically from a database. I have several fields with true/false values, and would like them displayed as checkboxes that are either empty or checked. I can databind the checkbox control and disable it, but then it appears grayed out. Is there a simple way to change this so it will show up at a normal, easy-to-read boldness but still be disabled? If not, what's the best way to do this? Should I use an image?
You can go like this as well.
<asp:CheckBox id="checkbox1" Text="Custom" onclick="javascript: return false;" />
Which will render it as
<input type="checkbox"
checked onclick="javascript: return false;">Custom</input>
Interesting question!
There's only one issue I can see with using images instead of normal checkboxes, and that's how the active checkboxes will differ from the disabled (image-based) checkboxes. So, if you go the image route, you will probably want to style all checkboxes. :)
You can effectively disable any checkbox with the following jQuery method (I've only tested in Chrome and IE 9, so far).
$('.readonly:checkbox').click(function(e) {
e.preventDefault();
});
This will "disable" any checkbox with the "readonly" class.
Or, you can use an inline JavaScript function (albiet not recommended, as it adds clutter and confusion):
<input type="checkbox" onclick="event.preventDefault();" />
The reason you would use "preventDefault()" instead of "return false", is because returning false will stop propagation. This means that your click event will not bubble to the parent element. That could potentially cause problems with other code... but it's unlikely.
Also, like Bala R mentioned, you mustn't rely on these restrictions to work. Your server side code should be aware that these values are read only, and refrain from updating them.
Here is jsFiddle example: http://jsfiddle.net/xixionia/3rXCB/
I hope this is helpful! :)
You can do something like this with javascript and use it for the checkbox's onclick handler.
jsFiddle link
function makeMeReadonly(checkbox){
checkbox.checked = !checkbox.checked;
}
and
<asp:CheckBox id="checkbox1" onclick="makeMeReadonly(this)" />
or
<asp:CheckBox id="checkbox1" onclick="this.checked = !this.checked" />
if you want it inline.
but you shouldn't depend on this for security as it will be a regular check box when javascript is not available and/or client code is not that difficult to work around client code restrictions but in your case since you have a readonly view, I wouldn't think you have any logic to save changes.
I just had the same problem and fixed it with an OnClick event on the checkbox. In the event handler the .Checked state is set to the value it is supposed to display.
private void chkBox_CheckStateChanged(object sender, EventArgs e)
{
chkBox.Checked = boolDatabasevalue;
return;
}
Works great, the user can click on the checkbox but the check mark does not change.
The only issue is a slight border shadow indicating the Focus. But the checkmark is, as OP was looking for, of easy-to-read boldness.
NB: this is C#, but in Asp.Net this should work similarly.
i have a dynamically created gridview button that fires off a modal popup when clicked. I do this onclientside like so:
function openModal(btnId, v) {
deptdata(v);
// __doPostBack('<%=DropDownList1.ClientID %>', '');
btn = document.getElementById(btnId);
btn.click();
}
function deptdata(v) {
document.getElementById('<%=vendor.ClientID%>').value = v;
}
This is how the function is called in the code.
btnedit.OnClientClick = String.Format("openModal('{0}','" & GridView1.Rows(i).Cells(0).Text & "');return false;", hidden.ClientID)
I set the value of a hidden field(Vendor) but I need that value for what's in the modal popup. I have a dropdown list that depends on that newly set variable. The variable is set depending on what row was clicked. So i need to somehow just reload that popup. I have an Update Panel but I can't get that Panel to reload. I've tried __doPostback and it didn't help. any ideas how to update the panel or the dropdown in the panel using javascript?
It's not very clear from your description and the limited code you provide what it is exactly that you are trying to do and what is failing. However, the following might give you some ideas. If you provide more detail and code someone might be able to give you a better answer.
ScriptManager1.RegisterAsyncPostBackControl(Button1);
to trigger an update panel post back from js make sure you use UniqueID, not ClientID, thats a common gotcha that prevents the async postback from working.
__doPostBack("<%=Button1.UniqueID %>", "");
Personally, I have all but given up on UpdatePanels, I only use them in the most trivial cases. I prefer to have my js call an ASP.Net JSON webservice and have the on completed function render any needed changes to the html. It's more flexible, lighter and infinitely faster for pages with large grids or a lot of controls.
I have two tables on a webform. On a button click I want to hide one and show the other. I gave them both an Id and I want to set the tables' style="display:"
I tried this in javaScript using a function and document.getelementbyid(id).style.display='none' but it did not work.
any ideas?
Solution:
OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;"
I am assuming your tables are .net controls? If so, passing 'id' is not enough as .net does not assign the same server id as client-side id.
You need to access the ClientID property of the .net control server-side to get it's real client-side id:
MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);
The above code shows how you would attach some javascript (please don't call it java!) to a .net asp:button called MyButton and then have a client-side click on that hide a control called ControlIWantToHide.
Note: the above may need tweaking to make it work across all browsers but the .net stuff is the important factor here and I suspect the ClientID is what you needed all along.
Based on your responses to comments, the elements you are toggling are not .net controls but the button triggering them is, so: (based on the function posted by ebrown):
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
You could trigger the toggle of an element in your page by attaching the javascript event handler server-side:
MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";
..which will display the element with id tbl1 and hide the one with tbl2. This will work providing the elements you are toggling are not .net controls - ie, they do not have the runat="server" attribute. Remember, even though you are adding the javascript code to the asp:button on the server, it is only getting executed on the client when they click. Don't forget to return 'false' as shown above to stop the default post-back behaviour of the asp:button.
I think this should get you on the right track:
<table id="tbl1" onclick="javascript:show('tbl2');hide('tbl1');" >
<tr>
<td>
table 1 stuff
</td>
</tr>
</table>
<table id="tbl2" onclick="javascript:show('tbl1');hide('tbl2');">
<tr>
<td>
table 2 stuff
</td>
</tr>
</table>
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
Also make sure your ID's are unique, I noticed you gave a tr element the name 'tbl1' in your example code. Only the tables need to have the Id's
Edit: this will work for hiding Tr's instead (Just give the tr a unique id and use the same approach). However I believe if a table has an on click event you won't be able to reach the row's onclick event, so you will have to use one or the other.
Asp.net will change the id of any server tag using run="server". If you're trying to hide them using javascript you will have to use the id that asp.net spits out (You can see this using view source). Alternatively you could wrap the table in a div and show/hide the div with your usual method.
If you're using an asp:Table and trying to hide the table in the code behind you can use the .Visible property to achieve the same effect on postback.
Use document.getelementbyid(id).style.display="none" to hide
and document.getelementbyid(id).style.display="block" to show
If these are purely html based tables and not then try using -
document.getElementsByName('table1')[0].style.visibility='hidden';
or
document.getElementsByName('table1')[0].style.visibility='visible';
I am using the example on the AJAX website for the DropDownExtender. I'm looking to make the target control (the label) have the DropDown image appear always, instead of just when I hover over it.
Is there any way to do this?
This can be done using the following script tag:
<script>
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
I found this and some other tips at this dot net curry example.
It works but I'd also consider writing a new control based on the drop down extender exposing a property to set the behaviour you want on or off.
Writing a new AJAX control isn't too hard, more fiddly than anything.