#jquery
#jquery
Вопрос:
я разрывал сосуды своего мозга, чтобы выяснить, почему это просто не сработает.
По какой-то причине он получает правильный идентификатор изображения, но просто не отправляет значения с ним. Я просто пытаюсь опубликовать 3 вещи с помощью jquery и встроенного модального поля.
У меня есть набор красиво обрезанных миниатюр с двумя маленькими значками под каждым большим пальцем. Пользователь, войдя в систему, может удалить большой палец (это работает нормально), но также пользователь может щелкнуть значок редактирования, и появится встроенное модальное окно с простым вводом и полем textarea для названия фотографии и комментария.
Я пытаюсь опубликовать идентификатор фотографии, а также значения полей ввода и текстовой области, чтобы я мог обработать данные post с помощью php-файла и обновить таблицу mysql.
Я вставил большой фрагмент кода, чтобы была понятна вся картина.
<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']; ?>amp;h=200amp;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 'amp;photo=' photo 'amp;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 amp; Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('amp;');
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>
Единственное значение, которое я получаю, — это идентификатор
но имя фотографии и комментарий возвращаются либо без уточнения, либо только с первой записью в цикле.
Заранее спасибо 
Джон.
Ответ №1:
На ваших входных данных нет идентификаторов … только имена и классы.
$('input.photoname', $(this).parent()).val();
… я полагаю, это то, что вы ищете.
РЕДАКТИРОВАТЬ: также заметил это … текстовые области не являются входными данными.
Попробуйте это:
$('#comment').val()
//or
$('textarea#comment').val()
также прочитайте эту ссылку об эффективности селектора -> производительность селектора jquery
Ответ №2:
давайте немного изменим ваш html, у вас не должно быть ничего между вашими элементами li
<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>
тогда вот правильный 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;
}
});
});