Ajax Passing Parameters to TabPanel's onClick JavaScript

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • quelle
    New Member
    • May 2007
    • 1

    Ajax Passing Parameters to TabPanel's onClick JavaScript

    I have a TabContainer with three TabPanels. What I'd like to do is call a javascript function (with some custom parameters) every time a tab is clicked. Here is a simplified example:

    Code:
    AjaxControlToolkit.TabContainer myContainer = new AjaxControlToolkit.TabContainer();
    
    AjaxControlToolkit.TabPanel myPanel1 = new AjaxControlToolkit.TabPanel();
    myPanel1.OnClientClick="alert('This is tab1')";
    myContainer.Controls.Add(myPanel1);
    
    AjaxControlToolkit.TabPanel myPanel2 = new AjaxControlToolkit.TabPanel();
    myPanel2.OnClientClick="alert('This is tab2')";
    myContainer.Controls.Add(myPanel2);
    
    AjaxControlToolkit.TabPanel myPanel3 = new AjaxControlToolkit.TabPanel();
    myPanel3.OnClientClick="alert('This is tab3')";
    myContainer.Controls.Add(myPanel3);
    I have looked at myContainer.OnC lientActiveTabC hanged and myPanel.OnClien tClick but these only allow you to set the name of a javascript function to be called, it will not let you pass any parameters to that javascript.

    Any ideas would be much appreciated!
  • pbmods
    Recognized Expert Expert
    • Apr 2007
    • 5821

    #2
    Originally posted by quelle
    I have looked at myContainer.OnC lientActiveTabC hanged and myPanel.OnClien tClick but these only allow you to set the name of a javascript function to be called, it will not let you pass any parameters to that javascript.
    While I haven't used the frameworks you are using, the situation you're describing is similar to a very common one:

    When you define a function in JavaScript:

    [code=javascript]
    function doSomething(par am1, param2) {
    return param1 * param2;
    }
    [/code]

    You're actually doing this:
    [code=javascript]
    doSomething = new Function('param 1, param2', 'return param1 * param2;');
    [/code]

    In other words, you're creating a variable named 'doSomething' that stores a function that takes two parameters and returns their product.

    Similarly, when you do this:
    [code=javascript]
    var myVal = 5;
    [/code]

    You're actually doing this:
    [code=javascript]
    var myVal = new Number(5);
    [/code]

    So when you do this:

    [code=javascript]
    this.callback = doSomething;
    [/code]

    You're setting this.callback to a function object. Note that this is very much unlike PHP where 'doSomething' would be a string, and PHP would check to see if there is a function with that name instead.

    So with that in mind, we can do this:

    [code=javascript]
    this.callback = new Function('param 1, param2', 'return param1 * param2;');
    [/code]

    Or, put another way:

    [code=javascript]
    this.callback = function(param1 , param2) { return param1 * param2; };
    [/code]

    So getting back to your original problem:
    [code=javascript]
    myPanel1.OnClie ntClick=functio n() {
    myFunction(para meter);
    // etc.
    };
    [/code]

    As a sidenote, try to use the function keyword rather than 'new Function()' because when you use the former, the browser compiles your script, but when you use the latter (at least in Firefox), they are interpreted.

    Comment

    • kaihanson
      New Member
      • Jun 2007
      • 1

      #3
      Works great...

      used on child of master page...

      tabpanel1.OnCli entClick="funct ion(){myFunctio n('"+HiddenFiel d1.ClientID+"') ;}

      in .js file...
      myFunction(id)
      {
      document.getEle mentById(id).va lue="update";
      document.forms[0].submit();
      }

      Thanks for the hint...

      Comment

      Working...