jQuery Forum

I have a JSP ( below ) that uses a jQuery autocomplete plugin.

I am trying to set up the text field such that if someone hits the "Enter" key to select an option from the autocomplete menu, everything works the default way AND if they hit "Enter" after that, the form sumbits, and calls my validation function ( quietSubmit() ).

I set up some .bind() functions to tell me if the autocomplete menu is up or not. I'm using that as a flag in another .bind() to tell me if the enter key has been pressed and if so if the menu is up.

The flag seems to be reporting correctly, but if I hit "enter" while the menu is up, to select a choice, the form still submits.

Any ideas on what I can try?

Thanks

    <%@ include file="header.jsp"%>
   
   
    <style>
        .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }
        /* IE 6 doesn't support max-height
        * we use height instead, but this forces the menu to always be this tall
        */
        * html .ui-autocomplete {
            height: 100px;
        }
         .ui-progressbar {
        position: relative;
        }
        .progress-label {
        position: absolute;
        left: 50%;
        top: 4px;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
        }
    </style>
   
    <script type="text/javascript">
    //-----------------------------------------------------------------------------
        var doSubmit = false;
       
        // When the page is loaded/ready
        $(function() {
           
            // Set up the auto complete menu
            var cache = {};
            $( "#org_name" ).autocomplete({
                source: "/acme/acmeorglist",
                select: updateRecordCount
            });// end autocomplete plugin call
   
   
          
            $("#org_name").bind('autocompleteopen', function(event, ui) {
                $(this).data('is_open',true);
            });
   
            $("#org_name").bind('autocompleteclose', function(event, ui) {
                $(this).data('is_open',false);
            });
     
           //Reroute the input field from doing a form submission, to using
            //quietSubmit()
            $("#org_name").bind("keydown", function(e) {
                 var code     = e.keyCode || e.which;
                 var menuOpen = $(this).data('is_open');
                
                 // "Enter" key is pressed
                 if(code == 13 && menuOpen == false) {
                     // Don't submit the form in the default way
                     e.preventDefault();
                     // Do the custom form submission
                     quietSubmit();
                     // Don't submit the form in the default way
                     return false;
                 }
            });           
   
   
   
   
           
        });// end main jQuery call
       
        function updateRecordCount(){
            $.post("/acme/getorgstaffcount",
                    $("#org_name").serialize(),
                   function(data){$("#record_count span").text(data + " records");}
            );       
        }
   
        function quietSubmit(){
            updateRecordCount();
            var org_name    = document.form1.org_name.value;
            var recordcount = 0;
           
            if( isNaN(parseInt($("#record_count span").text())) ){
                recordcount = 0;
            }
            else{
                recordcount = parseInt($("#record_count span").text());
            }   
             
            var msgStats    = "There are " + recordcount + " records for " +
                              org_name + " ";
           
            var msgConfirm  = msgStats + ", proceed to download?";
           
            var msgAlert    = msgStats + "Please make sure your choice is " +
                              "highlighted after choosing it from the "     +
                              "auto-completeion menu or make another choice";
           
            if(recordcount < 1){
                jqAlert(msgAlert,"Okay",closejQAlertBox);           
                return false;
            }
            else if( recordcount > 0){
                  jqConfirm(msgConfirm,"Submit","Cancel",submitSearch,CancelDoNothing);
                  return doSubmit;
            }
            return true;
       
        }// end function quietSubmit()
        //-------------------------------------------------------------------------
        function submitSearch(){
            doSubmit = true;
            doProgress();
        }
        //-------------------------------------------------------------------------
       
        function doProgress(){
           
            var progressbar   = $( "#progressbar" );
            var progressLabel = $( ".progress-label" );
           
            progressbar.show();progressLabel.show();
           
            //changing of progress bar text
            $( "#progressbar" ).progressbar({
             value:0,
             change: function(){progressLabel.text( progressbar.progressbar( "value" ) + "%" );},
             complete: function(){progressLabel.text( "Complete!" );progressbar.hide();progressLabel.hide();}
            });
           
                   
            setTimeout( progress, 1000 );
           
        }// end doProgress()
       
        function progress() {
                   
            $.post("/acme/getprogress", function(data){
                $( "#progressbar" ).progressbar("option","value",data);
             });
           
            var pval  = $( "#progressbar" ).progressbar("option","value");
   
            if ( pval < 99 ) {
             setTimeout( progress, 250 );
            }
        }
       
       
    //----------------------------------------------------------------------------
    </script>
   
    <br>
    <br>
   
    <div class="ui-widget">
        Please select one of the <strong>${acme_org_count}</strong> acme
        Organizations:
        <p>&nbsp;</p>
        <label for="org_name">Organization Abbreviation: </label>
        <form name="form1" action = "getphonelist" method = "post" onSubmit = "return quietSubmit();">
            <input id="org_name" name="org_name" />
            <div id="record_count">
                <span>Status</span>
            </div>
            <div id="progressbar"><div class="progress-label"></div></div>
            <input type="submit"  value="Download a phone list for this organization" />
                                
        </form>
    </div>
   
   
    <%@ include file="footer.jsp"%>
    <%@ include file="header.jsp"%>
   
   
    <style>
        .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
        }
        /* IE 6 doesn't support max-height
        * we use height instead, but this forces the menu to always be this tall
        */
        * html .ui-autocomplete {
            height: 100px;
        }
         .ui-progressbar {
        position: relative;
        }
        .progress-label {
        position: absolute;
        left: 50%;
        top: 4px;
        font-weight: bold;
        text-shadow: 1px 1px 0 #fff;
        }
    </style>
   
    <script type="text/javascript">
    //-----------------------------------------------------------------------------
        var doSubmit = false;
       
        // When the page is loaded/ready
        $(function() {
           
            // Set up the auto complete menu
            var cache = {};
            $( "#org_name" ).autocomplete({
                source: "/acme/acmeorglist",
                select: updateRecordCount
            });// end autocomplete plugin call
           
            /*
            $("#org_name").bind('autocompleteopen', function(event, ui) {
                $(this).data('is_open',true);
            });
   
            $("#org_name").bind('autocompleteclose', function(event, ui) {
                $(this).data('is_open',false);
            });
            */
           
            //Reroute the input field from doing a form submission, to using
            //quietSubmit()
            $("#org_name").bind("keydown", function(e) {
                 var code     = e.keyCode || e.which;
                
                 // "Enter" key is pressed
                 if(code == 13) {
                     // Don't submit the form in the default way
                     e.preventDefault();
                     // Do the custom form submission
                     //quietSubmit();
                     // Don't submit the form in the default way
                     return false;
                 }
            });           
           
           
        });// end main jQuery call
       
   
       
       
       
        function updateRecordCount(){
           
            $.post("/acme/getorgstaffcount",
                    $("#org_name").serialize(),
                   function(data){$("#record_count span").text(data + " records");}
            ); 
           
           
            /*
            $.ajax({
                url: "/acme/getorgstaffcount",
                type: "POST",
                data: { org_name: $("#org_name").val()},
                async:false,
                cache: false,
                success: function(data) {
                    $("#record_count span").text(data + " records");
                }        
             });
            */
           
           
           
           
           
        }
   
        function quietSubmit(){
            updateRecordCount();
            var org_name    = document.form1.org_name.value;
            var recordcount = 0;
           
            if( isNaN(parseInt($("#record_count span").text())) ){
                recordcount = 0;
            }
            else{
                recordcount = parseInt($("#record_count span").text());
            }   
             
            var msgStats    = "There are " + recordcount + " records for " +
                              org_name + " ";
           
            var msgConfirm  = msgStats + ", proceed to download?";
           
            var msgAlert    = msgStats + "Please make sure your choice is " +
                              "highlighted after choosing it from the "     +
                              "auto-completeion menu or make another choice";
           
            //alert("recordcount == " + recordcount);
           
            if(recordcount < 1){
                jqAlert(msgAlert,"Okay",closejQAlertBox);           
                return false;
            }
            else if( recordcount > 0){
                  jqConfirm(msgConfirm,"Submit","Cancel",submitSearch,CancelDoNothing);
                  return doSubmit;
            }
            return true;
       
        }// end function quietSubmit()
        //-------------------------------------------------------------------------
        function submitSearch(){
            doSubmit = true;
            //alert("before doprogress");
            document.form1.submit();
            doProgress();
        }
        //-------------------------------------------------------------------------
       
        function doProgress(){
           
            var progressbar   = $( "#progressbar" );
            var progressLabel = $( ".progress-label" );
           
            progressbar.show();progressLabel.show();
           
            //changing of progress bar text
            $( "#progressbar" ).progressbar({
             value:0,
             change: function(){progressLabel.text( progressbar.progressbar( "value" ) + "%" );},
             complete: function(){progressLabel.text( "Complete!" );progressbar.hide();progressLabel.hide();}
            });
           
                   
            setTimeout( progress, 1000 );
           
        }// end doProgress()
       
        function progress() {
                   
            $.post("/acme/getprogress", function(data){
                $( "#progressbar" ).progressbar("option","value",data);
             });
           
            var pval  = $( "#progressbar" ).progressbar("option","value");
   
            if ( pval < 99 ) {
             setTimeout( progress, 250 );
            }
        }
       
       
    //----------------------------------------------------------------------------
    </script>
   
    <br>
    <br>
   
    <div class="ui-widget">
        Please select one of the <strong>${acme_org_count}</strong> acme
        Organizations:
        <p>&nbsp;</p>
        <label for="org_name">Organization Abbreviation: </label>
        <form name="form1" action = "getphonelist" method = "post">
            <input type = "text" id ="org_name" name ="org_name" />
            <div id="record_count">
                <span>Status</span>
            </div>
            <div id="progressbar"><div class="progress-label"></div></div>
            <input type="button"  onClick = "quietSubmit();" value="Download a phone list for this organization" />
                                
        </form>
    </div>
   
   
    <%@ include file="footer.jsp"%>

When I run a call to .post(), everything works fine.  My server side component does its thing, returns an excel sheet to the browser where I see a gray box pop up asking me if I want to view the excel file or save it:


function doMySubmitStuff(){
      $.post("/acme/getphonelist", $("#org_abbr").serialize() );
}


However, if I move things around into other functions, the server side component executes, but I don't get a gray dialog box asking me to view or save the excel file:


function doMySubmitStuff(){
      doSomeStuff();
      doMe();
}
function doMe(){
      $.post("/acme/getphonelist", $("#org_abbr").serialize() );
}

Is there a scope issue of some kind?

Hi,

I'm using the jQuery progressbar plugin.

I'm not getting the information I need to end a "loop" ( recursive function, last one, progress() ).

My logging shows that server side the information is being sent.

Using alert statements neither my bval and val vars are being updated form zero and I am not seeing it.
So, I thought I would ask for another pair of eyes.

What are the conditions that the jQuery progressbar throws the "complete" event?

Thanks in advance for any ideas

Hi,

I am wondering how to combine a call to .post() with a progress bar so that when my user downloads files s/he will see a progress bar while they wait.

I programmatically submit a form with this code:



The call to .post() sends the name of an organization to my server side component, which will send back a completed (large) file when it is done ( a browser dialog box comes up asking the user to view or save the file )

doProgress() queries the server to see what % of the job is done and updates a progressbar:



By putting in various alert statements, it looks like doProgress() isn't really contacting the server and getting progress updates until the job is done.

I'm still getting used to jQuery. I understand that post() runs asynchronously by default so I don't understand why doProgress() and my original .post() request do not seem to be running at the same time.

Thanks in advance for any ideas

Hi,

I'm thinking about using the jQuery Autocomplete plugin to display a long list of strings.

I have about 1,000 strings/items.    Would this be too large to do a standard database call on the way to the screen, and print the options in the screen?

I ask because I used a javascript GUI component ( not jQuery ) last year that was fantastic, but the performance in IE 7 was pretty bad.   I ended up having to implement an ajax call and my own paging of the results on the backend to keep IE 7 performing well.  Chrome and Firefox did okay and now the minimum browser in our org is IE 8.

So, how many items in a jQuery Automcomplete can I have before I need to move to an ajax call and possibly database paging to keep it performing well?   Which browsers have performance issues?

Thanks in advance for any information

Steve

I know it sounds like a lame question, but I am new to JQuery UI and an intermediate CSS person.  How can I make the fonts and buttons in a JQuery UI dialog box smaller?   Which file and CSS definition would I go to....or would I make my own CSS.   I'm using the microsoft/redmond theme.

Thanks much in advance for any tips

Steve

The jQuery UI Datepicker has arrow buttons so you can scroll forward or backward a month at a time.

Is it possible to set up extra controls that would also allow the user to scroll forward or backward a year at a time?

I am trying to use a jQuery dialog box to replace the standard confirm() as much as is possible.

I'm almost there, but I would like to reuse the code below throughout my web app and for that I need the jQuery dialog box to change its size to fit the message.

When I've tried setting height:auto or width:auto, the dialog disappears, showing only the message ( or maybe it is the dialog box taking over the whole screen ). I tried this in combination with setting maxWidth and maxHeight to no avail.

This happens if I use jQuery-1.7 or jQuery-1.8.2.

If I use jQuery-1.9.1 the dialog does not come up at all

I downloaded a freshly update verusion of my jQuery-ui theme ( "redmond" )

Thanks in advance for any tips in helping me find a way to make the dialog box automatically resize itself to fit the message ( without scrolling)

Thanks