UserControl Javascript Worst problem and Best Solution
Working on Jquery is fun and exciting. Same time it makes us to scratch our head countless times. :)
I was making a User Control which will have a dropdown and a image control, in which dropdown which loads countries.
On selecting a country in dropdown it has to show selected country flag image and the tooltip is to show the details of the country yes without any postback and using Jquery.
It was simple and used this...
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.ddlCountries.Attributes.Add("onchange", "getCountryDescription()");
}
}
and ASPX:
<script type="text/javascript">
function getCountryDescription() {
$.ajax({
type: "POST",
url: "http://localhost/OnActionC/JqueryMethods/JqueryAjax.aspx/LoadFlag",
data: "{'StrCountryText':'" + $("#<%=ddlCountries.ClientID %> option:selected").text() + "', 'StrCountryValue':'" + $('#<%=ddlCountries.ClientID %>').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$('#<%=imgCountry.ClientID %>').attr("Src", (msg.d[0]));
$('#<%=imgCountry.ClientID %>').attr("title", (msg.d[1]));
}
});
}
</script>
<div>
<asp:DropDownList ID="ddlCountries" class="grey" ForeColor="#FAFAFA" style="font-size:0.8em; background-color:#414141;" runat="server" >
</asp:DropDownList>
<a href="#" runat="server" id="countrytooltip" >
<img id="imgCountry" runat="server" alt="" />
</a>
</div>
This was pretty good and I used this user control in a screen which has 2 seperate controls in a single page...
Ohh!! there is a problem...i found.. we are calling a single function getCountryDescription
for both controls, even though the contorlid of individual are different it was causing the problem since one control was refereing to other...
So the possible solutions are :
1. Better create as many as functions as we use the user control in a single page.
Ohhh!! no... I cant do this... I cant afford to deal with this messy issue.
2. So the next idea was to make the function dynamic , yes so each control will refer to its corresponding function only, so the possible way is to play with ClientId.
then I made the following changes.
function getCountryDescription<%=ddlCountries.ClientID %>() {
$.ajax({
type: "POST",
url: "http://localhost/OnActionC/JqueryMethods/JqueryAjax.aspx/LoadFlag",
data: "{'StrCountryText':'" + $("#<%=ddlCountries.ClientID %> option:selected").text() + "', 'StrCountryValue':'" + $('#<%=ddlCountries.ClientID %>').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$('#<%=imgCountry.ClientID %>').attr("Src", (msg.d[0]));
$('#<%=imgCountry.ClientID %>').attr("title", (msg.d[1]));
}
});
}
and
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.ddlCountries.Attributes.Add("onchange", "getCountryDescription"+this.ddlCountries.ClientID+"()");
}
}
in c#.
Yes now i am able to use as many as user controls as i wish...
Happy coding.
