windows.onload event is not called

Question

I am working on a project in which I need to use tabbing control with flyingbox. For that I refered this link. http://www.my-html-codes.com/javascript-tabs-html-5-css3

and in that I have made some modifications. I am gatting the details from other page called product_detail.aspx using jquery as below

$('.inline2').click(function()
                {
                 $('#inline_content').show();
                 var myid=( $(this)[0].attributes["data-id"].value);
                     $('#inline_content').html('<img src="images/ajax-loader.gif" style="margin-left: 50%;padding: 10px;"/>')
                     $.get( "product_detail.aspx?product_id="+myid+"", function( data )      {
                        var resourceContent = data; 
                         data=$(resourceContent).find('table#minicart1');
                         $('#cboxLoadedContent div').html();
                         $('#cboxLoadedContent div').html(data);
                         var aa= callmeonetime();
                         return false;
                                // can be a global variable too...
                        // process the content...

                    });

and tabs.js function

function callmeonetime()
{
window.onload=function() {

  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}

window.onload=function() {

  // get tab container
    var container = document.getElementById("tabContainer");
        var tabcon = document.getElementById("tabscontent");
        //alert(tabcon.childNodes.item(1));
    // set current tab
    var navitem = document.getElementById("tabHeader_1");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
        //alert(ident);
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
     var pages = tabcon.getElementsByTagName("div");
        for (var i = 1; i < pages.length; i++) {
         pages.item(i).style.display="none";
        };

    //this adds click event to tabs
    var tabs = container.getElementsByTagName("li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}
}

now the thingis when I check the function using debugger I am getting that when $.get( "product_detail.aspx?product_id="+myid+"", function( data ) is called its getting data from that page but at the same time callmeonetime() event is called. But in that it skips windows.onload=function().

So not able to get tabs in my page.

So what changes should I made so that it will work properly??

Answer 1

$('.inline2').click(function()
                {
                 $('#inline_content').show();
                 var myid=( $(this)[0].attributes["data-id"].value);
                     $('#inline_content').html('<img src="images/ajax-loader.gif" style="margin-left: 50%;padding: 10px;"/>')
                     $.get( "product_detail.aspx?product_id="+myid+"", function( data )      {
                        var resourceContent = data; 
                         data=$(resourceContent).find('table#minicart1');
                         $('#cboxLoadedContent div').html();
                         $('#cboxLoadedContent div').html(data);

// CHANGED CODE...
                         var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }

    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
                    });