jquery watermark not working after form.reset - c#

I have jQuery WaterMark on Textbox field. Link
When user click on Refresh button i am trying to reset the form with clearing textbox from codebehind. It clear perfectly but it also don't show the WaterMark
May be it is that watermark works on OnBlur event and it is not firing.
Using that in the head tag (Note: nothing in the asp textbox)
<script src="../../jquery/watermark/jquery.watermarkinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#txtAccounts").Watermark("Type something to search Accounts", "gray");
});
</script>
Edit:
It is also not working after any post event

According the website you've provided, are you using the $.Watermark.ShowAll(); after the reset of your form?
Update
If you are able to move the reset to the clienside, you can use the ShowAll(); like this:
<script src="../../jquery/watermark/jquery.watermarkinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function ($) {
$("#txtAccounts").Watermark("Type something to search Accounts", "gray");
});
$("#TheIdOfYourButton").click(function(){
$("#TheIdOfYourForm")[0].reset();
$.Watermark.ShowAll();
});
</script>

Related

How to use Jquery Number Format plugin within an asp.net TextBox?

I've used this plugin with an html input and it worked with no problems,
however, when I try to implement using an asp.net textbox it doesn't work at all
Does someone know how can I implement it within a textbox from asp.net?
or maybe know if its possible to do so.
This is what I want to achieve using an asp.net textbox:
http://opensource.teamdf.com/number/examples/demo-as-you-type.html
Thank you so much, I really hope someone can enlighten me
UPDATE: code added.
asp.net control:
<asp:TextBox ID="txtNumberFormat" runat="server"></asp:TextBox>
References:
<script type="text/javascript" language="javascript" src="../../js/jquery.number.js"> </script>
<script type="text/javascript" language="javascript"src="../../js/jquery.number.min.js"></script>
JavaScript Code:
<script type="text/javascript">
$(function(){
$('#txtNumberFormat.ClientID').number( true, 2 );
});
</script>
Your jQuery is looking for a control that is literally named "txtNumberFormat.ClientID". You need
$('#<%= txtNumberFormat.ClientID %>').number( true, 2 );
so asp.net resolves the fully qualified client id inside your selector.

Second JavaScript code is always overriding the first

I am using 2 separate JavaScript refs...see below...
<script src="../scripts/jsKeyboard.js" type="text/jscript"></script>
<script src="../scripts/DOB_Validate.js" type="text/jscript"></script>
I am calling each Javascript through an onfocus event using two seperate asp:Textbox...see below:
<asp:Textbox id="txtFirstName" runat="server" onfocus="jsKeyboard.focus(this);clean(this);" placeholder="Touch Here To Enter First Name" autofocus top="50%"></asp:Textbox>
<asp:TextBox ID="TextBox1" runat="server" onfocus="board.focus(this);clean(this);" placeholder="MM/DD/YYYY"
maxlength="10" Width="5%"></asp:TextBox>
I have two scripts inside the head of the page that initialize the keyboard with the corresponding .js external ref (see two separate .js scripts above)...
Scripts inside head:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
});
</script>
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
});
</script>
However...the second script inside the head is always overriding the other...
How can I fix this issue??? Thank you...
Both of your functions look exactly the same. I am going to assume you want the same functionality for both? If that's the case, you are hooking into the same element 'txtContent'. You need to have the other script hook into 'TextBox1'.
For txtContent:
<script type="text/javascript">
$(function () {
jsKeyboard.init("virtualKeyboard");
$("#txtContent").val(initText);
});
</script>
And TextBox1:
<script type="text/javascript">
$(function () {
board.init("virtualKeyboard");
$("#TextBox1").val(initText);
});
</script>
You also may want to consider changing the name of TextBox1.

how to write internal jquery code in master page using asp.net?

this could be an easy question but i couldn't do it.
i am using the following code in the header of the master page but it didn't working also when i place it in the other web page that are inherited from this master page.
`<script type="text/javascript">
$(document).ready(function () {
$("#txtdate1").datepicker();
$("#txtdate2").datepicker();
});
</script>`
this was working fine in the single web page but i don't know to use it in asp.net while using master page in asp.net.
help will highly be appreciated.
I am guessing that.. control's clientID getting changed.
You can try :
First approach :
<script type="text/javascript">
$(document).ready(function () {
$("#'<%=txtdate1.ClientID %>'").datepicker();
$("#'<%=txtdate2.ClientID %>'").datepicker();
});
</script>
Second approach :
<script type="text/javascript">
$(document).ready(function () {
$("[id$='txtdate1']").datepicker();
$("[id$='txtdate2']").datepicker();
});
</script>
Third approach :
Make ClientID="Static" for the control, ID will be the same:
<asp:Textbox ID="txtdate1" runat="server" ClientID="Static" />
your same code will work :
<script type="text/javascript">
$(document).ready(function () {
$("#txtdate1").datepicker();
$("#txtdate2").datepicker();
});
</script>
can use clientID , CSS selector techniques for this purpose.
Eg.
$('#<%=txtdate1.ClientID%>').text();
Refer:
http://www.codeproject.com/Tips/471799/jQuery-introduction-and-how-to-use-jQuery-with-ASP

fancyBox and aspx c# integration

Trying to get my head around how to integrate fancyBox with an aspx c# website.
For example where does this code go:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
the Site.master page? or each individual .aspx file?
How about this one:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
I assume this goes in the html part:
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>
Put this between the <head> tags on the master page.
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
I'd put this on your page
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
and then your link and images etc, where you need them.
You can place it on Master page one time, and there is no problem if you do not have any fancybox class on the page.
All the script code, go on master page, the html code can be anywhere (master or other pages that use the master).
When you have downloaded the fancybox it comes with a bunch of samples right click on the .html page and view the source that makes you easier how to use them.
Here is the demo for you

How to call a javascript from master page?

I'm trying to call a javascript alert from a master page, where i got an update panel. Within that a button and a text box.
I need to call the alert on clicking the button in my master page. So far it seems not working. Please help.
Page.ClientScript.RegisterStartupScript
(this.GetType(), "alert", "invokeMeMaster();", true);
This is what i wrote in my button click. invokerMEMaster include just an alert message.I need to reload the page on the ok button click of the alert. How can i do that as well?
Update Panel clears javascript code when Postback so try to put this code on the header.
<script type="text/javascript">
$(document).ready(
function(){
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {//put your code here}
});
</script>
You need a ScriptManagerProxy, with the ScriptManager residing in your content page
If I may guess your problem (psychic debugging): When the update panel updates the javascript is not rendered of fired on your page.
Try to register your javascript like in the update panel:
ScriptManager.RegisterClientScriptBlock(Page,typeof(string),"JavaScriptCall",script.ToString(), false);
If I understand your question correctly you have a JS function in a content page that needs to be called from the master page?
What I would do is add a hidden input control and an alert function to your master page:
<input runat="server" id="hdnAlert" name="Alert" type="hidden" />
<script type="text/javascript" language="javascript">
function AlertMe(){ alert(document.getElementByID("hdnAlert").value); }
</script>
You could then change the value of the input control from a content page:
HtmlInputHidden hdnTemp = new HtmlInputHidden();
hdnTemp = (HtmlInputHidden)Master.FindControl("hdnAlert");
hdnTemp.Value = "Message To Alert";
Then just have the button in your master page call the "AlertMe" function located in the master page.

Categories