0

I have this problem where the jQuery get function inside my updateMyApps isn't being called correctly. I call the function right after declaring it and that works perfectly. It loops through the data and appends the elements to the DOM.

But when I submit the form #addapplicationform it runs the jQuery post function which works correctly but the updateMyApps function doesn't seem to be working correctly when that happens.

The console.log("Test"); always seems to get called. Even when submitting the form. But for some reason the callback function for that get request only gets called that one time on page load.

<script>
function updateMyApps() {
    console.log("Test"); //Always works
    $.get("/api/clients", function(data) {
        console.log(data); //Works first time
        $("#myapps").html("<h4>My Applications</h4>");
        data.forEach(function (item) {
            var element = '<div>' + item.name + '</div>' + '<div>' + item.id + '</div>' + '<div>' + item.secret + '</div>' + '<a href="/edit"><input type="submit" class="submit btn btn-primary form-control" value="Edit" style="width: 100px;"></a>';
            $("#myapps").append(element);
        });
    });
}
updateMyApps(); // Works perfectly

$("#addapplicationform").submit(function( event ) {
  event.preventDefault();
  $.post("/api/clients", $( "#addapplicationform" ).serialize(), function () {
    updateMyApps(); //Doesn't work
  });
});
</script>

Any ideas on why the get request callback is only firing once?

EDIT

Forgot to mention this. It looks like the GET /api/clients only is getting called on page load. When submitting the form it isn't even hitting my back end at all.

EDIT 2

Realized this was a caching issue. Adding $.ajaxSetup({ cache: false }); seems to have fixed the issue. Also marked the question as duplicate of where I found that code snippet.

Charlie Fish
  • 13,172
  • 14
  • 64
  • 137
  • Did you check that you are not getting any errors on the server side? Does the $.get gets fired on the console in the network tab? – revobtz Sep 25 '16 at 02:32
  • Doesn't even look like it's hitting my server. – Charlie Fish Sep 25 '16 at 02:34
  • try this and check if the fail handler gets fired... $.get("/api/clients", function(data) { }).fail(function() { alert( "error" ); }); – revobtz Sep 25 '16 at 02:35
  • The `.fail` function isn't even being called. – Charlie Fish Sep 25 '16 at 02:37
  • try to check if at least this is really being called $.get("/api/clients", function(data) { }).fail(function() { alert( "error" ); }).always(function() { alert( "I am getting called" ); }); – revobtz Sep 25 '16 at 02:40
  • @revobtz Nope. The `always` function only gets called on page load. Not when submitting the form. – Charlie Fish Sep 25 '16 at 02:41
  • How did you confirm that `updateMyApps()` is only called once? Can you create a jsfiddle http://jsfiddle.net or plnkr http://plnkr.co to demonstrate? – guest271314 Sep 25 '16 at 02:47
  • @guest271314 `updateMyApps()` is called multiple times. Once when page is loaded and whenever I submit the form. I know that because `console.log("Test");` gets called on page load and when I submit the form. BUT `console.log(data);` only gets called on page load not when I submit the form. – Charlie Fish Sep 25 '16 at 02:49
  • This only makes me think that for some reason the submit handler is not being called when your are submitting the form. try to paste the full source code of the form. – revobtz Sep 25 '16 at 02:49
  • @revobtz - it clearly is being called as the `console.log("Test")` is apparently being run – Jaromanda X Sep 25 '16 at 02:50
  • @CharlieFish can you reproduce issue at jsfiddle? Is `/api/clients` expecting both `GET` and `POST` requests? – guest271314 Sep 25 '16 at 02:50
  • which version of jQuery are you loading - I only ask because it may be some bug in that version of jQuery where calling a jquery ajax function within the callback of another jquery ajax function may be broken in that specific version of jquery - I've never heard of such a bug it's one avenue to explore – Jaromanda X Sep 25 '16 at 02:54
  • @guest271314 - `Is /api/clients expecting both GET and POST requests` - if you read the question, you'll see BOTH work, it's just that the GET doesn't work on submit – Jaromanda X Sep 25 '16 at 02:55
  • @guest271314 `/api/clients` does have both GET and POST options. And not sure how I could do it on JSFiddle since it requires a backend. – Charlie Fish Sep 25 '16 at 02:56
  • @JaromandaX jQuery Version 1.11.3. https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js – Charlie Fish Sep 25 '16 at 02:56
  • @CharlieFish have you tried the latest 1.x version? 1.12.4 - not sure if any changes from 1.11.x -> 1.12.x would break any other code, just a suggestion – Jaromanda X Sep 25 '16 at 02:58
  • also look at using http://api.jquery.com/ajaxerror/ - maybe that will fire with useful information – Jaromanda X Sep 25 '16 at 03:01
  • @CharlieFish You can mock an ajax response at stacksnippets, jsfiddle or plnkr. See [Does Stack Overflow have an “echo page” to test AJAX requests, inside a code snippet?](http://meta.stackoverflow.com/questions/288902/does-stack-overflow-have-an-echo-page-to-test-ajax-requests-inside-a-code-sni/290948#290948) , jsfiddle [docs](http://doc.jsfiddle.net/use/echo.html) – guest271314 Sep 25 '16 at 03:04
  • @JaromandaX I've been using the older version due to [this](http://stackoverflow.com/questions/38806763/zombie-js-jquery-load-error-j-getclientrects-is-not-a-function) issue. – Charlie Fish Sep 25 '16 at 03:04
  • WOW so strange. I just started using this proxy/vpn thing because StackOverflow was giving me an error about my IP rate limiting. For whatever reason it now seems to be working. Only thing I changed in my code is added the ajaxerror which never got fired but it just started working. Makes 0 sense to me. – Charlie Fish Sep 25 '16 at 03:05
  • An unhandled `Promise` rejection? – guest271314 Sep 25 '16 at 03:06
  • @guest271314 No idea. Kinda over my head at this point haha. – Charlie Fish Sep 25 '16 at 03:07
  • Is error handler called? – guest271314 Sep 25 '16 at 03:07
  • @guest271314 Nope. – Charlie Fish Sep 25 '16 at 03:08
  • Well, if Question is resolved, you can post and accept your own Answer, or close Question? Not sure how users viewing Question can reproduce issue? Not a suggestion, only a possible consideration. – guest271314 Sep 25 '16 at 03:10
  • Hmm. I will probably close the question. I don't really have an answer to provide. One last question tho. It seems to work when I disable caching in my browser. But when I have caching enabled it fails and doesn't update. Even tho the content has changed. Any ideas on why that might be happening? That would be the answer if I could figure it out. – Charlie Fish Sep 25 '16 at 03:11
  • I don't know which server side language but if php try this: header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Expires: Sat, 26 Jul 1990 05:00:00 GMT"); This will disable cache on all web browsers. – revobtz Sep 25 '16 at 11:35

1 Answers1

-1

Try adding a console.log in your submit.... 

<script>
function updateMyApps() {
    console.log("Test"); //Always works
    $.get("/api/clients", function(data) {
        console.log(data); //Works first time
        $("#myapps").html("<h4>My Applications</h4>");
        data.forEach(function (item) {
            var element = '<div>' + item.name + '</div>' + '<div>' + item.id + '</div>' + '<div>' + item.secret + '</div>' + '<a href="/edit"><input type="submit" class="submit btn btn-primary form-control" value="Edit" style="width: 100px;"></a>';
            $("#myapps").append(element);
        });
    });
}
updateMyApps(); // Works perfectly

$("#addapplicationform").submit(function( event ) {
  event.preventDefault();
  console.log("works!!!"); // <-- add this console.log
  $.post("/api/clients", $( "#addapplicationform" ).serialize(), function () {
    updateMyApps(); //Doesn't work
  });
});
</script>
Sergio Rivas
  • 523
  • 3
  • 9
  • Yes that console.log works. But that doesn't answer my question. The `get` callback function inside of `updateMyApps` still isn't getting called. – Charlie Fish Sep 25 '16 at 02:24
  • I just trying to see your error...And for debugging what if you add a console.log() inside your $.post ? Does it works? – Sergio Rivas Sep 25 '16 at 02:25
  • Yes. The post gets called. And the `updateMyApps` gets called. The `console.log("Test");` gets called every time. But the `get` callback only gets called once instead of twice. It should get called on page load and on form submit. – Charlie Fish Sep 25 '16 at 02:27