tabs with ajax content which is again jquery

Dear Community,
i just started with jquery and wonder about if i am using the jquery ui on its right way.

i want to use the tabs which load .php pages which have again jquery inside. so i decided to make a general .js page where all jquery is listed:

$(document).ready(function(){

    // index.php
    $("#tb-index").tabs();

    // v_angebot.php
    $("#d-v_angebot-nartikel").dialog({
        title: 'Neuer Artikel',
        resizable: false,
        autoOpen: false,
        width: 800,
        height: 650,
        modal: true,
        buttons: {
            "Ok": function() {
                $.post("m_aktion.php?aktion=v_angebot_nartikel-ok", $("#f-v_angebot_nartikel").serialize());
                $("#tb-index").tabs('load', 1);
                $(this).dialog("close");
            },
        }
    });

    $("#bt-v_angebot-nartikel")
    .button()
    .click(function() {
        $("#d-v_angebot-nartikel").dialog("open");
        $("#d-v_angebot-nartikel").load("v_angebot_nartikel.php?a=" + $("#fi-v_angebot-search2").val() + "&q=" + $("#fi-v_angebot-search").val());
    });

    $("#bt-v_angebot-reset")
    .button()
    .click(function() {
        $.post("m_aktion.php?aktion=v_angebot-reset", "reset");
        $("#tb-index").tabs('load', 1);
    });

    //v_angebot_nartikel.php
    $("#ac-v_angebot_nartikel").accordion({
        width: 750,
        height: 600,
        fillSpace: false,
        collapsible: true,
        autoHeight: false,
        navigation: true
    });

});

This .js file is included in every .php file:

<head>
 <link type="text/css" href="jquery-ui-1.8.4.custom.css" rel="stylesheet">
 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="jquery.cookie.js"></script>
 <script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
 <script type="text/javascript" src="m_jquery.js"></script>
</head>

<body>
 <div class="index">
 <div id="tb-index">
 <ul>
 <li><a href="v_kunde.php">1 - Kunde</a></li>
 <li><a href="v_angebot.php">2 - Angebot</a></li>
 </ul>

 <div id="tb-v_kunde"></div>
 <div id="tb-v_angebot"></div>
 </div>
</div>

</body>
</html>

and now the v_angebot.php on tab 2:

<script type="text/javascript" src="m_jquery.js"></script>
<div class="v_angebot">
    <p>
        <input type="text" id="fi-v_angebot-search" class="text ui-widget-content ui-corner-all">
        <input type="hidden" id="fi-v_angebot-search2" value="50">
        <button id="bt-v_angebot-nartikel" class="ui-state-default ui-corner-all">Neuer Artikel</button>
        <button id="bt-v_angebot-reset" class="ui-state-default ui-corner-all">Reset</button>
    </p>
    <div id="d-v_angebot-nartikel"></div>
</div>

and then the .php file which is loaded inito the dialog:

                    <div>
                    <form action="#" id="f-v_angebot_nartikel" method="post">
                    <table border="0" width="100%">
                    <tr><td>Nummer</td><td>Bezeichnung</td><td>Menge</td></tr>
                    <?php //fill with data     ?>
                    </table>
                    </form>
                    </div>

My first problem is:
Why i cannot use the already declared jquery function within the reloaded tabs. it only works if i include the .js file again.

My second problem is:
If i open the dialog in tab 2. Close it and reload the tab 2, then the dialog sometins wont open again, sometimes is double loaded. It seems like the system is collapsing.

I think my problem is the reloading of the jquery funktions within themselves. How i can fix this issue.

Thank you for your help

Topic Participants
darren.whittington

tabs with ajax content which is again jquery

tabs with ajax content which is again jquery

Topic Participants

darren.whittington