Search code examples
asp.netjqueryasp.net-mvc-2jquery-pluginsthrobber

Conditionally load jquery throbber plugin


I have the code below that shows a throbber and makes a getJSON call to an MVC action when the user changes an entry in a select. This all works great except there is a default -- select -- element in the list for which I don't want the getJSON to run.

However, I can't work out how to apply conditional logic to hooking this event. The conditional logic is shown as the if(selectedValue == -1) But the throbber still runs as I've hooked it in the first line. I've tried removing the first line that hooks the change event and use $.throbberShow(..) inline just prior to the getJSON call but for some reason this doesn't show the throbber.

Any help greatly appreciated.

$("#selectlist").throbber("change", { ajax: false, image: "images/ajax-loader-line.gif" });

                $("#selectlist").change(

                    function () {
                        var selectedValue = $("#selectlist").val();

                        if (selectedValue != -1) {
                            //Tried doing $.throbberShow(...) here without success
                            $.getJSON("/Candidate/GetAddress", { id: selectedValue }, function (data, textStatus) {
                                if (textStatus == "success") {
                                    $("#selectlist").val(data.Line1)
                                    $("#selectlist").val(data.Line2)
                                    $("#selectlist").val(data.Line3)
                                    $("#selectlist").val(data.Town)
                                }
                                $.throbberHide();
                            });
                        }

                    }
                );

Solution

  • It is more a hack than a solution as throbber doesn't support conditions but this should work:

    $("#selectlist").throbber("change", { ajax: false, image: "images/ajax-loader-line.gif", delay: "500" });
    
    $("#selectlist").change(
      function () {
        var selectedValue = $("#selectlist").val();
        if (selectedValue != -1) {
          $.getJSON("/Candidate/GetAddress", { id: selectedValue }, function (data, textStatus) {
            if (textStatus == "success") {
              $("#selectlist").val(data.Line1)
              $("#selectlist").val(data.Line2)
              $("#selectlist").val(data.Line3)
              $("#selectlist").val(data.Town)
            }
            $.throbberHide();
          });   
        } else {
          $.throbberHide();
        }
      }
    );