I have updated my code but it still not working ...
after i run my asp.net webpage and click on button the following error occurs everytime ...
Microsoft JScript runtime error: Exception thrown and not caught
<%# Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="WebUserControl" %>
<script src="./scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='button']").attr('click', $('#chkAll').is(':click'));
});
});
</script>
<div>
<asp:Panel ID="Panel1" runat="server">
<asp:CheckBox ID="CheckBox1" runat="server" />
<asp:CheckBox ID="CheckBox2" runat="server" />
<asp:CheckBox ID="CheckBox3" runat="server" />
<br />
<br />
<br />
<input id="chkAll" type="button" value="button" />
</asp:Panel>
</div>
Microsoft JScript runtime error: Exception thrown and not caught
You don't need #<%=chkAll.ClientID %> for controls that don't have runat="server"
Just use the ID.
It looks like you're trying to do exactly what's being demonstrated here. From that demo:
$(document).ready(function()
{
$("#paradigm_all").click(function()
{
var checked_status = this.checked;
$("input[#name=paradigm]").each(function()
{
this.checked = checked_status;
});
});
});
Note the key differences between what this is doing and what your code is doing. You are selecting inputs of type button and trying to change a property on them called click. That... won't work. This demo is instead selecting some inputs of type checkbox by name and setting their checked status. Additionally, it's doing it by use of a checkbox rather than a button (which appears to be your stated intention).
You can read up on jQuery selectors here. There's a lot you can use for selecting elements. In the demo, the elements have the same name attribute and can be selected as such. You should be able to set name properties in your .NET server controls for use on client-side code just as easily. Without name attributes, you could alternatively select them child elements of your Panel, or your div, etc. You may want to give some names or ids in there just to make it easy on yourself.
Edit: Based on your comment, you can just change the logic a little bit. You'd still bind to the click event as before. However, you wouldn't be able to use the elements own checked status, since a button doesn't have one. Something like this, for example:
$(document).ready(function()
{
$("#paradigm_all").click(function()
{
$(":checkbox").each(function()
{
this.checked = true;
});
});
});
This modifies the logic of the previous example (assuming you've changed the target checkbox to a button in the markup). The main differences are:
The selector for the other checkboxes now selects all checkboxes on the page. You'll probably want to target a more specific selector than this, but it works for the purpose of the demo.
The button only sets all checkboxes to checked. With this example, clicking the button again doesn't un-check them. To accomplish that you'd have to define a bit more logic. For example, if some of them are checked and the button is clicked, do they all check or all un-check? Or do they toggle? What if the user uses the button to check all and then un-checks one? Upon clicking the button again, does the one get re-checked or do the rest get un-checked? Lots of UX questions :)
Related
I have a very simple slideToggle. Opens and closes just fine. I have some tools, a few drop downs that cause a Post Back. When the post back executes, it causes the slideToggle to go back up. How do I keep that from happening? Is there a default value setting I missed or don't know?
I have searched high and low for this answer and nothing works. I have tried so many different options and all lead to nothing. All the answers given here on the site don't work. Any other suggestions? Thanks again for the help
Here is the slideToggle code.
<script type="text/javascript">
$(document).ready(function () {
$(".Flip").click(function () {
$(".FlipPanel").slideToggle("slow");
});
}); `enter code here`
</script>
Here is the markup I use to open and expand.. With some CSS to style it.
<div class="Flip" id="testFlip" runat="server">Preferred Cargo</div>
<div class="FlipPanel">
</div>
Here a very basic example. The value of state will be loaded from the TextBox, incremented and then stored again. You will find that the value increments on every PostBack without server side code. Adapt this to store the open state of your panel.
I uses a TextBox to visualize the process, but normally you would use a HiddenField.
<script type="text/javascript">
$(document).ready(function () {
var state = $("#<%= TextBox1.ClientID %>").val();
state++;
$("#<%= TextBox1.ClientID %>").val(state);
});
</script>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br>
<asp:Button ID="Button1" runat="server" Text="Button" />
I have a textbox which will be initally invisible and checkbox OnClick JS method , I want the button to be visible ,
initally the checkbox seems invisible but when i click on the checkbox, JS Method gives me the error with object not found. and if i remove the Visible="false" from textbox code works fine.
<asp:Textbox id="day" runat="server" Visible="false" />
<asp:CheckBox ID="parts" runat="server" onClick="Click();" />
<script type="text/javascript">
function Click(){
document.getElementById("day").style.visibility = "visible";
//ERROR **0x800a01a8 - Microsoft JScript runtime error: Object required**
}
</script>
//ERROR 0x800a01a8 - Microsoft JScript runtime error: Object required
When you use visible=false, that is never rendered on page, implies, you can not do document.getEle.., it will always give you null value and hence , it will throw error.
If this property is false, the server control is not rendered. - MSDN
How to solve this
So it make it work, you need to make it hidden using javascript and then make it visible using javascript.
<asp:TextBox ID="day" runat="server" style="display:none;" />
<asp:CheckBox ID="parts" runat="server" onClick="Click();" />
<script type="text/javascript">
function Click() {
document.getElementById("day").style.display = "block"; // use "none" to hide
}
</script>
Use the static id mode instead, to stop it using an auto-generated id:
e.g.
<asp:Textbox id="day" ClientIDMode="Static" runat="server" Visible="false" />
Also as you tagged this as jQuery the simpler jQuery could would look like this (if the code follows the elements on the page):
$('#day').click(function(){
$(this).show();
});
or this if the code precedes the elements, wrap it in a DOM ready handler:
$(function(){
$('#day').click(function(){
$(this).show();
});
});
$(function(){...}); is just a handy shortcut for $(document).ready(function(){...});
I'm really stuck and I've tried all the other examples but nothing works. I'm fairly new to ASP.NET but learning fast!
I want to use the jQuery datepicker and I am inserting this script
<script>
$(document).ready(function () {
$(function () {
$("#" + '<%=txtDOB.ClientID%>').datepicker();
});
});
</script>
and my control on the aspx page is
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>
As soon as I close the the server tag %> the red line appears under the txtDOB control and says:
txtDOB is not declared. It may be inaccessible due to its protection level.
I've made the class public in the code behind but doesn't make any difference. I've also moved the script to the bottom of the page. If I change the asp textbox to a HTML input it works fine.
It will work fine with an ASP.NET TextBox as you have used. Therefore it must be to do with where your control is located. For example, if it's inside a Repeater or Grid, you will not be able to use its ID directly like that, since the framework will generate unique ids for each row at runtime.
Create a simple webform with no other controls on the page, and you will find it works just as you have it.
Try using static ID mode instead:
<script>
$(document).ready(function () {
$("#txtDOB").datepicker();
});
</script>
It makes the client script easier (especially when you move it to an external .js file to take advantage of caching), and is an easy change to the ASP control:
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server" ClientIDMode="Static"/>
You could use a different type of jQuery selector to select for that ID as follows:
<script>
$(document).ready(function () {
$("input[id$=_txtDOB]").datepicker();
});
</script>
That selector will account for the text that is being appended to the beginning of your ID due to the use of your CreateUserWizard control. It is cleaner than the way you are currently doing it, and you can use your original HTML.
<asp:TextBox ID="txtDOB" CssClass="form-control" runat="server"></asp:TextBox>
Currently in my application I am having a button and a text box. The user types something in the textbox and then presses the button. What I want is that:
The search button should should stay disabled when the page loads for the first time. I can achieve that by setting it to disabled in the code behind file.
Now I want it to remain disabled when the user types upto 2 characters. The moment the user types third character the button should get enabled automatically.
The important thing is that it has to be done without asp .net AJAX since this website will be run from old mobile phones. So only pretty basic javascript or jquery is supported.
Any help will be appreciated.
Thanks
Varun
in order to use the document.getElementById in asp.net and not have to use the full name, you should let asp.net provide it. Instead of:
document.getElementById("ctl00_ctl00_phContent_phPageContent_btnSearch")
Try:
document.getElementById('<%= btnName.ClientID %>')
Where btnName is the asp:Button Id. The <%= code will generate the actual button id, fully qualified, so you don't have to worry about things changing with the hard coded id.
I got this to work with a HTML text box, I don't think you can do it with a asp.net text box:
<head>
<script type="text/javascript">
function TextChange() {
var t = document.getElementById("Text1");
var b = document.getElementById("Button1");
if (t.value.length > 2) {
b.disabled = false;
}
else {
b.disabled = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Text1" type="text" onkeyup="TextChange();" />
<asp:Button ID="Button1" runat="server" Text="Button" Enabled="False" />
</div>
</form>
</body>
If you're using jQuery, use
$(<selector>).val().length
to get the size, then you can set the button's disabled attribute with
$(<button selector>).attr('disabled',false).
I am having a lot of trouble with a seemingly simple thing.
In an ASP.NET webform I have two ListBoxes, with Add and Remove buttons in between.
The user can select items in one ListBox and using the buttons, swap them around.
I do this on the clientside using javascript.
I then also have a SAVE button, which I want to process on the server side when the user is happy with their list.
Problems : First I was getting the following problem when I clicked SAVE :
*
Invalid postback or callback argument. Event validation is enabled using in configuration or <%# Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
*
I read that one of the methods to get around this was to put my ListBoxes into an UpdatePanel, which I did, and I am getting further.
However, now the event handler for the button's Click event is not being run if the user has used the clientside javascript to alter the contents of the Listboxes. If the user has not altered the contents of the listboxes, the handler does execute.
What is happening?
Is my approach basically flawed and there might be a much better approach to this problem?
thanks for any help!
Here's the ASPX code :
<table>
<tr>
<td>
<asp:ListBox ID="fromListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false"
DataSourceID="SqlDataSource1" DataTextField="FullName" DataValueField="UserId" CssClass="teamListBox">
</asp:ListBox>
</td>
<td>
<input id="btnAdd" type="button" value="Add >" /><br/>
<br/>
<input id="btnRemove" type="button" value="< Remove" /><br/>
<br/>
</td>
<td>
<asp:ListBox ID="toListBox" runat="server" SelectionMode="Multiple" Rows="8" AutoPostBack="false"
CssClass="teamListBox" DataSourceID="SqlDataSource2" DataTextField="FullName"
DataValueField="UserId" >
</asp:ListBox>
</td>
</tr>
</table>
Heres the javascript, using jquery....this works fine so is not really the problem :
$(document).ready(function () {
$("#btnAdd").click(function () {
$("#fromListBox option:selected").appendTo("#toListBox");
});
$("#btnRemove").click(function () {
$("#toListBox option:selected").appendTo("#fromListBox");
});
});
Just Go to your web config file in your application and Add enableEventValidation="false" in pages section.
The clean way would to be to use ClientScriptManager.RegisterForEventValidation Method.
Have also a look here.
You have to register the server control ID with all the possible values that can be posted by JavaScript by that control in Render Event of the page, for exampe:
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
ClientScript.RegisterForEventValidation("fromListBox", "English");
ClientScript.RegisterForEventValidation("fromListBox", "Tamil");
ClientScript.RegisterForEventValidation("fromListBox", "Hindi");
ClientScript.RegisterForEventValidation("toListBox", "English");
ClientScript.RegisterForEventValidation("toListBox", "Tamil");
ClientScript.RegisterForEventValidation("toListBox", "Hindi");
base.Render(writer);
}
I think I had the same problem a while ago. I solved it by assigning the values of my listbox to a hidden text field and submitting the page all using javascript.
On the server side, I read the value of that hiddent textfield and parsed it.
It was an ugly client/server code, but it worked for me.