开发者

jQuery: appending loaded url with class of trigger

I'm using jQuery to load a section through ajax. I'd like to make a very universal, compact function to load up the appropriate section based on a clicked tab.

Here's the tricky part.

I'd like to take the class of the tab that is clicked and append the url that will be loaded with the class the tab has. This is what I h开发者_StackOverflow中文版ave so far, and I'm sure it can be make more compact.

JS:

$.ajaxSetup ({
    cache: false
});
var ajax_load = "<img src='../../images/icons/loading.gif' alt='loading...' />";

var loadUrl = "/include/?section=accountsettings&view=";

$("#accountsettings").html(ajax_load).load(loadUrl + "accountsettings");

$(".filterCat a").click(function(){
    $("#contentSm div").fadeOut(200);
});

$(".accountsettings").click(function(){
    $("#accountsettings").html(ajax_load).load(loadUrl + "accountsettings");
    $("#accountsettings").delay(250).fadeIn(250);
});

$(".editprofile").click(function(){
    $("#editprofile").html(ajax_load).load(loadUrl + "editprofile");
    $("#editprofile").delay(250).fadeIn(250);
});

$(".notifications").click(function(){
    $("#notifications").html(ajax_load).load(loadUrl + "notifications");
    $("#notifications").delay(250).fadeIn(250);
});

$(".broadcast").click(function(){
    $("#broadcast").html(ajax_load).load(loadUrl + "broadcast");
    $("#broadcast").delay(250).fadeIn(250);
});

$(".import").click(function(){
    $("#import").html(ajax_load).load(loadUrl + "import");
    $("#import").delay(250).fadeIn(250);
});

HTML:

<div id="filter" class="span-3">
    <div id="accountSettingsTabs">
        <div class="filterCat section">
            <a class="accountsettings sel"><span class="wIcon accountSet"></span>Account</a>
            <a class="editprofile"><span class="wIcon send"></span>Edit Profile</a>
            <a class="notifications"><span class="wIcon emailNoti"></span>Notifications</a>
            <a class="broadcast"><span class="wIcon broadcast"></span>Broadcast</a>
            <a class="import"><span class="wIcon import"></span>Import</a>
        </div>
    </div>
</div>
<div id="contentSm" class="span-8">
    <div id="accountsettings" class="section"></div>
    <div id="editprofile" class="section"></div>
    <div id="notifications" class="section"></div>
    <div id="broadcast" class="section"></div>
    <div id="import" class="section"></div>
</div>

So I'm looking to append /include/?section=accountsettings&view= with the first class of the clicked anchor. I'll try whatever you can think up! Thanks!


create tab like this

<a class="ajaxifiedTab notifications" _param="notifications" />

Javascript

var loadUrl = "/include/?section=accountsettings&view=";
jQuery(function(){
   jQuery('.ajaxifiedTab').bind('click',function(e){    
       e.preventDefault();
       var _class=jQuery(e.target).attr('_param');
       jQuery.ajax({
            url:loadUrl +_class,
            type:'get',  //or post as u think
            success:function(data){
                jQuery('#'+_class).html(data);
            }
        });
   });
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜