Having trouble with jquery callback

Question

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
}

Answer 1

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.

Answer 2

Your initTable(category) is never called.

test2 should 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);
}

Having trouble with jquery callback

Question

2 answers

solution1
1 2013-02-10 19:47:21

solution2
0 ACCPTED 2013-02-10 19:41:57

Having trouble with jquery callback

Question

2 answers

solution1 1 2013-02-10 19:47:21

solution2 0 ACCPTED 2013-02-10 19:41:57

solution1
1 2013-02-10 19:47:21

solution2
0 ACCPTED 2013-02-10 19:41:57