jquery tabs and js load content

Question

I'm trying use jquery ui tabs together with js and mvc3.

   <div class="demo">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Tab One</a></li>
                <li><a href="#tabs-2">Tab Two</a></li>
            </ul>
            <div id="tabs-1">
                <p>  </p>
            </div>
            <div id="tabs-2">
                <p>  </p>
            </div>
        </div>
   </div>

JsFile

function GetTabData(xdata) {
    $.ajax({
        url: ('/Home/GetTabData'),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ id: xdata }),

        success: function (result) {
            alert("OK !");
        },
        error: function () { alert("error"); }
    });
}

MVC3

public ActionResult GetTabData(string xdata)
{
    data = fetch data and return to the calling script    
    return PartialView("_TabDataPartial", data);
}

So the question will be pretty basic, how to bind js GetTabData() call with TabOne and TabTwo

Thanks.

Suave Nti · Accepted Answer · 2012-07-19 18:14:43Z

1

Try :

 $('a').click(function(e) { 
  e.preventDefault();   
  alert($(this).attr('href'));
 //Call GEtdata here
});

Also you need to change this

 public ActionResult GetTabData(string xdata)

to

 public ActionResult GetTabData(string id)

coz your sending id in your data from ajax call

answered Jul 19, 2012 at 18:14

Suave Nti

3,76713 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mreyeros · Accepted Answer · 2012-07-19 18:27:30Z

0

You could take advantage of HTML5 data attributes and define your links in the following way:

 <a href="#tabs-1" data-tabId="1" class="tabLink">Tab One</a>

Then in your js just bind the on click event to do the following:

$('.tabLink').on('click', function() {
    var id = $(this).data('tabId');
    GetTabData(id);
});

edited Jul 19, 2012 at 18:27

answered Jul 19, 2012 at 18:03

mreyeros

4,38922 silver badges24 bronze badges

Collectives™ on Stack Overflow

jquery tabs and js load content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related