Pass ID from AJAX to PHP back to Modal

Question

I have a PHP CODE:

if(isset($_POST['id'])){
    $id = mysqli_real_escape_string($link,$_POST['id']);
    $query = "SELECT * FROM `tb_cform` WHERE `ID`='$id'";
    $result = mysqli_query($link, $query);
    while ($row = mysqli_fetch_assoc($result)){
        $message = '<div><h4>Subject: </h4><h5>'.$row['subj'].'<h5></div>';
        $message .= '<hr><br>';
        $message .= '<div><b>Message:<br>'.$row['message'].'</b></div>';
    }

    echo $message;
}

I need to pass the value from my AJAX code to the aforementioned code:

$('#messageModal').on('show', function(){
    $.ajax({
        type: "POST",
        url: "viewmessage.php",
        datatype: "html",
        data:"data-id=" +id  , 
        success: function(r){
            $('#messageBody').html( r );
        }
    });
});

The link that I am using is using a data-id="73" to pop open a model and populate the information.

My issue is, the value is not being passed and the body of the Modal is not being populated. Can anyone let me know why or what I did incorrect?

Side note: the first line of your `while()` will overwrite itself on every iteration. You need to have `$message = '';` above the `while()`, then the first line then needs `$message .=` not just `$message =` — Rasclatt, May 19 '17 at 02:57
Although there will only be one iteration with your query, so you probably should just fetch the array and not do the `while()` at all. Also, if you are not binding parameters on `$id`, you should then first check if it's numeric (presumably it's supposed to be numeric?). — Rasclatt, May 19 '17 at 02:59
@Rasclatt , Yes it is numeric. I can pass the `is_numeric($_POST['id'])` parameter in there as well. I just want to see if it will populate the results and its not. — PKershner, May 19 '17 at 03:06

score 1 · Answer 1 · answered May 19 '17 at 13:09

Check that your db returns something, so that $result is not null. Otherwise your $message will be empty. If your query actually returns something and $message is still empty - try changing datatype to json:

JS

$.ajax({
    type: 'POST',
    url: 'php/server.php',
    datatype: 'JSON',
    data: {
        dataId: someArbitraryId
    },
    success: function(data) {
        var message = JSON.parse(data).message;
        $('#message').html(message);
    }
});

PHP

if (isset($_POST['dataId'])) {
    $message = '';

    // Some code 

    $result = array(
        'message' => $message
    );

    echo json_encode($result);
}

Now even if the $message is empty or null - server should return array with empty string.

Just want to leave a thank you since I have been looking over more then a dozen SO questions and answers and none of them came as close to immediately working as yours did. So thank you very much! — purple11111, May 19 '22 at 16:08

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

in js

data:{dataId : id}, // I'm sure this will work but data:"data-id=" +id, may work as well

in php

$_POST['dataId'] // instead of $_POST['id']

If this not work with you there are some steps you need to do

1- alert(r) on ajax success function and check for errors

2- I don't know what is id and where you get it from so try to alert(id) and see if it output an expected value or not

3- you may need to use shown.bs.modal instead of show take a look at here

4- in js try to get the a data-id by using $(a[data-target="#messageModal"]).data('id') instead of id

so your code should looks like

in js

$('#messageModal').on('shown.bs.modal', function(){
    $.ajax({
        type: "POST",
        url: "viewmessage.php",
        datatype: "html",
        data:{ dataId : $(a[data-target="#messageModal"]).data('id')}, 
        success: function(r){
            $('#messageBody').html( r );
        }
    });
});

and also in php use $_POST['dataId'] instead of $_POST['id']

edited May 23 '17 at 11:55

Community

1
1

answered May 19 '17 at 02:55

Mohamed-Yousef

23,946
3
19
28

maybe your id is blank in the first place? – guradio May 19 '17 at 03:09
@PKershner I updated my answer with the steps you should do if its still not working – Mohamed-Yousef May 19 '17 at 03:11
are you not reinitializing the var id in anyway? the above should work maybe it goes wrong somewhere else.. – guradio May 19 '17 at 03:11
1

BTW @guradio congratulations for +10K rep ..you're a good programmer .. keep it up :-) – Mohamed-Yousef May 19 '17 at 03:15
the alerts are not showing. So I think my ajax function is broken or my link. – PKershner May 19 '17 at 03:16
this is in my foreach loop `View ';` to populate the link for each message that is in the DB. – PKershner May 19 '17 at 03:17
1

@Mohamed-Yousef thank you mate you helped me alot before youre one of the best here :) – guradio May 19 '17 at 03:19
@Mohamed-Yousef, here is what I have: `data: {data-id : $(a[data-target="#messageModal"]).data("id")},` but it seems to be throwing an error. its saying "Expected ':' and instead saw '-' " – PKershner May 19 '17 at 03:48
@PKershner this my first time using `-` on ajax post may it cause a problem .. so you can change `data-id` to `dataId` .. I updated my answer – Mohamed-Yousef May 19 '17 at 03:52
Still nothing showing. I am not sure what I am doing wrong. I have everything set the way you said to do, but its not populating in the messageBody like it states. Instead of using data-id, is there any other way of passing the variable like a hidden input field? – PKershner May 19 '17 at 12:58

score 0 · Answer 3 · answered May 19 '17 at 16:58

So i figured out the issue, it is now displaying the results, however, $(a[data-target="#messageModal"]).data('id'); will not pass the value, i had to use: var id = $("#messageID").attr("data-id");. This is working, but becuase there are multiple instances of #messageID listed, it is only showing the first result becuase you cannot have duplicate ID tags with the same information. My question is how can i assign or get a value added after #messageID like an array using[ ] to assign a value and have it look for that then get the data-id value to pass?

Pass ID from AJAX to PHP back to Modal

3 Answers3