РЕДАКТИРОВАТЬ: ПРОБЛЕМЫ БЫЛИ ВЫЗВАНЫ НЕПРАВИЛЬНО ЗАГРУЖАЮЩЕЙСЯ БИБЛИОТЕКОЙ JQUERY, ВОПРОС НЕ ПРОЯВЛЕН ЯВНО В МОЕМ ОРИГИНАЛЬНОМ ВОПРОСЕ. ИЗВИНЕНИЯ.
Я использую jquery, чтобы скрывать, публиковать, а затем выводить результаты php-запроса на два отдельных элемента div. Затем я хочу иметь возможность поменять местами полученные изображения через эти div. Первая часть работает нормально, но я не могу заставить другие сценарии jquery работать с этими элементами (например, sorttable, droppable и т. Д.).
Я новичок в написании сценариев за последние несколько недель. Я думаю, что мне нужно json кодировать php, прежде чем я отправлю его, но у меня возникают проблемы с нахождением четкого руководства в Интернете о том, как это сделать. Любая помощь, высоко ценимая, будь то описательная, отсылка к конкретным вводным ресурсам (например, не php.net) или с самим кодом.
Я включаю соответствующие сценарии ниже. Это работает:
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$( "#search_results").show();
var search_val = $("#search_term").val();
var search_valb = $("#search_theme").val();
$.post( "./find.php", {search_term : search_val, search_theme : search_valb}, function(data){
if (data.length>0){
$( "#search_results").html(data);
$( ".portfolio_container").hide();
$( ".portfolio_draggables").hide();
$( "ul.clickable_container li").click(function(){
$( ".portfolio_draggables").hide();
var activeImage = $(this).find("a").attr('href');
$( ".portfolio_container").show();
$( activeImage).show();
return false;
});
};
});
};
</script>
Это HTML-форма, которую я использую.
<div id="lettersearchform" class = "lettersearchform">
<form id="searchform" method="post">
<label for="search_term">Enter your word here!</label>
<input type="text" name="search_term[]" id="search_term" />
<!--<input type="submit" value="search" id="search_button" />-->
</form>
</div>
<div id="search_results"></div>
«search_results» успешно генерируются с помощью этого скрипта:
$alpharray = array();
while($row = mysqli_fetch_assoc($result)){
$alpharray[$row['letter']][] = $row;
}
$first = $second = array();
foreach( str_split( $_POST['search_term']) as $alpha)
{
$first[] = "<li><a href = '#$alpha'><img class='imgs_clickable_droppable' img src='../Letterproject/images/{$alpharray[$alpha][0]['photoPath']}' width='100' height='140'></src></a></li>";
$editable = array("<div id='$alpha' class='portfolio_draggables'>");
foreach ($alpharray[$alpha] as $tempvar)
{
$editable[] = "<a href ='findall.php'><img src='../Letterproject/images/{$tempvar['photoPath']}' width='70' height='110'></src></a>";
}
$editable[] = '</div>';
$second[] = implode( '', $editable);
}
echo '<ul id = "clickable" class="clickable_container">';
echo implode( '', $first);
echo '</ul>';
echo '<div id="portfolio" class = "portfolio_container">';
echo implode( '', $second);
echo '</div>';
Итак, вот в чём проблема: этот сортируемый скрипт более ограничен, чем перекрестное деление, которое я хочу, но этот тип вещей не будет работать.
$(function() {
$("ul.clickable li").draggable({
containment: 'parent',
revert: 'invalid',
opacity: '0.91',
cursor: 'crosshair'
});
$('.clickable').sortable();
});
Для тех, кто интересуется дополнительным контекстом, я использую jquery для публикации ввода из формы. Скрипт Php сопоставляет символы, введенные в соответствующее изображение буквы в базе данных mysql. Затем он отображает список этих изображений в одном Div и повторяет все портфолио всех изображений этого письма в другом Div. Идея состоит в том, что пользователь может перетаскивать изображения из этого второго вывода, чтобы заменить изображение буквы в другом div.
Большое спасибо!