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 ...
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 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>
Ok so for some reason my div prints out the way it should in Firefox and Chrome but then when I go to IE it doesnt work. It only prints out one page of the div then the header and footer. I have tried adding some new code to see if I can get it to work better but still having issues. The current code does print out fine but doesnt inherit the divs styling that they had on the page and not in an external style sheet. The commented out code below is what they had there before. Does anyone have any help?
function buildPrint() {
var sourceDiv = document.getElementById("display_div");
var WindowObject = window.open('', 'print_div', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln(sourceDiv.innerHTML);
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
//document.getElementById("print_div").innerHTML = sourceDiv.innerHTML;
//window.print();
}
<asp:Content ID="Content3" ContentPlaceHolderID="BodyPlaceHolder" runat="server">
<div id="display_div">
<asp:CheckBox ID="showAllOptionals" runat="server" Text="Show All Optionals" AutoPostBack="true" />
<asp:Literal ID="mainTable" runat="server" />
</div>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PrintContent" runat="server">
<div id="print_div" style="page-break-after:avoid;">
</div>
</input><input onclick=\"buildPrint();\" id=\"printBtn\" type=\"button\" value=\"Print\">
I got the solution, I had to add different CSS to it so the div overflowed and printed. Thanks for all the help
OnClick we load a usercontrol in an asp:panel. That works fine. It appears as a modal popup. The question is (and I've looked high and low) is there a way to make this "draggable"?
The only thing I've found is by using this:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DragPanel/DragPanel.aspx
I'd rather not have to include the ajaxcontroltoolkit.
My ImageButton:
<asp:ImageButton ID="btnOpenBox" ImageUrl="~/images/open.gif" runat="server"
OnClick="btnOpenBox_Click" />
The Modal Popup Panel:
<asp:Panel ID="pnlMyModalBox" runat="server" Visible="false" HorizontalAlign="Left"
Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
<uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
</asp:Panel>
The codebehind:
protected void btnOpenBox_Click(object sender, ImageClickEventArgs e)
{
System.Web.UI.HtmlControls.HtmlGenericControl _body = (System.Web.UI.HtmlControls.HtmlGenericControl)this.Page.Controls[0].FindControl("Body1");
_body.Attributes.Add("class", "modalBackground");
mdJournalEntry.Visible = true;
pnlBody.Enabled = false;
pnlMyModalBox.Visible = true;
pnlMyModalBox.Height = Unit.Pixel(350);
pnlMyModalBox.Width = Unit.Pixel(800);
}
I used jquery with great results.
This is the official link with a couple of great examples
http://jqueryui.com/demos/draggable/
You should find everything you need there
EDIT
Download the jquery ui and include the following files in your project and this code in the page
<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
//These include tags have to be in this exact order because the lower one depend on the first ones
<script type="text/javascript">
$(document).ready(function() {
dragAndDrop();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dragAndDrop);
//this makes the javascript method execute after an ajax action on the page
});
function dragAndDrop() {
$( ".draggable" ).draggable();
}
</script>
Now simply add a class to your pannel like this
<asp:Panel ID="pnlMyModalBox" runat="server" class="draggable" Visible="false" HorizontalAlign="Left"
Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
<uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
</asp:Panel>
If everything is done correctly it should work
Making a panel (renders as a div) draggable can only be done in JavaScript. So check jQuery or Prototype/Scriptacolous or some other JavaScript library. These support this kind of operations
Add this to the head (sorry you'll have to do a search for the $asp function.. very useful!):
<script type="text/javascript">
$(document).ready(function() {
$asp("pnlMyModalBox").draggable();
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
Hope this helps someone else.
I am trying to trigger a postback if a certain condition is true. Initially, a user will click on a button on my form, the server does some work, and in the process of doing that work it assigns a hidden field the value of '1'. When the page reloads after that very first postback, I am trying to use javascript to check the hidden field, and if it is '1' I need the page to postback again so the server side can do some additional processing. The reason for doing it this roundabout way is so that I can create controls on the form from my C# code behind as well as download a file in 1 user interaction. Here is what I have so far:
<script type="text/javascript" language="JavaScript">
function atload() {
var HWInfo = document.getElementById('HiddenHW').value;
if (HWInfo == '1') {
alert("flag has been set");
__doPostBack('<%= hdnHidden.UniqueID %>', '');
}
}
$(document).ready(atload);
</script>
The alert that says the flag has been set correctly fires, but the __doPostBack does not. In my ASPX file, here is the relevant part:
<form id="InventoryForm" runat="server">
<div>
<asp:Label ID="lblClientList" runat="server" Text="Client List"></asp:Label>
<asp:DropDownList ID="comboClientList" runat="server"></asp:DropDownList>
<asp:Label ID="spacer1" runat="server" Text=" "></asp:Label>
<asp:Button ID="btnGenerateHWReport" runat="server" Text="Generate Hardware Inventory Report" />
<asp:Label ID="spacer2" runat="server" Text=" "></asp:Label>
<asp:Button ID="btnGenerateSWReport" runat="server" Text="Generate Software Inventory Report" />
<br />
<br />
<asp:Panel ID="MissingCompPanel" runat="server"></asp:Panel>
<asp:HiddenField ID="HiddenHW" runat="server" Value="0" />
<asp:HiddenField ID="hdnHidden" runat="server" />
</div>
</form>
I can tell the postback never fires, because I have breakpoints in the Page_Load C# codebehind that never get tripped. I have break points on almost every single line of this:
if (!Page.IsPostBack)
{
// Page is not a postback, this is the first visit here
string foo = HiddenHW.Value;
}
else
{
// Page is a postback and not initial load
string foo = HiddenHW.Value;
}
Why is my __doPostBak after the alert not firing, and is there a better way to do this? The end result I want is if my hidden field is '1', then I want my 2nd trip to the server to 1) actually happen and 2) know that the hidden field is '1' and not its default '0'.
Thanks!
how about just clicking the submit button programatically and have it call __doPostBack the way it normally does?
Try invoking the __doPostBack method on the page instead of the hidden control
__doPostBack('__Page', '');
When you get the value of HiddenHW, you're not using the right ID. If you look at the rendered source, the ID of the control is something like ctl00_HiddenHW. To get that ID, you should use HiddenHW.ClientID. I believe __doPostBack also needs the ClientID, not UniqueID.
function atload() {
var HWInfo = document.getElementById('<%= HiddenHW.ClientID %>').value;
if (HWInfo == '1') {
alert("flag has been set");
__doPostBack('<%= hdnHidden.ClientID %>', '');
}
}