Ajax doesn't call server side function when jquery handler is fired

Question

I'm building a simple forum on which I have a user details page with two text fields, one for the user's biography and another for his interests. When the user clicks on the save icon, a handler on the jquery is suposed to call an ajax call to update the database with the new value of the biography/interests but the ajax call isn't being called at all and I can't figure it out since I don't find any problems with the code and would apreciate if someone could take a look at it.

this is the textarea:

 <textarea rows="4" cols="50" id="biography" readonly><?php if($info['bio'] == "") echo "Não existe informação para mostrar";
            else echo $info['bio']; ?></textarea>

Here is the icon the user clicks on:

<li style="display:inline;" class="infoOps-li"><img class="info-icons"  id="save1" src="assets/icons/save.png" alt=""></li>

this is the jequery with the ajax call:

$("#save1").click(function(){
  var bio = $("#biography").val();
  alert(bio); //this fires up
$.ajax({
  url:"assets/phpScripts/userBioInterest.php", //the page containing php script
  type: "post", //request type,
  dataType: 'json',
  data: {functionName: "bio", info:bio},
  success:function(result){
    alert(result.abc); //this doesn't fire
       }
     });
  $("#biography").prop("readonly","true");
});

I know that the jquery handler is being called correctly because the first alert is executed. The alert of the ajax success function isn't, so I assume that the ajax call isn't being processed.

On the php file I have this:

function updateBio($bio)
{
    $user = $_SESSION['userId'];
    $bd = new database("localhost","root","","ips-connected");
    $connection = $bd->getConnection();
    if($bio == "")
    {
        echo json_encode(array("abc"=>'empty'));
        exit();
    }
     if($stmt = mysqli_prepare($connection,"UPDATE users SET biografia = ? WHERE user_id = ?"))
      {
         mysqli_stmt_bind_param($stmt,'si',$bio,$user);
         mysqli_stmt_execute($stmt);
         mysqli_stmt_close($stmt);
         echo json_encode(array("abc"=>'successfuly updated'));
      }

    $bd->closeConnection();

}

if(isset($_POST['functionName']))
{
$function = $_POST['functionName'];
echo $function;
if(isset($_POST['info']))
$info = $_POST['info'];

if($function == "bio")
{
    updateBio($info);
}
else if($function == "interest")
{
    updateInterests($info);
}
}

Can anyone shed some light on why isn't the ajax call being called? Thank you

EDIT: changed "function" to "functionName" in json data object as suggested.

@MayankPandeyz the only error I get is due to an invalid image path. — Mr.Toxy, Jun 21 '17 at 15:49
I suspect that because `function: "bio", info:bio`, where `function` is a keyword it throws a syntax error. — Xorifelse, Jun 21 '17 at 16:04
@Xorifelse is it still a keywork in the context of a json data object? — Mr.Toxy, Jun 21 '17 at 16:06
It is a keyword in javascript context. Javascript is required to parse the script to build a json object. If JS fails, nothing is build. Check the js developers console for errors, F12. — Xorifelse, Jun 21 '17 at 16:07
@Xorifelse I've changed it to "functionName" but I still get the same result as before :\ — Mr.Toxy, Jun 21 '17 at 16:07
@KevinB that's a good question, don't know why that's there tbh, I don't even remind writting that down in that specific place — Mr.Toxy, Jun 21 '17 at 16:11
used the example from https://stackoverflow.com/questions/6792878/jquery-ajax-error-function and it doesn't yield any errors whatsoever. — Mr.Toxy, Jun 21 '17 at 16:15

score -1 · Answer 1 · answered Jun 21 '17 at 16:05

-1

A possible problem is dued to a wrong parsing of the PHP output (for example due to a PHP error). You are reading the output as JSON, so if the output is not a JSON, success callback will not be triggered.

$("#save1").click(function(){
    var bio = $("#biography").val();
    alert(bio); //this fires up
    $.ajax({
        url:"assets/phpScripts/userBioInterest.php",
        type: "post", //request type,
        dataType: 'json',
        data: {function: "bio", info:bio},
        success:function(result){
            alert(result.abc); //this doesn't fire
        },
        error: function(result){
            alert("An error has occurred, check the console!");
            console.log(result);
        },
    });
    $("#biography").prop("readonly","true");
});

Try with this code, and check if an error is printed to the console. You can use complete too, check here: http://api.jquery.com/jquery.ajax/

answered Jun 21 '17 at 16:05

Ryosaku

453
4
14

@Mr.Toxy Of course it's the same result. This was supposed to give you more information on why it is failing. read your console. – Kevin B Jun 21 '17 at 16:10
what *does* it yield? you should have received an alert, and the console should have an object available for you to explore. Most notably, the object should have a responseText property. – Kevin B Jun 21 '17 at 16:16
the only error the that's in the console is on that has nothing to do with this problem, its an error regarding a wrong path to a png file. Didn't recieved any alerts besided the one thats fired from the jquery script – Mr.Toxy Jun 21 '17 at 16:22

Ajax doesn't call server side function when jquery handler is fired

1 Answers1