Please I need some help on jquery on usercontrols, thanks...

ysfkay · February 13th, 2010, 09:46 AM

I am trying to get jquery to work on a form I have on a usercontrol
. My web application has a masterpage, The current page I am working on has several forms which are on usercontrols loaded onto the parent page by the click of a menu control option,which then loads the required form contained on a usercontrol dynamically via a place holder located on the parent page.The placeholder is itself placed in an ajax update panel control. Below is how I have tried to register the jquery datepicker on one of my usercontrols. The usercontrol also contains a textbox which displays the datepicker when a mouse clicks it.However when I run the parent page to load this usercontrol in the placeholder. Nothing happens, nothing is loaded into the placeholder and no error message also. I read it somewhere that javascript codes cannot be registered on usercontrols this way.Please I need full explanations and c sharp codes on how to implement this. I am a beginner asp c# developer with little knowledge on jquery and javascript as well. Thanks.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="InsertReservation.ascx.cs" Inherits="UserControls_Customers_InsertReservation " %>

<link type="text/css" href="~/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<script src="~/jquery/js/jquery-1.4.1.min.js" type="text/javascript" ></script>
<script src="~/jquery/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function()
{
$("#txtArrivalDate").datepicker();
}
);
</script>

Imar · February 13th, 2010, 11:48 AM

Hi there,

Take a look at the final HTML in the browser. Is txtArrivalDate still called txtArrivalDate or has its name been prefixed with its naming container? If so, consider something like txtArrivalDate.ClientID in server code...

Cheers,

Imar

ysfkay · February 20th, 2010, 10:17 AM

I tried just as u said but nothing has changed.This part of the application has been a real pain to me,especially since I really want to use jquery on almost all the usercontrols. I having been keeping myself busy with other parts. But if I still don't find a solution to this one, I am considering using the asp multiview control instead of the usercontrol. Apart from making the source code difficult to read, is there any other disadvantage to using the multiview instead?
Thanks

Imar · February 22nd, 2010, 06:31 AM

Did you like at the client side IDs? What did they look like? How exactly did you "tried just as u said"?

A MultiView will give you the same kind of changed IDs plus some ViewState overhead.

Cheers,

Imar

ysfkay · February 22nd, 2010, 05:38 PM

This is how I tried it, the following my user control
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="InsertReservation.ascx.cs" Inherits="UserControls_Customers_InsertReservation" %>

<link type="text/css" href="~/jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" />
<script src="~/jquery/js/jquery-1.4.1.min.js" type="text/javascript" ></script>
<script src="~/jquery/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function()
{
$("#txtArrivalDate.ClientID").datepicker();
}
);
</script>

Someone had the same problem and solved it on this link (please follow the link) , its the same scenario with mine
http://www.christianasp.net/using-jquery-with-updatepanel-in-a-user-control.aspx
I combined the solution from that bloq with the resolution you gave me, but when I click the menu on the parent page, the user control loads but the jquery datepicker still does not work.
My code behind is below, well thanks anywayâ¦

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;

public partial class UserControls_Customers_InsertReservation : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);

// *** MS AJAX aware script management
ClientScriptProxy p = ClientScriptProxy.Current;

// *** Register resources
this.RegisterResources(p);
}

private void RegisterResources(ClientScriptProxy p)
{
p.RegisterClientScriptInclude(this.Page, this.GetType(), "_jqueryjs", this.ResolveUrl("~/jquery/js/jquery-1.4.1.min.js"));

p.RegisterClientScriptInclude(this.Page, this.GetType(), "_initjs", this.ResolveUrl("~/jquery/js/init.js"));

p.RegisterClientScriptInclude(this.Page, this.GetType(), "_initjs", this.ResolveUrl("~/jquery/js/jquery-ui-1.7.2.custom.min.js"));

StringBuilder sb = new StringBuilder();

sb.AppendLine(@"

function InitScript() {
$(function() {
$('#txtArrivalDate.ClientID).datepicker();
});

}

"
);

p.RegisterClientScriptBlock(this.Page, this.GetType(), "_init_" + this.ID, sb.ToString(), true);

}

}

Imar · February 23rd, 2010, 11:31 AM

txtArrivalDate.ClientID is a *server side* property, so you need to wrap it in server side code blocks: <%= txtArrivalDate.ClientID %> to get the real client ID at the client. Otherwise, it ends up as-is which is not going to work. But did you look at the final HTML first to see if this is really the problem? What's the client ID of txtArrivalDate in the browser's HTML?

Imar

ysfkay · February 25th, 2010, 04:51 PM

I ran the project to check the client ID of txtArrivalDate in the browser's HTML? But I donât event see the control on the page source.

Please I have pasted the parent pageâs .aspx, .aspx.cs and the usercontrols .ascx and ascx.cs files below
Could u please check them when u have the time. I donât have problem with c# OOP, but I am new to asp and still developing my understanding of it,
Though everything with this very project was moving smooth until I tried to use jquery on the dynamically loaded usercontrol. Which I believe is a very good option.
I am still trying on my own and Iâd appreciate it,thanksâ¦

Parent page description:

The Parent page inherits a master page.For now, the parent page contains 2 contentplaceholders, the first one loads the usercontrols dynamically, according to the menu controlâs option selected.
The second contentplaceholder on the parent page contains the menu control.

PARENT PAGE (The parent page inherits a master page)
The parent page loads the usercontrol successfully when a menu option is seleccted.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MenuTest3.aspx.cs" Inherits="MenuTest3" %>

<%--Ajax Update Progress --%>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/ImagesAjax/bar1.gif">
</asp:Image> <span style="color: #99CCFF">Please Wait... </span>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>

<%--First Content PlaceHolder--%>
<%--Load user control Dynamically (according to menu option)--%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Menu1" EventName="MenuItemClick" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>

<%--Second ContentPlaceHolder (controls the menu)--%>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick">
<Items>
<asp:MenuItem Text="Register" Value="~/UserControls/Customers/RegisterCustomer.ascx">
</asp:MenuItem>
<asp:MenuItem Text="Rervation" Value="~/UserControls/Customers/InsertReservation.ascx">
</asp:MenuItem>
<asp:MenuItem Text="Register3" Value="~/UserControls/Customers/Guest.ascx">
</asp:MenuItem>
</Items>
</asp:Menu>
<br />
</asp:Content>

This is the code behind For PARENT PARENT:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class MenuTest3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostingFromMenu() && IsPostBack)
{
ReloadContent();
}

}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
foreach (AsyncPostBackTrigger apbt in UpdatePanel1.Triggers)
{
if (Menu1.UniqueID.EndsWith(apbt.ControlID))
apbt.ControlID = Menu1.UniqueID;

}
}

public string TrackedUserControl
{
get { return ViewState["TrackedUserControl"] as string; }
set { ViewState["TrackedUserControl"] = value; }
}
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
System.Threading.Thread.Sleep(2000);
//Control m = Page.LoadControl(e.Item.Value);
//or
//UserControl m = Page.LoadControl(e.Item.Value) as UserControl;
// PlaceHolder1.Controls.Add(m);
LoadContent(e.Item.Value);
}
//
private void LoadContent(string menuItemName)
{
string uctrl = menuItemName;
//Instantiate an object of userControl
UserControl uc = null;
try
{
uc = this.LoadControl(uctrl) as UserControl;
//or
// uc = Page.LoadControl(uctrl) as UserControl;
}
catch (Exception ex)
{
}
//Set the property, tracked userControl
if (uc != null)
{
//If the control is loaded correctly, the method
//adds it to the Controls collection of the PlaceHolder. Note that the ASP.NET PlaceHolder
PlaceHolder1.Controls.Add(uc);
TrackedUserControl = uctrl;
}

}
void ReloadContent()
{
UserControl uc = null;
try
{
uc = this.LoadControl(TrackedUserControl) as UserControl;
}
catch (Exception ex)
{
}
if (uc != null)
PlaceHolder1.Controls.Add(uc);
}

bool IsPostingFromMenu()
{
ScriptManager sm = ScriptManager.GetCurrent(this);
string ctlID = sm.AsyncPostBackSourceElementID;
//Control c = Page.FindControl(ctlID);
//or
Control c = this.FindControl(ctlID);
if (c == null)
return false;
return (c.ID == "Menu1");
}

}

This is now the user control:
For now, the user control contains one textbox control, which should display a jquery datepicker when a mouse clicks in it. all the client scripts have been registered on the code behind. I built the user control code behind after a research I did on this link -http://www.christianasp.net/using-jquery-with-updatepanel-in-a-user-control.aspx
The problem is, when I click the menu option on the parent page to load the user control âguest.ascxâ, the usercontrol loads successfully but the when I click into the textbox, I expect a jquery datepicker to show, but nothing happens.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Guest.ascx.cs" Inherits="UserControls_Customers_Guest" %>
<asp:TextBox ID="txtArrivalDate" runat="server"></asp:TextBox>

This is the code behind for the usercontrol:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Text;

public partial class UserControls_Customers_Guest : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);

// *** MS AJAX aware script management
ClientScriptProxy p = ClientScriptProxy.Current;

// *** Register resources
this.RegisterResources(p);
}

private void RegisterResources(ClientScriptProxy p)
{
//Include clent scripts
p.RegisterClientScriptInclude(this.Page, this.GetType(), "_jqueryjs", this.ResolveUrl("~/jquery/js/jquery-1.3.2.min.js"));
p.RegisterClientScriptInclude(this.Page, this.GetType(), "_initjs", this.ResolveUrl("~/jquery/js/init.js"));
p.RegisterClientScriptInclude(this.Page, this.GetType(), "_initjs_ui", this.ResolveUrl("~/jquery/js/jquery-ui-1.7.2.custom.min.js"));

StringBuilder sb = new StringBuilder();

//Register client script block
sb.AppendLine(
@" function InitScript()
{
$(function()
{
$('#txtArrivalDate.ClientID').datepicker();
}
);
}"
);

p.RegisterClientScriptBlock(this.Page, this.GetType(), "_init_" + this.ID, sb.ToString(),true);

}

}

Imar · February 25th, 2010, 05:25 PM

Quote:

The problem is, when I click the menu option on the parent page to load the user control âguest.ascxâ, the usercontrol loads successfully but the when I click into the textbox, I expect a jquery datepicker to show, but nothing happens.

If you don't see txtArrivalDate anywhere in the final HTML, that would be the first place I'd start looking for a problem. Did you check the browser's HTML directly or did you use a DOM explorer (as the one that's built-in the ID Developer toolbar)?

It's a bit too much code for me to read and analyze, so you'll need to do some digging and debugging to see a) if txtArrivalDate ever makes it to the browser and b) what it's client ID is....

Cheers,

Imar

amalrajmca · August 27th, 2010, 09:30 AM

You must need to specifty in following format.

you have use like this $("#<%txtArrivalDate.ClientID %>").datepicker();
instead of writing this one $('#txtArrivalDate.ClientID').datepicker();

Your problem will be solve.

Your reply will be appreciate.

Thanks
M.Amalraj.