CODEWITHSUNDEEP
jquerycallback
southfanning
southfanning

Reputation: 43

Having trouble with jquery callback

I have an accordion in an html, the headers onclick call a function initTable.

<script type="text/javascript">
  $(document).ready(function() 
  {
    $('.accordion ul li h1').click(function() 
    {                
      document.getElementById('processing').innerHTML = "Processing...";
      document.body.style.cursor = 'Wait';
      $(this).parent().parent().find('.ac:visible').slideToggle().parent().removeClass('active');

      if ($(this).next().is(':hidden'))
      {
        $(this).next().slideToggle().parent().addClass('active'); 
      }
    });
  } );
  </script>
</head>
<body>
  <div id=processing></div>
  <div class="wrapper">
    <div class="accordion">
      <ul>
        <li>
          <h1 onclick=initTable("Anticoag")>Anticoag</h1>
          <div class="ac">
            <div id="AnticoagTable" width="100%">Loading...</div>
          </div>
        </li>

The initTable hits the server to get data and creates a DataTable, which takes a few seconds.

What I'm trying to do is set my div id='processing' to "Processing..." BEFORE the initTable call happens.

Right now what's happening is that it's waiting for the table data to come back, THEN displaying "Processing..."

I tried changing my h1 to onclick=test1(category), with this code. But for some reason my initTable function isn't even getting called with this. Don't know if it's syntax or I'm using it completely wrong.

function test1(category)
{
  test2(category, function()
  {
    initTable(category);
  });
}

function test2(category)
{
  alert("test2");
  document.getElementById('processing').innerHTML = "Processing...";
  document.body.style.cursor = 'Wait';
}

adding initTable function by request function initTable(category) { if (gsCategory === "") gsCategory = category; else if (gsCategory == category) gbToggle = !gbToggle; else gbToggle = false;

    gsCategory = category;

    if (gbToggle === false) {
        gsCategory = category;

        var select = document.forms[0].selFacility;
        var facility = select.options[select.selectedIndex].value;

        var patJson = getJson(facility, category);
        document.getElementById('processing').innerHTML = "Done...";
        document.body.style.cursor = 'Default';
        var anOpen = [];
        var sImageUrl = "../images/";
        makeTable(category);

        var oTable = $('#' + category).dataTable({
            "bProcessing": false,
                "bDestroy": true,
                "aaData": patJson,
                "bAutoWidth": false,
                "aoColumns": [{
                "mDataProp": null,
                    "sClass": "control center",
                    "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">',
                    "sWidth": "5%"
            }, {
                "mDataProp": "S_PAT_NAME",
                    "sWidth": "30%"
            }, {
                "mDataProp": "S_AGE",
                    "sWidth": "15%"
            }, {
                "mDataProp": "S_FIN",
                    "sWidth": "30%"
            }, {
                "mDataProp": "S_ROOM_BED",
                    "sWidth": "20%"
            }]
        });

        $('#' + category + ' td.control').live('click', function () {
            var nTr = this.parentNode;
            var i = $.inArray(nTr, anOpen);

            if (i === -1) {
                $('img', this).attr('src', sImageUrl + "details_close.png");
                var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
                $('div.innerDetails', nDetailsRow).slideDown();
                anOpen.push(nTr);
            } else {
                $('img', this).attr('src', sImageUrl + "details_open.png");
                $('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
                    oTable.fnClose(nTr);
                    anOpen.splice(i, 1);
                });
            }
        });
    } //gbToggle = false
}

Upvotes: 0

Views: 147

Answers (2)

Yoann
Yoann

Reputation: 3060

Your initTable(category) is never called.

test2should be :

 function test2(category,cb){
  alert("test2");
  document.getElementById('processing').innerHTML = "Processing...";
  document.body.style.cursor = 'Wait';
  //Calling the call-back
  cb(category);
 }

That's for your actual code. But you could simply do in your test1

function test1(category)
{
  test2(category);

  //asynchronous call to initTable().
  setTimeout(function(){
      initTable(category);
  },0);
}

Upvotes: 0

naugtur
naugtur

Reputation: 16905

You already assigned a function to click with jQuery, you don't need and shouldn't use onclick attribute

Just put the initTable call inside the click handler function. To recognize what was clicked you can use a data-something attribute

$(document).ready(function()  {
  $('.accordion ul li h1').click(function()  {  
  var category = $(this).attr('data-category');

  $('#processing')..text("Processing...");
  ...
  initTable( category );



<h1 data-category="Anticoag">Anticoag</h1>

You also need to:

  • know that in javascript it is incorrect to put { in a new line

  • get some understanding on what happens when you pass an inline function to other function, because you did

    test2(category, function() { initTable(category); });

And you didn't even declare a second argument in the test2 function definition.

Upvotes: 1

Related Questions