AJAX Success call a defined function

Question

I'm having trouble calling an external function on success. The ideal solution would let me also pass in some parameters to the function!

i.e. success: writeToConsole("successful");

Javascript:

$(document).ready(function () {
  $(".portalControls").find(".syncButton").click(triggerSync);    
});

function triggerSync(e) {
  e.preventDefault();
  $.ajax({
    type: "GET",
    url: "sync",
    dataType: "text",
    success: writeToConsole,
      error: writeToConsole
    }
  });
}

function writeToConsole(consoleText) {
  $.find("portalConsole").text(consoleText);
}

HTML:

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>

Errors I get: "Uncaught TypeError: $.ajax is not a function". I never get the request on my server.

EDIT: Problem was to do with having a jQuery slim script on another page. Removing that fixed the error.

You don't have problems with defining a success function. Your problem is *"Uncaught TypeError: $.ajax is not a function"*. — Tomalak, Dec 03 '17 at 12:17
Also make sure that your version of Jquery supports ajax. I mean as the answer below says — Kumar Shubham, Dec 03 '17 at 12:20
The script tag for Jquery should be above than the script tag of your personal js file — Kumar Shubham, Dec 03 '17 at 12:21
Possible duplicate of [My javascript is returning this error: $.ajax is not a function](https://stackoverflow.com/questions/44212202/my-javascript-is-returning-this-error-ajax-is-not-a-function) — JJJ, Dec 03 '17 at 12:21
@KumarShubham `$(document).ready()` should throw an error long before the Ajax method. It's not the script's placement, it's just the wrong library. — JJJ, Dec 03 '17 at 12:22
@Josh Googling your error (use double quotes for exact matches) brings up a **generous** amount of hits that explain exactly what's wrong. Always search first, please. — Tomalak, Dec 03 '17 at 12:27
@Tomalak I did search! In fact I even found the slim version of jQuery answer, I just didn't realise I had it! I downloaded it directly from the jQuery website and there wasn't any obvious reference to it being the slim version. — Josh, Dec 03 '17 at 13:00

santosh singh · Accepted Answer · 2017-12-03T13:35:26.363

3

You are using slim version of jQuery. It Doesn't support ajax Calling. Use following

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Update Check out following JSfiddle

edited Dec 03 '17 at 13:35

answered Dec 03 '17 at 12:20

santosh singh

25,036
23
75
121

1

As a kind of additional explanation on his answer, https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery this link is explaning on the difference between jquery-slim version and normal version – moon Dec 03 '17 at 12:24
I switched to this, it still doesn't work. Same error. – Josh Dec 03 '17 at 13:28
@Josh:Check oout jsfiddle – santosh singh Dec 03 '17 at 13:35
@santoshsingh I checked it out, thanks for that. It still doesn't work for me for some reason, with the exact same error. It shows the right script on the dev tools, not sure why it's not working. – Josh Dec 03 '17 at 13:49
try this – santosh singh Dec 03 '17 at 13:51
I figured out the problem! I had a jQuery slim script loaded on another page, and I think that must have been cached in some way, overwriting the non-slim version? – Josh Dec 03 '17 at 13:59

score -1 · Answer 2 · answered Dec 03 '17 at 12:29

As @Santosh said make sure you add the following code in your head:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Also I found out there is a few errors in your code, I tried to find out what you want to achieve and make a code out from it, you should look though is this what you want

$(document).ready(function() {


  $(".portalControls").find(".syncButton").click(triggerSync);

});

function triggerSync(e) {
  e.preventDefault();
  $.ajax({
    type: "GET",
    url: "sync",
    dataType: "text",
    success: writeToConsole("fine"),
    error: writeToConsole("error")
  });
}

function writeToConsole(consoleText) {
  $(".portalConsole").text(consoleText);
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="portalControls">
  <button class="syncButton">
click
</button>
</div>
<div class="portalConsole">

</div>

For the issue I found out first there is one more } here

    success: writeToConsole,
    error: writeToConsole
}
^
});

Second, I don't know why you use $.find("portalConsole").text(consoleText);, if you want to change the text, I'll use $(".portalConsole").text("text here...") also notice there isn't a . or a # before portalConsol.

score -2 · Answer 3 · edited Dec 03 '17 at 15:49

-2

Just add the above CDN script tag

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

edited Dec 03 '17 at 15:49

Andrew.Wolphoe

368
2
15

answered Dec 03 '17 at 12:25

Manjunathan G

21
4

AJAX Success call a defined function

3 Answers3