Issue with Jquery tabs applying ajax

[saadi06]

Hi,
I am using jquery tabs for displaying data.And while displaying the data in the tabs I have to use ajax again to display data. The data in the first tab is giving the desired result. But when I click on the second tab. The tab is loaded correctly. But When I use the ajax. The ajax is not working correctly. Here is my code.

<script>
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " );
});
}
});
});

    </script>
<div id="tabs">
                            <ul>
                                <?php 
                                    foreach($categories as $cat){
                                    ?>
                                <li>
            <a href="<?php echo 'ajax/get_cat_content/'.$cat['id']; ?>"><?php echo ucwords($cat['name']);?></a></li>//while I click on the link the ajax loads correctly with the response.
                                <?php }?>


                                </ul>

</div>   

Here is my ajax response file.

<table border="0" id="sub_cats">
    <tr >
        <?php foreach($sub_cats as $cat){?>
        <td style="width:auto;padding:5px;">
            <?php 
            if($cat['id']==$sub_cat){
                $class='class="currents"';
            }else{
                $class='';
            }

            ?>
            <a href="#" <?php echo $class;?> onclick="load_sub_cats('load_rbt_1','<?php echo base_url()."ajax/get_cat_content/".$cat["parent_id"]."/".$cat["id"]?>')" ><p><?php echo ucwords($cat['name']) ?></p></a></td> //Now this file is being called again here I display the sub categories and the user can view the sub categories content.But when these values are loaded for the second tab and I click on the links that are in second tab the content does not change.    

<?php 

}
?>

    </tr>

</table>

This is my code for ajax

function ajaxq1(ui_id, ajaxurl, data_to_send){
loading_show();
document.getElementById(ui_id).innerHTML = '';
  var div = $("#"+ui_id);
   alert(div);
   $.ajax ({
    url: ajaxurl,
    cache: false,
    data:data_to_send,
    success: function(html)
    {
       loading_hide();

       document.getElementById(ui_id).style.display = 'block';
       div.append(html);
    }
});

}

Thanks in advance.

The tab is loaded correctly. But When I use the ajax. The ajax is not working correctly. Here is my code.

@saadi06

Hi, can you kindly explain to me how do you put php code in a <a href> tag?

On your first code which you have this:

<a href="<?php echo 'ajax/get_cat_content/'.$cat['id']; ?>">

but on your second code you have this:

<a href="#" <?php echo $class;?> onclick="load_sub_cats('load_rbt_1','<?php echo base_url()."ajax/get_cat_content/".$cat["parent_id"]."/".$cat["id"]?>')" >

Why is your $class is out the qoutes shouldn't be like this (replace the # to <?php echo $class;?>:

<a href="<?php echo $class;?>" onclick="load_sub_cats('load_rbt_1','<?php echo base_url()."ajax/get_cat_content/".$cat["parent_id"]."/".$cat["id"]?>')" >

Then can you run the code and see whether it work?