I am trying to hide and show a table using jquery which is working. My issue is I also need to check if this table is visible or not in the codebehind so I can say if it is visible then validate these fields. And I also want the table to not be visible on pageload.
On my PageLoad when I add the following code the javascript stops working
table1.Visible = false;
$(document).ready(function () {
$("#checkbox1").change(function () {
$("#table1").toggle();
});
})
<input type="checkbox" id="checkbox1" name="checkbox1" />
<table id="table1">
Hiddent Fields
</table>
Here's my 2 cents:
In markup:
<table id="table1" runat="server">
In Page_Load:
table1.Style.Add("display", "none");
And when you want to check if the table is invisible:
if(table1.Style["display"] == "none")
{
// Do what you need to
}
You will have full control of the table in jquery as well as in code behind.
DEMO
Try this,
$(document).ready(function () {
$("#table1").hide();
$("#checkbox1").change(function () {
$("#table1").toggle();
});
})
and specify id="checkbox1"
<input type="checkbox" id="checkbox1" />
<table id="table1">
<th>Hidden things</th>
</table>
You can use the hidden selector.
// Matches all elements that are hidden
$('element:hidden')
And the visible selector
// Matches all elements that are visible.
$('element:visible')
or
You can use .is(':visible') to test if something is visible and .is(':hidden') to test for the opposite:
http://api.jquery.com/is/
http://api.jquery.com/visible-selector/
http://api.jquery.com/hidden-selector/
to hide on page load you can use
$(document).ready(function () {
$('#table1').hide();
});
or using css
#table1{ display:none; }
DEMO
$(document).ready(function () {
$("#table1").hide();
$("#checkbox1").change(function () {
$("#table1").toggle();
});
})
You try to access element using his id (#checkbox1) instead of his name , so your problem is that your change event is never triggered.
Change your selector to use name='checkbox1' :
$("input[name='checkbox1']").change(function () {});
Or add id='checkbox1' to your input:
<input type="checkbox" name="checkbox1" id="checkbox1" />
DEMO HERE
Related
I have a c# application using a repeater and jQuery to add a little pizzaz to my application. The first portion of the jQuery functions correctly as the content slides up and down to hide or show whatever ONE section had been clicked on, but the second portion changes all classes including the one inside the section clicked. Why is this?
Here is my repeater layout:
<ItemTemplate>
<div class="head"><span class="expand"> </span> <%#Eval("Job_Title") %></div>
<div class="row" style="margin:0px 0px 20px 50px; display: none;">
<div><%#Eval("Status") %></div>
<div><%#Eval("Department") %></div>
<div><%#Eval("Posting_Site") %></div>
<div><%#Eval("Job_Duties") %></div>
</div>
</ItemTemplate>
Here is my jQuery:
<script type="text/javascript">
$(function () {
$('.head').click(function () {
$(this).next('div.row').stop(true, true).slideToggle(400, function () {
$('.expand').toggleClass('collapse');
});
});
});
</script>
$('.expand') targets all elements with that class, if you just want to target the one inside the current .head you'd do
$(this).prev('.head').find('.expand').toggleClass('collapse')
or the opposite would be
var thisOne = $(this).prev('.head').find('.expand');
$('.expand').not(thisOne).toggleClass('collapse');
Your use of a class as your selector and then using next, means that you are iterating over each 'head' that contains 'div.row'.
You need to change it this:
$(function () {
$('.head').click(function () {
$('.head div.row').slideToggle(400, function () {
$('.expand').toggleClass('collapse');
});
});
});
I got the process of getting the value of input field in c# in here:
Get value from input html in codebehind c#
I have a hidden input field in my aspx page like this:
<input type="hidden" id="lblCountry_val" runat="server" />
Where the value of the hidden field is put through jquery:
<script type="text/javascript">
$(function () {
BindUserInfo();
})
function BindUserInfo()
{
document.getElementById('lblCountry_val').value = window.strcountry;
}
</script>
<script type="text/javascript" src="http://smart-ip.net/geoip-json?callback=GetUserInfo"></script>
But When I am trying to get the value in Page_Load event in code behind with this:
Response.Write(lblCountry_val.Value);
Nothing is being printed. How come?
EDIT
I have done this by changing the hidden input field to an invisible textbox and then putting "name" attribute in the tag.
<input type="text" id="lblCountry_val" name="lblCountry_val" runat="server" style="display:none" />
And in the code behind:
var txt=Request.Form["lblCountry_val"];
Though I have not a clear idea how it was done.
First Method -
In aspx, When you set a value to html field using Java script, Field's value doesn't appear in code behind file(aspx.cs). So you have to do additional page post back for set a value to hidden field and then you can able to catch the value in code behind file.
Second Method -
Using tag, submit hidden field data to relevant aspx page.Then you can catch the value using Request.Form["lblCountry_val"] array.
You should write
document.getElementById('<%=lblCountry_val.ClientID%>')
This happens because in the most cases the serve side Id of a control is different from its clientId. The way to take it is the above.
Try this...
JavaScript
<script>
$(document).ready(function () {
var test = "1";
$("<%=hdn_audio_length.ClientID%>").val(test);
});
</script>
Html
<asp:HiddenField runat="server" ID="hdn_audio_length" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="button1" runat="server" Text="Click" OnClick="button1_Click" />
C#
protected void button1_Click(object sender, EventArgs e)
{
TextBox1.Text = hdn_audio_length.Value;
}
Here's an example setting hidden fields on submit click.
`<script>
$(document).ready(function () {
$("#submit").click(function () {
$("#<%= ccnum.ClientID%>").val($("#cc-num").val());
$("#<%= expdate.ClientID%>").val($("#cc-exp").val());
$("#<%= cvc.ClientID%>").val($("#cc-cvc").val());
});
});
</script>`
I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..
If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})
I am trying to show a loading div on button click, but it is not working at the moment.
Javascript :
<script type="text/javascript">
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Div:
<div id="loading" class="Loading" runat="server" visible="false">
<div class="loadingImg">
<img src="../Images/loading.gif" alt="loading" />
</div>
</div>
button:
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
Also how can I call the same javascript code in the jsfiddle above within code (c#)?
You have to select jQuery version from left menu, jsFiddle does not support to interpret asp.net code and generate html as asp.net engine do.
Live Demo
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#loading').slideToggle("slow");
});
});
If you are trying to do same in asp.net and your BtnSend is server control which does not have ClientIDMode set to static then you will need to use ClientID to bind event.
$(document).ready(function (e) {
$('#<%= BtnSend %>').click(function () {
$('#<%= loading.ClientID %>').slideToggle("slow");
});
});
The ClientID value is set to the value of the ID property. If the
control is a naming container, the control is used as the top of the
hierarchy of naming containers for any controls that it contains, Reference.
I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you suggest any way to implement this?
Note: I don't want to implement this with Javascript.
Solution using an asp:UpdatePanel
With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.
Page.aspx:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Event handler for the TextChanged event, Page.aspx.cs:
protected void text1_TextChanged(object sender, EventArgs e) {
text2.Text = text1.Text;
}
Solution using ASP.NET and jQuery
Page.aspx:
<script type="text/javascript">
//As soon as the DOM is ready, execute the anonymous function
$(function () {
var textBox1 = $("#<%= text1.ClientID %>");
var textBox2 = $("#<%= text2.ClientID %>");
textBox1.keyup(function () {
textBox2.val(textBox1.val());
});
});
</script>
<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
CSS for both approaches:
.special { font-family: YourFontFamilyOfChoice; }
Test Results
I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.
Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.
CSS:
.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }
HTML:
<input ... class="normalFont" />
<input ... class="alternateFont" />
JavaScript (jQuery):
// When the DOM is ready, execute anonymous function
$(function ()
{
// store a reference for the input with the "alternateFont" class
var alternateFontInput = $("input.alternateFont")[0];
// execute anonymous function on key-up event on the input with
// the "normalFont" class
$("input.normalFont").keyup(function ()
{
// set the value of the input with the "alternateFont" class to
// the value of the input with the "normalFont" class (this)
alternateFontInput.value = this.value;
});
});