Passing code-behind value to JQuery in a page

For general questions and discussions specific to the AbleCommerce GOLD ASP.Net shopping cart software.
Post Reply
User avatar
AbleMods
Master Yoda
Master Yoda
Posts: 5170
Joined: Wed Sep 26, 2007 5:47 am
Location: Fort Myers, Florida USA

Passing code-behind value to JQuery in a page

Post by AbleMods » Fri Apr 26, 2013 6:02 am

Able Gold makes use of JQuery throughout the site. As I learn more about JQuery, I'm finding it quite handy too. Compared to some of the .Net equivalents, JQuery can be an easier and more elegant way to get the job done. I do miss the ComponentArt UI library included with previous versions of Able. But JQuery seems (so far) to be a reasonable replacement.

But the transition from server-side thinking to client-side thinking is the challenge. Often times, I can get the JQuery to do exactly what I want. But it needs to be dynamic in some form or fashion. Whether it's the number of rows to display, or the starting tab to display, I need to control that value from the server side.

I found a fairly easy way to specify JQuery parameters with a server-side variable. It turned out to be rather simple.

Let's say you're using the JQuery Accordion and you want establish the default accordion pane upon page load. In my case, I have 5 products I'm listing in a vertical fashion. And Each product is an accordion pane that contains the product details.

But, only 1 of the products is Featured, and I that's the accordion I want to be open by default on page load.

First, you set an inline variable in the .Net page like this:

Code: Select all

    <script type="text/javascript">
          $(function() {
              $("#accordion").accordion({
                  header: "h3",
                  autoHeight: false,
                  clearStyle: true, 
                  active: <%= this._ActiveIndex %> 
                });
          });

  </script>
Notice how the 'active:' parameter uses the server-side variable instead of a literal value? That's how you can pass a server-side value to the client-side JQuery code.

In your code-behind, just specify this at the top where your variables are defined. Page_Load or Page_Init is always my first method in the code behind, so I declare variables right before either of those.

Code: Select all

    public string _ActiveIndex = "";

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
            _ActiveIndex = "2";
    }
Obviously this example is hard-coded. In your code, you'll want to loop through the same collection being bound to a repeater inside the accordion div tags. The important point is the index value should obviously be a valid pane number within the accordion data.

I was pretty excited to get this working so well so I wanted to share. Enjoy :D
Joe Payne
AbleCommerce Custom Programming and Modules http://www.AbleMods.com/
AbleCommerce Hosting http://www.AbleModsHosting.com/
Precise Fishing and Hunting Time Tables http://www.Solunar.com

Post Reply