This discussion is archived
1 2 Previous Next 21 Replies Latest reply: Jan 22, 2013 4:34 AM by Tom Petrus RSS

Validate Minor Problem in Jquery!!

665735 Newbie
Currently Being Moderated
Hi All,

I had created one example in apex.oracle.com and here are the crdentails for the same.
I could able to fix the problem upto 90% but missing 10% of the problem.
Can any one help me out to resolve the 10% problem.
I had kept alert messages where ever necessary in my application.


1. Please find the credentails below#
workspace#apex_demo_bosu
Username#BORRASUBRAHMANYAM@YAHOO.COM
Password#seshubosu
URL#http://apex.oracle.com/pls/apex/f?p=49934:1

2. Created two fields as Country and City, City data will be populated based on Counrty filed.
3. Now i had enter as "India" in country field and it populates few citites in city filed,either through mosue click or using tab filed.
4. For the first time when we enter country and clik on tab the cursor will redirect to city which is working fine.
5. But once data is entered in both country and city, and agian if i want to change the country deatils when i move back from city uisng tab or click on mouse in country and
if we chnage or with out change any new value in counrty and click on mouse or tab the values are got cleared.
6. Can some one look into this and explain the process where i had have done mistake. Why the second time is not picking the value and it is getting cleared.

7. All validation is kept under "Where" region.



Thanks,
Anoo..

Edited by: Anoo on Jan 17, 2013 12:43 AM
  • 1. Re: Validate Minor Problem in Jquery!!
    fac586 Guru
    Currently Being Moderated
    Anoo wrote:
    Hi All,

    I had created one example in apex.oracle.com and here are the crdentails for the same.
    I could able to fix the problem upto 90% but missing 10% of the problem.
    Can any one help me out to resolve the 10% problem.
    I had kept alert messages where ever necessary in my application.
    --
    1. Please find the credentails below#
    workspace#apex_demo_bosu
    Username#BORRASUBRAHMANYAM@YAHOO.COM
    Password#seshubosu
    URL#http://apex.oracle.com/pls/apex/f?p=49934:1
    
    2. Created two fields as Country and City, City data will be populated based on Counrty filed.
    3. Now i had enter as "India" in country field and it populates few citites in city filed,either through mosue click or using tab filed.
    4. For the first time when we enter country and clik on tab the cursor will redirect to city which is working fine.
    5. But once data is entered in both country and city, and agian if i want to change the country deatils when i move back from city uisng tab or click on mouse in country and 
    if we chnage or with out change any new value in counrty and click on mouse or tab the values are got cleared.
    6. Can some one look into this and explain the process where i had have done mistake. Why the second time is not picking the value and it is getting cleared.
    
    7. All validation is kept under "Where" region.
    DO NOT use code formatting on post content that is not code, data, or sample output. (Why do you think it is appropriate to do this?)

    Please edit the OP so it is readable.
  • 2. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi,

    I had removed the code format in my previous mail.

    Regards,
    Anoo..
  • 3. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Team,

    Any suggestion on this, to make more simple words i had placed in excel format, may be this will help you to understand more on this.
    --
    SNO     Country                                   Comments                                           Result
    1     Enter country as India        Now Press tab it will go to City select some value           Pass
    2     Enter country as India        Now Press tab it will go to City select some value 
                                       and come back again to Country filed now change 
                                        the country or no change press tab"                      Fail (In this case country filed gets cleared)
    {code}
    
    Note:Simliar when we try with Mosue the same thing is happened or when the key is also pressed.
    
    Regards,
    Anoo..                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
  • 4. Re: Validate Minor Problem in Jquery!!
    KeithMalay Explorer
    Currently Being Moderated
    Anoo,

    I'm not totally sure that I have your use case right, but it sounds like you're just working with a simple cascading LOV example. I don't know if using JQuery is a requirement for you, but if have the option of choosing I would go with the built-in cascading LOV functionality that APEX provides out-of-the-box.

    I logged into your workspace/app, created a new Region, and provided a couple of examples based on the queries your on-demand processes were using with the custom JQuery solution.

    Test it out and see if this works for you.

    Come back and update the thread if the APEX examples aren't an option for you, and I'll try to help with the JQuery function you're using in the Where Region.

    Hope this helps.

    Keith Malay

    Edited by: Keith Malay on Jan 17, 2013 8:25 AM
  • 5. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Keith,

    Thanks a lot for providing a wonderful solution. It would be very greatful if you can make changes in Jquery under where.
    The reason is we are uisng lower version of apex3.0 and it was implmneted long back uisng jquery by seniors, which is alreday in live, so we may not in position to change the feature.

    Hope you got my exact problem where we are struglling out to fix the 10% of problem. Could you please help me out here using Jquery under where region.
    Also i would request to keep the test example which you had created for our reference.

    Waiting for your solution.

    Regards,
    Anoo..
  • 6. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    Pfewww -
    Firstly: please, PLEASE: indent your code properly. Align braces and brackets, indent code. Please, put a closing bracket on a newline.
    How often does it not happen that you make a change, or comment a line, you run the page, and a js error pops up because there was a bracket at the end of the commented line. That is just frustrating.
    Even when putting alerts in, please, indent them so they are in line with their respective code block.
    Second: when you need to trace your steps so exhaustively, don't use alerts. console.log() is just much and much more useful in these cases. Alerts can be handy because they interrupt the flow, but in the case of this autocomplete it was really, REALLY confusing to follow what was going on.
    Third: put meaningful messages in your debug. This even helps you analyzing the problem as soon as you try to put in words with what is going on. A really cryptic or generic message such as "one: ", "two: ", "three: " just doesn't help you forward. Especially when you combine this with alert messages which break up the flow. By the time your written or read them and actually execute the code and encounter them, you almost never remember their exact execution point. Leading you to go back, reread/analyse, and execute again only to find you forgot some other message's execution point. Clearly state in your debug what is going on to help you see what is going on.

    On to your problem:
    the issue is that the remembered value is fiddled with too much. In the blur function, when the field has been entered and then left without changing anything, the saved value would be blanked out, and the field gets blanked out too (and city!)
          .live('blur', function (e) {
             console.log("country blur: has an item been selected in the autocomplete? "+ctryItemSelected);
                   if(!ctryItemSelected){
                      console.log("No item (country) has been selected in the autocomplete");
                if($("#P1_ENG_CTRY").val() != ctryValue){
    ...
             }else{
                  console.log("An item has been selected from the autocomplete dropdown:"+ ctryItemSelected + " - ctryValue: " + ctryValue);
                      ctryItemSelected = false;
                      //ctryValue=""; 
                   };
    Same goes for the code on city.

    However, i don't see the point of all this code. This is a reinvention of the wheel as a lot of the functionality already exists in jquery. You did not mention your jQuery UI version in your local instance though, and this might matter greatly in this regard.

    Put shortly, the whole code block to handle the country can be shortened to this:
    $( function() {    
          $("#P1_ENG_CTRY").autocomplete({
             autoFocus: true,      
               source : function( request , response) { 
                         data = getCountry(request.term);
                         response( data );
                      },
             change : function(event,ui) {
                      //DOCS:
                      //Triggered when the field is blurred, if the value has changed
                         if(!ui.item){
                            $(this).val('');
                         };
                         //always blank out city when value has changed                     
                         $("#P1_ENG_CITY").val('');                     
                      }
          });
    });
    autoFocus will focus the first item in the autofocus. Change triggers when the field blurs -AND- the value has changed.
    There is no need to do all those checks which are present in the original code, and there is no need for a blur function to check all those variables. This does the exact same!
    Type some letters, autocomplete pops up. Tabbing selects first value (thanks to autoFocus: true). If no item is selected, the field blanks out (although if you didn't do this, the typed in value would remain present). I coded this in because the original behaviour was like this.
    Going back to the item, and for example remove 2 letters, then pick India again, will not trigger a change, because jQuery checks for a value change.

    However, i first fixed the original piece of code (seen above). I did not remove it, i simply commented it.
    Both the country and city autocompletes have been changed to the reduced code.
  • 7. Re: Validate Minor Problem in Jquery!!
    KeithMalay Explorer
    Currently Being Moderated
    Anoo,
    This should definitely work for you. I logged in and tested Tom's rewrite and it works great.

    Tom,
    Thanks for the effort. Great solution!

    Keith Malay
  • 8. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Tom,

    This a wonderful amazing results, i will do few rounds of testing and implement in my application and will close the ticket by tomorrow.
    Before this i would like to say few things from my end which i have done mistakes not to repeat again.

    1. I will take care code indent preperly.
    2. Sure going forward i will use console.log rather than alert. As i am not much aware of console.log, i had created a replica instance with application Id#24783 which includes
    console.log, when i am trying to understand it is throwing java script error as "console" is undefined. Do we need any additional files to work console properly.
    Could you please help me how to trace console things.
    3. I will remeber and keep proper message for tracking the things.
    4. Currently we are using Jquery files as "jquery-1.7.2.min.js/jquery-ui-1.8.20.custom.min.js/jquery-ui-1.8.21.custom.js/jquery.htmldbHscroll-0.0.1.min.js"
    5. We had also used css files as "jquery-ui-1. 8. 20. custom. css/jquery-ui-1. 8. 21. custom. css/jquery. autocomplete. css".
    6. Could you please provide me exact Jquery link or materail, since when i had tried i could not able to find the apporiate solution to resolve the problem.

    Hoping to get feedback for points#2 and point#6 (if any).
    Once again thank you for your valuable effort time.

    Regards,
    Anoo..

    Edited by: Anoo on Jan 18, 2013 4:22 AM
  • 9. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    As for 1/ and 3/ : those are really recommendations in general ;-) It'll not only help others understand and read your code better, but it'll really help yourself aswell!

    2: Console.log generally doesn't need anything special. However, in IE you will need to open the developer tools (F12) first for the page not to throw errors. You can find some solutions or workarounds to this HERE in case you want to leave your console.log lines in your code but aren't working on the javascript at that moment.
    I also always forget this: on apex pages you could simply use
    apex.debug("This is a debug message");
    This will only emit debug when you run the page in debug mode, so that works great just as well! I'm just stuck in the console.log habit :)

    6: As to your jquery files: those are good. I just wasn't sure if the solution would work alright once you port it over to your local instance, because of used local libraries. The jquery autocomplete got added in version 1.8, and your version is a recent one.
    To look up functionalities, simply go to the jquery UI site. There are demos there, and they always include a link to the respective API page of the widget. http://api.jqueryui.com/
    For example, the autocomplete page: http://api.jqueryui.com/autocomplete/ You can find all the possible events, methods and options there.
  • 10. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Tom,

    I have a quick question, while i was testing in my application, we found one minor thing, is it possibel to have solution for the same?
    The thing i had Enter manually in country as "singapore" but with out pressing tab or selecting from list with help of mosue i had click on city, in this case both fields will clear.
    Would like to know weather any solution.

    Regards,
    Anoo..
  • 11. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    This is the doing of the change function as specified on the autocomplete. I set it up to clear out the field when there has been no selection from the autocomplete values (so, not through picking one or entering a valid value which would result in the first value being picked through autofocus).
    And the city value will also get blanked out when the country has changed value, which is a good thing i'd say, as you'd not want to create confusion about whether the selected city is actually valid. Don't forget, if you do not blank out the city value at this point, you could potentially let the user submit these values (a city which is not actually linked to the current value of country).
             change : function(event,ui) {
                      //DOCS:
                      //Triggered when the field is blurred, if the value has changed
                         if(!ui.item){
                            $(this).val('');
                         };
                         //always blank out city when value has changed                     
                         $("#P1_ENG_CITY").val('');                     
                      }
    So, in this change function, the test for ui.item is to check if an item has been selected and if not, blank out the field. Remove this structure if you want to leave in the value, always, even if not a valid/existing selection.
    The second line will blank out the city. Remove that line if you do not want that.
    Easy as that :-)
  • 12. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Tom,

    Thanks for relpy, but it will have a huge impact as mentioned below.

    1. As you have mention that it will not check weather this is valid or not.
    2. For a scenerio i had enter "singapre" in country, when i had clicked on city using mouse the value enetred in country remains but it will not macth exactly in database data.
    Then it will insert mismatch data.
    3. In order to overcome such kind of problems, can we have validation if that not matches from dtabase point of view. May be javascript error saying country does not match with enetred or selcted from list.
    4. I am thinking how much it will be difficult since in backend some words can have upper case any of the words.
    5. If this is much difficlt then we will try to explain the proces to users.

    Regards,
    Anoo..
  • 13. Re: Validate Minor Problem in Jquery!!
    Tom Petrus Expert
    Currently Being Moderated
    Hi Anoo,

    1st: :-(
    2nd: Indeed: when clicking away values will blank out. There is only a builtin that deals with TAB. Simply clicking away does not select any value. This requires a custom solution, which i now understand why it was in place. It had some errors such as you described, but i believe they're gone now. I've commented my own code out and corrected the original piece of code.
    I didn't change much extra, but these stand out:
          focus  : function(event , ui){               
                      if(ctryValue !=""){
                         ctryItemSelected = true; 
                      };
                   },
          select: function(event, ui) {
                     ctryItemSelected = true;
                     ctryValue = ui.item.value;
                  }, 
    focus: no event.preventDefault(). I don't believe this is necessary, although you could put it in place again if you do not like the value changing when a user highlights an option in the autocomplete with the keyboard.
    select: update the ctryValue with the selected item's text. Not doing this will cause the blanking out of the field when you click and leave after an initial selection. That would only happen when you made an actual selection from the dropdown, and not when you would rely on the blur function to handle making a selection.
    Give it a try, it seems to work fine now.
  • 14. Re: Validate Minor Problem in Jquery!!
    665735 Newbie
    Currently Being Moderated
    Hi Tom,

    I think it is getting much complex now, the code changes is wroking even tough i select from list, but i could able to see the junk dada can entered in Fields.
    The problem what i had saw, i had enter "country as "India" and city as"Mahglutan", before inserting into database i had went and made changes to city as "MahglutanCity" and
    click on submit" button it got accepted with out any problem.
    This problem i could able to see when we use the keyword arrow keys buttons.
    It means that city inserted with junk data in back end.

    In addition to this i was checking the below code what i am checking before submitting into process, but this is also not allowing throw error message when we have enter any junk data in anay of fileds. The below code is only for City.

    Once again thanks for your help, and waithing for solution.
    var validCity=true;
    function validateCITY()
    { 
    
         $("#P1_ENG_CITY").each(function ()
         {
              var data=$.data(this); //this -> should be the object or Text box element
              /*if (data.autocomplete.selectedItem){              
                     if(data.autocomplete.selectedItem==undefined)*/
                   
                   if($("#P1_ENG_CITY").val()==undefined) {
                       
                      validCity = false;  //error scenario
                        $(this).css("background-color","#FF0000"); //Red color
                        alert("City value selected is not present in autocomplete");
                        return false;
                   }
                   else
                   {
                        
                        $(this).css("background-color","#FFFFFF"); //success scenario white color
                        validCity = true;
                   }
              /*}
              else
              {
                   validCity = false; //error scenario
                   $(this).css("background-color","#FF0000"); //Red Color
                   alert("City value selected is not present in autocomplete");
              }*/
         });
         return validCity;
    }
1 2 Previous Next

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points