jquery post id and other values from inline modal

i have been busting my brain vessels to figure out why this just wont work.

For some reason it grabs the correct id of the image but just wont post the values with it. I am simply trying to post 3things via jquery and an inline modal box.

What i have is a set of nicely cropped thumbnals with two little icons under each thumb. The user when logged in can delete the thumb ( That works fine ) but also the user can click the edit icon and a inline modal box pops up with a simple input and textarea field for photo name and comment.

Im trying to post the id of the photo as well as the input field and textarea field values so i can process the post data with a php file and update the mysql table.

I have put a large chunk of code so that the whole picture is understood.

<div class="clear rule"></div>

<ul>

<?php // grab the images for this gallery and crop them nice

$query = "SELECT * FROM mypage_media WHERE  uid=".$usrid." AND gid=".$_GET['gid'];
$result = mysql_query($query) or die(mysql_error()); 
while($row = mysql_fetch_array( $result )) { 
// start my thumbnails loop 
?>

<li id="<?php echo $row['id']; ?>" >

<div class="mythumbwrapper">

<a class="modal"  id="single_image" href="media/users/<?php echo $usrid; ?>/resized/800/<?php echo $row['image']; ?>">
<img class="mythumbs" src="includes/crop.php?src=media/users/<?php echo $usrid; ?>/<?php echo $row['image']; ?>&h=200&w=225" /> 
</a> 

<div class="icons">

<a href="#?w=500" rel="popup_<?php echo $row['id']; ?>" class="poplight">

<img src="images/edit.png" title="" alt="" border="0" >

</a>

<a href="javascript:void(0)" class="delete_thumb">

<img src="images/del.png" title="" alt="" border="0" >

</a>

</div>

</div>

</li>

////////////////////////////////////////////////
// the problem is below here
////////////////////////////////////////////////


<span id="popup_<?php echo $row['id']; ?>" class="popup_block">

<li id="<?php echo $row['id']; ?>" >

<input type="text" class="photoname" name="photoname" value="<?php echo $row['image'];?>" >
<br />
<textarea id="comment" ><?php echo $row[comment];?></textarea>

<a href="javascript:void(0)" class="save" >Save <?php echo $row['id'];?></a>

</li>

</span>

///////////////////////////////////////////////


<?php } 
// end my thumbnails loop
?>

</ul>

<script type="text/javascript">

$.noConflict();
jQuery(document).ready(function($) { // THIS FIXES THE CONFLICT WITH MOOTOOLS MODAL CLASS


///////////////////////////////////////////////////
// the jquery for the above inline modal is here
// the id is working in firebug but the photoname
// is always posting the first photo in the list
///////////////////////////////////////////////////


$('span li .save').click(function(){


var id = $(this).parent().attr('id'); 

var photo = $('input#photoname', $(this).parent()).attr('value'); 

var comment = $('input#comment', $(this).parent()).attr('value'); 


data = 'id=' + id + '&photo=' + photo + '&comment=' + comment; 


$.ajax(  
{
type: "POST", 
url: "includes/update.php",  
data: data,
cache: false,

success: function()
{

// This success function just makes the inline modal close 

$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();  //fade them both out
});

return false;


}
});

});


/////////////////////////////////////////////////////



// Delete li process php and fade out li

$('li a.delete_thumb').click(function(){

if (confirm("Are you sure you want to delete this photo there is no undo?"))
{

var id = $(this).parent().parent().parent().attr('id'); 
data = 'id=' + id;
var parent开发者_开发问答 = $(this).parent().parent();

$.ajax(  
{
type: "POST", 
url: "includes/remove.php",  
data: data,
cache: false,

success: function()
{

parent.fadeOut('slow', function() {$(this).remove();});                  

}
});
}
});

//When you click on a link with class of poplight and the href starts with a # 

$('a.poplight[href^=#]').click(function() {

var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size

//Pull Query & Variables from href URL

var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value

//Fade in the Popup and add close button

$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

//Define margin for center alignment (vertical   horizontal)
//we add 80px to the height/width to accomodate for the padding  and border width defined in the css

var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;

//Apply Margin to Popup

$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});

//Fade in Background

$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); 
//Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 

return false;
});

//Close Popups and Fade Layer

$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();  //fade them both out
});

return false;

});
});

</script>

The only value i get is the id

but photoname and comment come back either undeifined or only the first entry in the loop.

Thanks in advance :-) John.

Your inputs do not have ID's on them... only names and classes.

$('input.photoname', $(this).parent()).val();

... is what you are looking for I believe.

EDIT: also noticed this... textareas are not inputs.

Try this:

$('#comment').val()
//or
$('textarea#comment').val()

also read this link about selector efficiency -> jquery selector performance

lets change your html a little you shouldn't have anything between your li elements

<ul>

    <li id="li_123" >

        <input type="text" id="photoname" class="photoname" name="photoname" value="someimage" />

        <textarea id="comment">some comment</textarea>

        <a href="#" class="save" >Save 123</a>

    </li>
</ul>

then here is the correct jquery

$('li .save').click(function(event) {
    event.preventDefault()
    var id = $(this).parent().attr('id');
    var photo = $(this).closest('li').find('#photoname').val();
    var comment = $(this).closest('li').find('#comment').val();
    var info = {
        id: id,
        photo: photo,
        comment: comment
    }

    $.ajax({
        type: "POST",
        url: "includes/update.php",
        data: info,
        cache: false,

        success: function() {
            // This success function just makes the inline modal close
            $('#fade , .popup_block').fadeOut(function() {
                $('#fade, a.close').remove(); //fade them both out
            });
            return false;
        }
    });
});

DEMO