CODEWITHSUNDEEP
phpjqueryajax
Middle-Level
Middle-Level

Reputation: 27

This.id passed using ajax to php but returns an undefined index when load by jquery

I've been searching around the Internet and even in Website Development forums but luckily I Haven't found a solution to my problem.

This is the html code

<div id='bottom-right-display'>
                    <ul id='display-app'>
                        <li><a href='#' class='btn-test-1' id='123'>Testing1</a></li>
                        <li><a href='#' class='btn-test-2'>Testing2</a></li>
                        <li><a href='#' class='btn-test-3'>Testing3</a></li>
                    </ul>
</div>

This is the jquery code

$(".btn-test-1").click(function(){
        //with the use of post
        $.post("somefile.php",{id,this.id},function(data){
            $("#outputarea").load("somefile.php");
        });
        //or
        //with the use of ajax
        $.ajax({  
            type: "POST",  
            url: "somefile.php",  
            data: {id:this.id},      
            success: function(result){  
              $("#outputarea").load("somefile.php");
            } 
        })
    });

This is the php code

<?php
     require_once "connection.php";

     $sorter = $_POST["id"];//------>THIS IS THE LINE OF CODE WHERE THE ERROR IS STATING ABOUT!!
     $retrieve = $conn->prepare("SELECT * FROM `table1` WHERE `id` != '$sorter'");
     $retrieve->execute();
     $retrieve->bind_result($groupname);

     while($retrieve->fetch()){
        echo "<li>".$groupname."</li>";
     }
?>

The problem is passing a this.id using $.post or $.ajax to php but returns an error saying Notice: Undefined index: id in C:\xampp\htdocs\somefile.php when using load but when using alert it display the result that I wanted, I even tried using isset but it is empty and no data at all. Please if you know any already answered question or solution for this please comment it T_T.

Upvotes: 1

Views: 544

Answers (4)

duduwe
duduwe

Reputation: 1260

Your codes seem okay. One thing that I cannot simulate though is your required 'connection.php'. Can you simplify your php code first? I mean just do echo $_POST['id'] just to make sure your preceding code(s) is not affecting your post data.

Upvotes: 0

Amit Ramoliya
Amit Ramoliya

Reputation: 392

change jquery to this and try :

$(".btn-test-1").click(function(){
        var id_val = $(this).attr('id');
        //with the use of ajax
        $.ajax({  
            type: "POST",  
            url: "somefile.php",  
            data: {id:id_val },      
            success: function(result){  
              $("#outputarea").load("somefile.php");
            } 
        })
    });

Upvotes: 0

Jacques Koekemoer
Jacques Koekemoer

Reputation: 1415

Check to see if the data is actually in the post request.

i.e.

if(isset($_POST['id'])) $sorter = $_POST['id']; 
else die('ERROR: No ID set')

Then I would also check if you can send data to the server via AJAX that way. Otherwise try adding this code to your Javascript.

$(".btn-test-1").click(function(){

    var $dta = new FormData();

    $dta.append("id",this.id);

    $.ajax({  
        type: "POST",  
        url: "somefile.php",  
        data: $dta,
        contentType: false,
        cache: false,
        processData:false,
        success: function(result){  
          $("#outputarea").html(result);
        } 
    })
});

Upvotes: 1

Tobias Xy
Tobias Xy

Reputation: 2069

I think the problem is that you first send an ajax request with the id attached, but in the success callback you request somefile.php again. The second time no id is attached.

Instead you should use the result variable to get the "output" of somefile.php from the first request. The second request is not needed.

Like this: 

$(".btn-test-1").click(function(){
    $.ajax({  
        type: "POST",  
        url: "somefile.php",  
        data: {id:this.id},      
        success: function(result){  
          $("#outputarea").html(result);
        } 
    });
});

Upvotes: 0

Related Questions