[jQuery] Re: Content Loading Question

2008-09-29 Thread Paul Mills 

If I understand this - you are trying add the class 'grid-loading'
when the button is clicked and remove it when the query completes.
If so, then the removeClass command needs to be in the callback
function of the .load command.

Paul

On Sep 29, 4:11 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
 Hello,

 I'm trying to make a div give me a nice loading graphic on top of my
 data so the user knows the page is working on their request.

 I have the following code, however it seems it either happens to
 quickly or the event isn't working as expected.

         \$(#query_button).click(function(){
                 \$('#query').addClass('grid-loading');
                 var store = \$(select#store).val();
                 var dept = \$(select#dept).val();
                 \$(#query).load('content.cgi', {storeselect: store, 
 deptselect:
 dept});
                 \$('#query').removeClass('grid-loading');

         });

 Anyone see what I'm doing wrong here?

[jQuery] Re: Content Loading Question

2008-09-29 Thread [EMAIL PROTECTED] 

I know what your saying, but my javascript skills are not that great.

I've changed my code a bit more to look something like this:

\$('html').click(function(e) {
if ( \$(e.target).is('#query_button') ){
\$(#loading).toggle();
var store = \$(select#store).val();
var dept = \$(select#dept).val();
\$(#query).load('content.cgi', {storeselect: store, 
deptselect:
dept});
\$(#loading).toggle();
}
if ( \$(e.target).is('.view-button') ){
\$(#loading).toggle();
var invoice = \$(e.target).attr('id');
var store = \$(select#store).val();
var dept = \$(select#dept).val();
\$(#query).load('content.cgi', {storeselect: store, 
deptselect:
dept, invoiceselect: invoice});
\$(#loading).toggle();
}
if ( \$(e.target).is('.btn-slide') ){
\$(#panel).slideToggle(slow);
\$(this).toggleClass(active); return false;
}

});

I'm still getting the same results, but I think I'm almost there. (The
last statement doesnt need to have the loading effect.)

On Sep 29, 3:42 pm, Paul Mills [EMAIL PROTECTED] wrote:
 If I understand this - you are trying add the class 'grid-loading'
 when the button is clicked and remove it when the query completes.
 If so, then the removeClass command needs to be in the callback
 function of the .load command.

 Paul

 On Sep 29, 4:11 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
 wrote:

  Hello,

  I'm trying to make a div give me a nice loading graphic on top of my
  data so the user knows the page is working on their request.

  I have the following code, however it seems it either happens to
  quickly or the event isn't working as expected.

          \$(#query_button).click(function(){
                  \$('#query').addClass('grid-loading');
                  var store = \$(select#store).val();
                  var dept = \$(select#dept).val();
                  \$(#query).load('content.cgi', {storeselect: store, 
  deptselect:
  dept});
                  \$('#query').removeClass('grid-loading');

          });

  Anyone see what I'm doing wrong here?

[jQuery] Re: Content Loading Question

2008-09-29 Thread BB 

Try this:

$(#query).load('content.cgi', {storeselect: store, deptselect:dept,
invoiceselect: invoice}, function() {
  $(#loading).toggle();
});

On 29 Sep., 23:03, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
 I know what your saying, but my javascript skills are not that great.

 I've changed my code a bit more to look something like this:

 \$('html').click(function(e) {
         if ( \$(e.target).is('#query_button') ){
                 \$(#loading).toggle();
                 var store = \$(select#store).val();
                 var dept = \$(select#dept).val();
                 \$(#query).load('content.cgi', {storeselect: store, 
 deptselect:
 dept});
                 \$(#loading).toggle();
         }
         if ( \$(e.target).is('.view-button') ){
                 \$(#loading).toggle();
                 var invoice = \$(e.target).attr('id');
                 var store = \$(select#store).val();
                 var dept = \$(select#dept).val();
                 \$(#query).load('content.cgi', {storeselect: store, 
 deptselect:
 dept, invoiceselect: invoice});
                 \$(#loading).toggle();
         }
         if ( \$(e.target).is('.btn-slide') ){
                 \$(#panel).slideToggle(slow);
                 \$(this).toggleClass(active); return false;
         }

 });

 I'm still getting the same results, but I think I'm almost there. (The
 last statement doesnt need to have the loading effect.)

 On Sep 29, 3:42 pm, Paul Mills [EMAIL PROTECTED] wrote:

  If I understand this - you are trying add the class 'grid-loading'
  when the button is clicked and remove it when the query completes.
  If so, then the removeClass command needs to be in the callback
  function of the .load command.

  Paul

  On Sep 29, 4:11 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
  wrote:

   Hello,

   I'm trying to make a div give me a nice loading graphic on top of my
   data so the user knows the page is working on their request.

   I have the following code, however it seems it either happens to
   quickly or the event isn't working as expected.

           \$(#query_button).click(function(){
                   \$('#query').addClass('grid-loading');
                   var store = \$(select#store).val();
                   var dept = \$(select#dept).val();
                   \$(#query).load('content.cgi', {storeselect: store, 
   deptselect:
   dept});
                   \$('#query').removeClass('grid-loading');

           });

   Anyone see what I'm doing wrong here?