CODEWITHSUNDEEP
phpjavascriptjquery
amit
amit

Reputation: 10261

handling a POST request

I am trying to POST some data but I am not achieving what I need to.

No matter what list-item I click on, it is POSTing the value of the top most list-item.

this is the jquery function: 

$(".list-item-wrap a").click(function(){
    $.post("display2.php", { 
        msg_id: $(".list-item-wrap a .list-item").find('input').val()},
        function(data) {
            $("#list").load("display2.php", {
                msg_id: $(".list-item-wrap a .list-item").find('input').val()
            });
        //window.location.replace("display2.php");
    })
})

This is the actual html/php data: 

<?php

$query = "SELECT * from workflow WHERE name = '$username' ORDER BY msg_id DESC";
$result = mysql_query($query) or die("ERROR: $query.".mysql_error());

while ($row = mysql_fetch_object($result)) {
    echo "<div class=list-item-wrap>";
    echo "<a href='#'><div class=list-item><input class=msgid type=hidden value="
              .$row->msg_id.">";
    echo "<b><h1>".$row->subject."</h1></b>".substr($row->message, 0, 200)
              ."...<br><b>".$row->sender."</b>";
    echo "</div></a></div>";
}
?>

Where am I going wrong??

Upvotes: 1

Views: 389

Answers (5)

Naftali
Naftali

Reputation: 146302

you need a preventDefault() on the anchor click:

$(".list-item-wrap a").click(function(e){
    e.preventDefault();
    $.post("display2.php", {msg_id: $(".list-item-wrap a .list-item").find('input').val()},
    function(data){
        $("#list").load("display2.php", {msg_id: $(".list-item-wrap a .list-item").find('input').val()});
        //window.location.replace("display2.php");
    })
})

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

First you need to find the value of the input element you want..
so limit you selector with

msg_id: $("input",this).val()

You should also change your callback method to just display the data instead of doing a new ajax call..

function(data) {
            $("#list").html(data);
}

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

Sorry I misunderstood try this:

$(".list-item-wrap a").click(function(){
    $.post("display2.php", {msg_id: $(this).find('input').val()},
    function(data){
        $("#list").load("display2.php", {msg_id: $(".list-item-wrap a .list-item").find('input').val()});
        //window.location.replace("display2.php");
    })
})

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227220

When you call val() on a set of elements, it will only return the value of the 1st one. You need to call val() on just the element you want.

Try using this instead, to get the item you clicked on:

$(".list-item input", this).val()

In this case, this is the .list-item-wrap a you want, so you need to get the input after it.

Or, if you want to post ALL of the items, use this:

$('input', '.list-item-wrap a .list-item').serialize()

Upvotes: 2

RDL
RDL

Reputation: 7961

Use return false at the end of the function. Like:

$(".list-item-wrap a").click(function(){
    $.post("display2.php", {msg_id: $(".list-item-wrap a .list-item").find('input').val()},
    function(data){
        $("#list").load("display2.php", {msg_id: $(".list-item-wrap a .list-item").find('input').val()});
        //window.location.replace("display2.php");
    })
    return false;
})

Upvotes: 0

Related Questions