CODEWITHSUNDEEP
javascriptjqueryasp.netuser-controls
TTCG
TTCG

Reputation: 9113

Conflict JQuery function in the ASP.Net User Control

I have a user control which is called MyControl.

And it is used in the page for 3 times. So, there are 3 controls on the page.

I wrote the jquery function in that control which used ServerControl such as

function MyFunction(myName) {
    //some Ajax Call

    $("#<%= MyTextBox1.ClientID").val(DataFromAjax);
}

The problem is the page has 3 JQuery functions "MyFunction" and it is confused. My code run successfully if I used only 1 control on the page. But if it is more than one, the function conflicts with others.

I can't move the function from the User Control to the Page because it references some serverside controls in the control.

Could you please advise me? Thanks all.

This is my JQuery Function.

function GetData(ADUser) {

        $.ajax({
            url: "/Health/Health.asmx/GetPersonData",
            data: "{ 'samAccount': '" + ADUser + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var user = data.d;

                if (user != null) {

                    $("#cphContent_PersonalDetail1_txtFirstName").val(user.FirstName);
                    $("#cphContent_PersonalDetail1_txtLastName").val(user.LastName);
                    $("#cphContent_PersonalDetail1_txtTelephone").val(user.Telephone);
                    $("#cphContent_PersonalDetail1_txtEmail").val(user.Email);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        });

    }

This is how I bound it to the HyperLink Control.

if (!IsPostBack)
        {
            hlFill.Attributes.Add("onclick", string.Format("GetData('{0}'); return false;", GlobalSettings.UserADAccount));
}

Upvotes: 2

Views: 720

Answers (4)

Chris
Chris

Reputation: 3162

When you are calling "MyFunction" what is it you hoping to achieve? I mean that as are you trying to call it so that each javascript function in the three controls you have on the page executes concurrently so that the value is populated in each control from the Ajax callback.

Or are you attempting to call a specific function in each control based on certain constraints?

Each case has a different answer. For example, in the first case, this is purely theoretical but when you declare MyFunction can you continually build up the single function eg:

if(MyFunction != null)
{
    var oldFunction = MyFunction;
    MyFunction = new function(){ //new code here; oldFunction(); }

}
else
{
    //Create it as you were but assign it to MyFunctino
}

If it's the latter where you want to call each MyFunction based on specific constraints, is there anyway you can, for example take the Asp Controls id and append it to the function name so you create a unique function but then i am unsure how your calling it so this may or may not help.

Edit:

I understand a bit more about your problem now. I'm assuming at the moment that which ever one of your three controls that you click, it always executes the first one it finds so it just reloads the data into the first control?

The crux of your problem is two fold:

  • There is no differentiation between the function name your controls outputs to the page.
  • The control values your setting in your function on success of ajax callback i'm assuming reference more than one html control on the page?

From the JQuery function you posted, I can't see exactly why you need to have this pasted into the control each time as I don't see any server side variable output?

My suggestion would be to create one function in the parent page that all your controls use. You explicitly state that you can't due to server side variables, but if that is the case then modify your GetData() function to take in more parameters so that these define the context it should run in rather than from what control it is outputted from.

Potentially pass in the controlid as a parameter to the jquery function as well which it could use as another selector to find the relevant html controls to populate the values on callback.

Outputting a function multiple times should provoke the question "am i doing it right?" rather than "how can i get this to work?".

Upvotes: 2

jrummell
jrummell

Reputation: 43087

How are you adding the script to your control? I would recommend using ClientScriptManager.RegisterClientScriptBlock(). You can provide a script key so that its only added to your page once.

// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;

// Check to see if the startup script is already registered.
if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
  String cstext1 = "alert('Hello World');";
  cs.RegisterStartupScript(cstype, csname1, cstext1, true);
}

Upvotes: 0

Bert
Bert

Reputation: 82459

If you absolutely can't move the function, what about something like:

if (!MyFunction) {
   MyFunction = function(myName) {
       //some Ajax Call

       $("#<%= MyTextBox1.ClientID").val(DataFromAjax);
   }
}

Upvotes: 0

Mattias
Mattias

Reputation: 11

Why don´t you just add a parameter that defines from where the function is called?

Upvotes: 0

Related Questions