I have a textbox and 2 label
I would like to make that, whenever I change the value of the textbox:
label2 = textbox * label1
I tried using textbox_TextChanged but it requires me to click anywhere outside the textbox first.
Is there any way to make that the label2 will immediately change considering the value of the textbox regardless if there is any click or not?
The above answers mentioned in the comments can work, but you can also add a listener to TextBox1.
<asp:Label ID="Label1" runat="server" Text="10"></asp:Label>
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script type="text/javascript">
$('#<%= TextBox1.ClientID %>').keyup(function () {
var sum = parseInt($(this).val()) * parseInt($('#<%= Label1.ClientID %>').html());
$('#<%= Label2.ClientID %>').html(sum);
});
</script>
Related
I got a autocomplete textbox which displays Citynames. Whenever user clicks on a cityname the selected cityname is displayed in a textbox. This textbox value should be sent over to code behind method (aspx.cs) for fetching more details of the selected city name so that the resultant details are displayed in a gridview.
Now for passing the selected value I have added a textbox which copies the selected cityname value and enclosed it in a update panel. When ever the text box selection changes the idea is to trigger the code-behind method:
This is the code in aspx page:
$(document).ready(function () {
$('#txtName').on('change', function () {
$('#selectedItem').html(this.value);
}).change();
$('#txtName').on('autocompleteselect', function (e, ui) {
$('#selectedItem').val(ui.item.value);
});
});
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<label>Alternate Names: </label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Label ID="countLabel" runat="server"></asp:Label>
<br />
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="selectedItem" runat="server" OnTextChanged="selectedItem_TextChanged"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="selectedItem" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
This is the code in aspx.cs page:
protected void selectedItem_TextChanged(object sender, EventArgs e)
{
MessageBox.Show(selectedItem.Text);
}
But this method ain't getting triggered. Could somebody please help me with identifying the mistake i'm doing.
First, MessageBox.Show is not WEBforms code but WINforms. You should not mix those together. If you want to show results on a webpage, use javascript alert or a Modal.
Next item is this: $('#selectedItem').html(this.value);. It should be used with val()
$('#selectedItem').val(this.value);
Third if yo want to trigger a PostBack on a TextChange, use AutoPostBack=true
<asp:TextBox ID="selectedItem" ClientIDMode="Static" runat="server"
OnTextChanged="selectedItem_TextChanged" AutoPostBack="true"></asp:TextBox>
However a PostBack will not be triggered by changing the text from txtName in selectedItem also. the textbox needs to lose focus/blur itself to trigger the PostBack. So either just put txtName in the UpdatePanel and place the TextChanged event on that, or remove the TextChanged from selectedItem, place a Button in the UpdatePanel and click that with jQuery.
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="selectedItem" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="showResults" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').on('change', function () {
$('#selectedItem').val(this.value);
$('#Button1').click();
});
});
</script>
And then in code behind
protected void Button1_Click(object sender, EventArgs e)
{
showResults.Text = selectedItem.Text;
}
I am trying to get the text in a label to blink.This is the code that I am using:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="../jquery-1.3.2.min.js" language="javascript" type="text/javascript"> </script>
<script src="../jquery-blink.js" language="javscript" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('.blink').blink();
});
</script>
<div runat="server" id="blinkText">
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red">
</asp:Label>
</div>
</asp:Content>
In code behind:
lblMessage.Text = "You can not complete the test unless you solve all the questions";
blinkText.Attributes.Add("class", "blink");
The message appears at run time but it does not blink.Where have I gone wrong?Another information which might be useful is that this label lblMessage is inside an Update Panel.
your label id is lblMessage and you can add your class to it instead of blinkText
your code is :
lblMessage.Text = "You can not complete the test unless you solve all the questions";
blinkText.Attributes.Add("class", "blink");
change it as :
lblMessage.Text = "You can not complete the test unless you solve all the questions";
lblMessage.Attributes.Add("class", "blink");
and try ...
First of all, you are doing a Class selector there $('.blink')
So for that to work, you need to add that class to the Label
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" CssClass="blink" ForeColor="Red">
</asp:Label>
or what I would prefer is the normal Element selector via ID
$('<%=lblMessage.ClientID%>').blink();
When using MasterPages with ContentPlaceHolders you just add your contentplace holder ID before the element ID in the selector with underscore like so
$('ContentPlaceHolder1_lblMessage').blink();
//Just debug this, now and then it adds other characters like $ct01_ infront of the contentplaceholder part $('$ct01_ContentPlaceHolder1_lblMessage')
Edit
If you want to make the whole Div Blink,
use the following javascript/Jquery
$(document).ready(function()
{
$('#blinkText').blink();
});
else if you only want the elements to blink which has the blink class assigned to them, then assign the classes correctly as #Farrokh has mentioned in his answer
Using System.Threading, add an AJAX timer control and a ScriptManager to your aspx page.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:timer runat="server" ID="tmr1" Interval="300000" ontick="tmr1_Tick"></asp:timer>
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
in timer_tick event put the following codes:
protected void tmr1_Tick(object sender, EventArgs e)
{
lblMessage.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss tt");
lblMessage.Visible = true;
Thread.Sleep(10000);
lblMessage.Visible = false;
}
OK dude,if your problem not solved yet try this:
place a span in your HTML and add class='blink' to it, then reload page to see what happened.
there are two result:
span was blinked, then your server side code had problem, we should to check it
span not blinked, then your client side code had problem and we should to correct it.
We're waiting for your answer ...
Below is my label code under a repeater with image:
<asp:Repeater ID="innerRep" runat="server">
<ItemTemplate>
<li>
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this)" style="cursor:pointer;" />
<br /> <asp:Label ID="Label1" runat="server" Text='<%#Bind("VideoName") %>' ></asp:Label>
</li>
</ItemTemplate>
</asp:Repeater>
When I click the particular image using image onclick, then the video will start playing in I frame, as well as I need video name should come below I frame in a label.
For that I used one label2 for displaying the video name below the video player.
Alter the img tag within repeater to:
<img src=' <%#Eval("ImageName") %>' alt='<%#Eval("ImgUrl") %>' width="100" height="60" onclick = "ChangeImage(this,'<%#Eval("VideoName")' )" style="cursor:pointer;" />
I assume that you keep a html span(id=spnPlayingVideoName) for brevity, below the iframe
then within javascript you can do something like:
<script language="javascript">
function ChangeImage(getID, playingVideoName)
{
//Set label value in JavaScript
//document.getElementById("spnPlayingVideoName").value=playingVideoName;
//Set label value in jQuery
$("#spnPlayingVideoName").text(playingVideoName);
var targetID = document.getElementById("centralImage");
targetID.src=getID.alt;
}
</script>
This code is not tested thoroughly, but provided for a quick idea.
Note: Make sure that adding extra parameter to "ChangeImage(...)" function does not break other code.
If it break some other code, you may write a separate function(Eg: UpdateVideoLabel(...)) and call that as well from "onclick" event of img tag.
$(function(){
$('img').click(function(){
//make a variable with the value of a label1 based on the selected img - in your given code you can achieve this by the example bellow or using $(this).next().next().text() - > <br /> is element as well.
var videoname = $(this).parent().find("label1").text();
$('label2').text(videoname);
});
});
I have unusual problem with AJAX toolkit ColorPickerExtender. Javascript code works fine it changes backgound color of extended textbox to picked color and text to picked color code also, but when I try to grab text of that Extended textBox from codebehind it return like it returns initial Text Value like javascript didn't change it. Since this same code works on my other application I suspect that the problem is that I put ColorPickerExtender in UpdatePanel and then in User Control.Here is the code:
User Control Code where ColorPickerExtender is:
<script language="javascript" type="text/javascript">
function colorChanged(sender) {
sender.get_element().style.backgroundColor = "#" + sender.get_selectedColor();
sender.get_element().style.color = "#" + sender.get_selectedColor();
sender.get_element().value = "0x" + sender.get_selectedColor();
}
</script>
...
...
<asp:TextBox ID="ColorTextBox" runat="server" ReadOnly="True" BackColor="Black" Text="" >0x000000</asp:TextBox>
<asp:ColorPickerExtender ID="ColorTextBox_ColorPickerExtender" runat="server" Enabled="True" TargetControlID="ColorTextBox" OnClientColorSelectionChanged="colorChanged" PopupButtonID="PickColorButton">
</asp:ColorPickerExtender>
<asp:Button ID="PickColorButton" runat="server" Text="Pick Color" />
Page Code (Upper user control is wrapped in Panel and than update panel):
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="PostNewThoughtButton1" PopupControlID="pnlThoghtPopup" BackgroundCssClass="modalBackground" DropShadow="false" />
...
<asp:Panel ID="pnlThoghtPopup" runat="server" Style="display:none;">
<asp:UpdatePanel ID="pnlUpdate" runat="server">
<ContentTemplate>
<My:NewThoughtPopup ID="NewThoughtPopup1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
So when I try to call this in codebehind:
string color = ColorTextBox.Text;
color always returns inital value of: 0x000000 altought everything seems fine from client side ColorTextBox text gets updated and it's color changed,nothing happens on server side, do I have to call postback before trying to get string color? Note: same code works fine without update panel and when not using it on user control
I had a similar problem - it's because the TextBox is set to ReadOnly="True"
you can use a HiddenField additionally to your TextBox
<asp:HiddenField ID="HiddenFieldColorText" runat=server />
and in javascript just set the value of the HiddenField with
document.getElementById('<%=HiddenFieldColorText.ClientID %>').value = yourColorString;
because you set the value of the HiddenField in Javascript and you want this value again on PostPack you need to set it again on Page_Load with
HiddenFieldColorText.Value = Request.Params[HiddenFieldColorText.UniqueID];
<div>
<asp:Label ID="lblClientId" runat="server" CssClass="label" meta:resourcekey="lblClientIdResource" />
<asp:TextBox ID="tbClientId" runat="server" style="width:150px; "/>
<asp:Button ID="btnClientId" runat="server" style="width:50px;" meta:resourcekey="btnClientIdResource" />
<asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:CustomValidator>
</div>
<script type="text/javascript">
function BtnClickClientId(session, args) {
ButtonClick(session, args, "<%= tbClientId.ClientID %>", "<%= lblClientId.ClientID %>");
}
window.onload = function () {
document.getElementById('<%= tbClientId.ClientID%>').focus();
};
</script>
<asp:ValidationSummary ID="ClientIdValidationSummary" runat="server" BackColor="LightGray" DisplayMode="BulletList" CssClass="validationSummary" EnableClientScript="true" HeaderText='<%$ Resources:GlobalResource, ValidationSummaryResource %>'/>
So this ButtonClick() method is working and has been tested independently. The problem is that when i enter nothing into the text box and click the button, the validator works as expected and appears on the screen. Then it disappears. It is also never shown in the page validation summary. How do I get this to work?
I have tried to also set a required field validator on this text box and it seems to work with that but I do not want to use two validators.
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="tbClientId" ErrorMessage="RequiredFieldValidator" style="position:absolute;"><asp:Image ID="Image2" ImageUrl="caution_20.png" runat="server" /></asp:RequiredFieldValidator>
<asp:CustomValidator ID="rfvClientId" runat="server" ValidationGroup="ClientId" meta:resourcekey="rfvClientIdResource" ControlToValidate="tbClientId" ClientValidationFunction="BtnClickClientId" style="position:absolute;" ValidateEmptyText="True" ></asp:CustomValidator>
This code works but I should not have to use 2 validators.
You need to set the "arg.IsValid" to "true" or "false" in the javascript function based on your requirement (i.e. to "true" when you think the validation is successful and false otherwise). Also, in the code behind file, it is always advisable to check for "Page.IsValid" property inside the click event handler of the button. So, in the javascript add this.
arg.IsValid = false;
and in code behind
protected void button_click(..)
{
if (Page.IsValid)
{
// Your code, if any exists
}
}
Hope this helps!!