jQuery(function ($) does not work after partial update in updatepanel - c#

<script type="text/javascript">
//http://digitalbush.com/projects/masked-input-plugin/
jQuery(function ($) {
//phone numbers
alert("test");
var txtInvestContactPhone = $("#<%=txtInvestContactPhone.ClientID%>");
$(txtInvestContactPhone).mask("(999) 999-9999");
});
</script>
i tried adding the pagerequestmanager to the content of the page, but i think i'm doing it wrong:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add("jQuery(function ($)");
</script>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">
</asp:ToolkitScriptManager>
i've also tried to registerStartUp Script in my page_load event like so:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(Page), Guid.NewGuid().ToString(), "jQuery(function ($);", true);
if (!Page.IsPostBack)
{
but this just breaks my accordion causing the panels to all be unclickable.
i think i'm on the right path here, just need some help with syntax.

jQuery(function ($); isn't a function that can be called, that's like... half a function.
Put your init code in it's own function definition, then call it from your DOM ready handler, and from your startup script.
function init() {
//phone numbers
alert("test");
var txtInvestContactPhone = jQuery("#<%=txtInvestContactPhone.ClientID%>");
jQuery(txtInvestContactPhone).mask("(999) 999-9999");
});
jQuery(function () { init(); });
...
ScriptManager.RegisterStartupScript(this, typeof(Page), Guid.NewGuid().ToString(), "init();", true);

Related

Setting a value to a HiddenField in ASP.NET 4.5

I'm having some issues setting a value to a HiddenField in ASP.NET 4.5.
From what I've seen I've tried the following without any luck:
In ASPX:
<asp:HiddenField ID="HiddenField" runat="server" value="" />
<script type="text/javascript">
function SetHiddenField() {
var vv = "HELLO WORLD";
document.getElementById('<%=HiddenField.ClientID%>').value = vv;
}
</script>
In code-behind:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "alert", "alert('" + HiddenField.ClientID + "');", true);
This alerts garbage in the ClientID.
The other solution I've tried is the following.
In .ASPX:
<asp:HiddenField ID="HiddenField" runat="server" value="" />
<script type="text/javascript">
function SetHiddenField() {
var vv = "HELLO WORLD";
document.getElementById('HiddenField').value = vv;
}
</script>
One issue here is that .value does not exist in the IntelliSense, only .ValueOf.
In code-behind:
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "alert", "alert('" + HiddenField.Value + "');", true);
Nothing happens, probably an error in the JavaScript, since no alert is shown.
Can anyone point me to the right direction, please?
Your first markup is good:
<asp:HiddenField ID="HiddenField" runat="server" value="" />
<script type="text/javascript">
function SetHiddenField() {
var vv = "HELLO WORLD";
document.getElementById('<%=HiddenField.ClientID%>').value = vv;
}
</script>
Change the code to this (check the second line):
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "alert", "alert(document.getElementById('" + HiddenField.ClientID + "').value);", true);
And the output should be like this:
EDIT : In your scenario, you can run javascript to get a value and force a postback to use the value in your code. I would change my markup to this:
<script type="text/javascript">
function SetHiddenField() {
var vv = "HELLO WORLD";
document.getElementById('<%=HiddenField.ClientID%>').value = vv;
__doPostBack('<%=HiddenField.ClientID%>', '')
}
</script>
And in code my Page_Load is like below:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Register JavaScript which will collect the value and assign to HiddenField and trigger a postback
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "SetHiddenField", "SetHiddenField();", true);
}
else
{
//Also, I would add other checking to make sure that this is posted back by our script
string ControlID = string.Empty;
if (!String.IsNullOrEmpty(Request.Form["__EVENTTARGET"]))
{
ControlID = Request.Form["__EVENTTARGET"];
}
if (ControlID == HiddenField.ClientID)
{
//On postback do our operation
string myVal = HiddenField.Value;
//etc...
}
}
}
In the hidden field tag add clientid static like this -
<asp:HiddenField ID="HiddenField" runat="server" value="" ClientIDMode="Static" />
This way ASP.Net will not replace it with dynamic ID and always have the id that you provided, so it will now have ID HiddenField. Then your second attempt should work.
More can be found here -
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx

How to call function in ScriptManager.RegisterClientScriptBlock

I am trying to call a jQuery function on postback (C#) using scriptmanager.
When I type the function in the ScriptManager.RegisterClientScriptBlock it works but if I call the function, it doesn't.
Here is my code.
This code works:
<script runat="server" type="text/javascript">
protected void Button1_Click(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "MyFun1", "$(document).ready(function () {$('#header2a').fadeIn(5000); });", true);
}
</script>
This doesn't work:
<script runat="server" type="text/javascript">
protected void Button1_Click(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "MyFun1", "myFunction();", true);
}
</script>
<script type="text/javascript">
$(document).ready(function () {
function myFunction() {
$('#header2a').fadeIn(5000);
}
});
</script>
Could anyone please point me what I am doing wrong?
Hope this will work....
ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "MyFun1", "<script type='text/javascript'>myFunction(parameters);</script>", true);
also..
<script type="text/javascript">
function myFunction() {
$('#header2a').fadeIn(5000);
}
$(document).ready(function () {
});
</script>

Hide tab header on ajax:TabContainer

Based upon my condition I only want to remove tabheader from ajax:TabContainer on button click.
My function is:
<script type="text/javascript">
//<![CDATA[
function hideheadertab() {
$('.ajax__tab_header').hide();
}
//]]>
</script>
And in button click I call function like this.
protected void btnAdd_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>hideheadertab();</script>", true);
}
but no luck.Any trick to do this.Thanks for help.
Note: I want to remove only tab header not whole tab.
tab header html part.
<div id="ctl16_TabContainerManagePortal_header" class="ajax__tab_header">
<span id="ctl16_TabContainerManagePortal_TabPanelPortalAddEdit_tab" class="ajax__tab_active"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span id="__tab_ctl16_TabContainerManagePortal_TabPanelPortalAddEdit" class="ajax__tab_tab">
<span id="ctl16_TabContainerManagePortal_TabPanelPortalAddEdit_lblAEP">Some Text</span>
</span></span></span></span>
</div>

How to call javascript on user control

I have webapplication in c# asp.net 4.0
I have User Control in that I have written javascript :-
<script>
function SetValue() {
alert(document.getElementById('offSetClient').value);
}
</script>
<asp:HiddenField ID="clientDateTime" runat="server" />
<asp:HiddenField ID="offSetClient" runat="server" Value="Test"/>
and this User Control added into a web form.
Please suggest me how can I call this javascript on User Control page load.
You can use Page.ClientScript.RegisterStartupScript to attain this.
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(GetType(), "ShowAlert", "SetValue('" + offSetClient.ClientID + "');", true);
}
Please add an input parameter for the function to get the object of hidden field and pass the same from function.
<script type="text/javascript">
function SetValue(objHdn) {
alert(document.getElementById(objHdn).value);
}
</script>

How to retrieve a value from jquery in C# user control?

I have a visitorID variable in ToDo function in external javascript.
I want to assign its' value in a user control. Front End Code:
<asp:HiddenField ID="hidVisitorID" runat="server" Value="-1"/>
<script type="text/javascript">
$j('#<%= hidVisitorID.ClientID %>').val(ToDo.visitorID);
</script>
In the back end it says, that hidVisitorID.Value is null (or -1 in this case). How do I assign value from jquery variable to hidVisitorID ?
Try this code:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="my_TO_DO.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('my todo varname is: ' + ToDo.variableName);
$('#<%= hidVisitorID.ClientID %>').val("foobar");
});
</script>
<asp:HiddenField ID="hidVisitorID" runat="server" Value="-1"/>
<asp:Button Text="sub" runat="server" onclick="Click" />
When you click the button, it'll post back.
protected void Click(object sender, EventArgs e)
{
string valFromHidden = hidVisitorID.Value;
//valFromHidden is now foobar
}
Ensure your jQuery reference is ABOVE your other .js reference.

Categories