Solved

How to debug AjaxRequest POST failure

Posted on 2016-09-06
3
67 Views
Last Modified: 2016-09-07
I am working with communities in a Salesforce org. I have a page that does a search for files using a commandLink with a param. Upon button click of the icon for the commandLink a controller method is called and returns the appropriate result based on the search string from the inputText. This all works correctly.

However, if I search using the exact same search string and hit the enter key, the POST fails and I do not get a response. I have a JS script that fires onKeyPress and checks for the enter key code. The script fires and gets to the point of calling the controller method and then  nothing...

here is the script:

            <script type="text/javascript">
                function handleKeyPress(e){
                    var key = 0;
                    if(window.event){
                        key = e.keyCode;
                    }else if(e.which){
                        key = e.which;
                    }
                    if(key == 13){
                        console.log("We are about to call to call the controller method");
                        findFileMethod();                                         
                    }
                }
            </script>

Open in new window


I'm debugging in Firebug trying to identify the issue. Here is the POST failure that I'm seeing in the console window.

screenshot
There doesn't appear to be any JS error and it never reaches the controller method, so I'm stuck on how to debug this and see what the issue is.

Any help is appreciated.
0
Comment
Question by:-Dman100-
  • 2
3 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 41786518
you have to kill the default behaviour for Enter key by returning the value false to the event handler result.
Like this:

... return handleKeyPress(event);

and your function does this:
            <script type="text/javascript">
                function handleKeyPress(e){
                    var key = 0;
                    if(window.event){
                        key = e.keyCode;
                    }else if(e.which){
                        key = e.which;
                    }
                    if(key == 13){
                        console.log("We are about to call to call the controller method");
                        findFileMethod();
                        return false;                                         
                    }
                    return true;
                }
            </script>

Open in new window

0
 

Author Closing Comment

by:-Dman100-
ID: 41786906
Thank you!! Yes, that worked. How did returning false fix the issue?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 41787602
Your function handleKeyPress() works as an Event Handler and is able to do control over event preventDefault behaviour.
One of the ways to preventDefault is to return false from the Event Handler:
https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

In your case the Enter key initiated the Form submission and that stopped the Ajax flow.

Is this explanation enough for you?
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question