How to make an javascript ajax call using jquery and JSF?

Question

I am trying to make an $.ajax request using javascript in a JSF primefaces xhtml file. The returned data is my template page from primefaces. The StockServlet is not executing on the server. I believe it is being caught by the Faces servlet. Has anybody had this problem before?

         <script>
            function getCubeData(){
                $cubeName = $("#form\\:cubeName").val();
               // alert("ajax call"+$cubeName);
                $.ajax({
                    url: 'StockServlet',
                    dataType: 'json',
                    data: {cubeName: $cubeName},
                    type: 'get',
                    cache: false,
                    success: function(response)
                    {alert("success"+response);
                        var infoHTML = '';
                        $.each(response, function(stock, stockInfo)
                        {
                            infoHTML += '<p>Symbol: ' + stock + "   Company: " + stockInfo.name + '   Price: ' + stockInfo.price + '</p>';
                        })
                        $("#mycube2").innerHTML(infoHTML);
                        alert("infohtml"+infoHTML);
                    },
                    error: function(request, textStatus, errorThrown)
                    {
                        alert("error:" + textStatus);
                    },
                    complete: function(request, textStatus)
                    {
                        alert("complete" + request.responseText);
                        alert("complete" + textStatus);
                    }
                });

            }

My StockServlet is defined here

@WebServlet(asyncSupported = false, name = "StockServlet", urlPatterns = {"/StockServlet"}) public class StockServlet extends HttpServlet ........

So, the ajax response returned a 404? Did you for instance inspect the HTTP traffic in browser? (press F12, Network). By the way, why not just using JSF builtin ajax facilities via e.g. ``, ``, etc? Saves a lot of boilerplate code and headache. — BalusC, Oct 26 '15 at 22:09
I inspected the console and the request is being sent but the StockServlet is not responding. My problem is I am trying to get server sided data for a xy custom cube scatter plot/chart. I am new to primefaces and I do not see a way to grab alot of data to be manipulated by JS. Any ideas or directions I should be looking at? — snafua, Oct 26 '15 at 22:43
For the last time: which response did you actually get? The answer is therein. — BalusC, Oct 27 '15 at 07:01
Sorry for the delay, I get a 404. TO test the servlet I created an html page with the getCubeData function and the servlet is responding to requests. When I try a getCubeData from the xhtml page I get an 404 error. I think there is a path problem with the servlet request using xhtml. — snafua, Oct 28 '15 at 21:21

score 1 · Accepted Answer · edited May 23 '17 at 12:03

All relative URLs in the HTML document and all scripts therein are relative to the URL of the HTML document itself. I.e. the URL which you see in browser's address bar. The URL which you used for the servlet url: 'StockServlet' doesn't start with the domain nor the slash and is thus relative to the current folder in the document URL. Apparently your JSF page is by itself sitting in a subfolder and therefore the relative URL to the servlet is plain wrong. It isn't in that subfolder at all.

You'd basically need to go one folder up:

url: '../StockServlet'

Or make it domain-relative (start with /):

url: '#{request.contextPath}/StockServlet'

How to make an javascript ajax call using jquery and JSF?

1 Answers1

See also: