1

Hi I am trying to update my css file by using a combination of php ajax and jquery, I am doing it like this as I want users to be able to download the css file with the modified values in it. However I am getting an

$.ajax is not a function

error in my code and I'm not exactly sure why, I have included the full jquery library in my code, I have tried using jQuery.ajax instead of $.ajax but this still hasnt resolved it.

this is the version of jquery i am using 

https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js

this is my code

 $(document).ready(function(){   
   $("#colorpicker").on("change",function(){
     var backgroundColour = $(this).val();
     console.log(backgroundColour);

     $.ajax({url: "styles.php", type: "post", data: backgroundColour});

  });
 });
RiggsFolly
  • 93,638
  • 21
  • 103
  • 149
RubadubDub
  • 21
  • 4
  • 1
    Are there other libraries you are using? Is `$` aliased to `jQuery`? `jQuery` is not the only library that uses `$` – Patrick Evans Apr 11 '18 at 17:08
  • 1
    Have you confirmed that the jQuery library is actually loading by viewing the request for it in your developer tools? – Patrick Q Apr 11 '18 at 17:09
  • @ Patrick Evans I am using bootstraps jquery library as well but I have used the both of these in a different project before and they worked without any errors – RubadubDub Apr 11 '18 at 17:20
  • you have the exact same error when calling `jQuery.ajax` ? – ValLeNain Apr 11 '18 at 17:22
  • @ValLeNain yeah the error is the same regardless of using jquery.ajax or $.ajax – RubadubDub Apr 11 '18 at 17:37
  • if you `console.log($)` what does it look like ? – ValLeNain Apr 11 '18 at 17:38
  • @ValLeNain before the ajax statement i get this (a,b){return new r.fn.init(a,b)} and after the ajax statement it doesnt return anything to the log – RubadubDub Apr 11 '18 at 17:54
  • "I am using bootstraps jquery library as well" So _in addition_ to the jquery loaded from `https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js`, you're also loading another jquery file? If so, what specifically is the other file? Are you loading it after the one from googleapis? – Patrick Q Apr 11 '18 at 18:05
  • @PatrickQ the other jquery library is this one https://code.jquery.com/jquery-3.2.1.slim.min.js i tried changing it to https://code.jquery.com/jquery-3.2.1.min.js but all it done was break bootstrap – RubadubDub Apr 11 '18 at 18:14
  • FYI, you should really only need to be loading _one_ jquery lib file. – Patrick Q Apr 11 '18 at 18:27
  • @PatrickQ this sorted it thanks – RubadubDub Apr 11 '18 at 18:52
  • You probably should have done it the other way around. Remove the second one and leave the first. You may (for some reason) be requesting the second one (the one you left in place) _after_ trying to use some jquery code. – Patrick Q Apr 11 '18 at 18:52
  • @PatrickQ I realised i was loading in my jquery script before the second jquery library (woopsie) I removed the first one as i had it loading in the head and bootstrap requires it to be loaded in at the end of the body – RubadubDub Apr 11 '18 at 18:55
  • Cool. Glad you sorted it! – Patrick Q Apr 11 '18 at 18:55

0 Answers0