jQuery Forum

Hi,

Did you look in to the problem.?

dear,
Please help me...

Dear,
It is not working...
I put the alert message for showing the problem.U can see the same problem when clicking the button "Click Me"  in the newly loaded tab when we click the button "Click for Tab" more than one.It is a major problem when i save the data in the tab in to database. The Save button triggers more than one , if I load the Tab twice or more.

Thank You.

Hello.,,

Can anyone help me? It is a big problem..

That is, the script code cannot be replaced or removed when I load the page in to the Div.??

The problem occurs only when i place the Button in the jQuery Tab ie  without jQuery tab there is no problem in loading the script in every Ajax load...

Your answer is correct.Including the script in the remote pages, each ajax request the script and html code is
loaded into the div and triggers the method more than one.

But ,When i Remove the jquery code in the remote pages ie Moving the code to the Main page  , some functions like creating Tab ( $('#tab').tabs() , butoon() effect on <a>  ) is not working.ie , I put the script code -$('#tab').tabs()- in the main page and loaded the Html for the tab via ajax to the div.

 I am creating Dynamically adding new tabs into the Jquery Tab ..like Yahoo mail(Each mail in the In-box , opens in new Tab ie different tab).



here is the code..I placed the script code in the Success call back
But the same problem occurs..

$(document).ready(function()

            {
            
                var Actionlink="<%=request.getContextPath()%>/example/Duty.action";
               
                $("#NewTab").bind("click",function(){
    
                    $.ajax({
                        type: "POST",
                        url: Actionlink,
                        data:"perform=loadTesting",
                       
                        success: function(data){
                            // alert(data);
                            $("#Container").empty()
                            $("#Container").html(data);
                           
                            var perform="" ;
                            var tabheading="";
                            var tabcount=0;
                            var tab_counter = 2;
                
                            var $tabs = $('#tabs').tabs({
       
                                tabTemplate: '<li><a href="<%= "#"%>{href}"><%= "#"%>{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
                                add: function(event, ui) {
             
                                    switch(perform){
                                        case 'search':
                                            ActionUrl="<%=request.getContextPath()%>"+"/example/Duty.action";
                                            $(ui.panel).load(ActionUrl,{'perform':'search'});
                                            break;
                           
                           
                                        }
                                       

                                        $tabs.tabs('select', '#' + ui.panel.id);
               
        
                                        ActionUrl="<%=request.getContextPath()%>"+"/example/Duty.action";
                                    }
                   
                                });
                                function addTab(){
                                    $tabs.tabs('add', '#tabs-'+tab_counter,tabheading);
                                    tab_counter++;
                                    tabcount++;
                                }
                                $('#tabs span.ui-icon-close').live('click', function() {
                                    var index = $('li',$tabs).index($(this).parent());
                                    $tabs.tabs('remove', index);
                                    tabcount--;
                                });
                   
   
                   
                   
                                $('#clickMe').live('click',function(){      ///// This method executs more than one
                                    alert("This is test Message");
                                });
                   
                                $('#NewTab1').live('click',function(){         /// This method executs more than one
                                    alert("Test");
                                    perform="search";
                                    tabheading="New Tab";
                                    addTab();
                                });

                                // $("#contentdiv").remove();
                                            
                            }
                        });
   
                    });
               
               

                    $('#testBtn').button().live('click',function(){            // this code works perfectly
                        alert("Hi22");
                    });
               
               
                });



Remote html
<body>
<div>
      <input type="button" value="TestButton" id="testBtn">
</div>
<div id="tabs" style="height:525px;">
            <ul>
                <li><a href="#tabs-1">Main</a></li>
            </ul><br>
            <div id="tabs-1">
                <input type="button" value="New Tab" id="NewTab1">
            </div>
        </div>
</body>

Thank you  Charlietfl.. Thank you.. You solved my problem.. I was in trouble with this problem for 5 months..


I have another doubt. If i am Loading Different Jquery Tab in Each Menu (Menus are different, for example when clicking Inbox Menu it loads a Jquery Tab (InboxTab), when clicking Compose Mail loads another Jquery Tab (ComposeTab)) ,
will i have to write all the script code in the  Main page?Wont it take more time to load the main Page?Is there any other method to overcome this?. If my doubt is beyond the limit please forgive me..

Thank you.