Question

EDIT: THE PROBLEMS WERE CAUSED BY AN IMPROPERLY LOADING JQUERY LIBRARY, AN ISSUE NOT SPELLED OUT CLEARLY IN MY ORIGINAL QUESTION. APOLOGIES.

I’m using jquery to hide, post, then echo the results of a php query to two separate divs. I then want to be able to swap the resulting images across these divs. The first part works fine, but I’m unable to get any other jquery scripts to work on these divs (e.g. sortable, droppable, etc).

I’m new to scripting within the past few weeks. I think I need to json encode the php stuff before I send it, but I’m having trouble finding clear guidance online about how to do this. Any help much appreciated, whether either descriptive, referral to specific intro resources (e.g. not php.net), or with code itself.

I am including relevant scripts below. This one works:

<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>

This is the html form that I’m using.

<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>

The “search_results” are generated successfully with this script:

$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>';

So here’s where the problem enters: This sortable script is more limited than the cross-div I want, but this type of thing won’t work.

$(function() {

    $("ul.clickable li").draggable({
        containment: 'parent',
        revert: 'invalid',
        opacity: '0.91',
        cursor: 'crosshair'
    });
    $('.clickable').sortable();
}); 

For those interested in more context, I’m using jquery to post the input from a form. A Php script matches the characters inputted to a corresponding letter image in a mysql db. It then echoes a list of these images to one div and echoes the whole portfolio of all images of that letter to another div. The idea is that a user could drag images from this second output to replace a letter image in the other div.

Thanks so much!

Answer 1

$("ul.clickable li") 

does not correctly select an element with an HTML id of clickable and a class of clickable container. Either change the class of the element (which is selected with . in jQuery/CSS) or the id (which is selected with #)

$("#clickable")

should work.

Additionally, /src is unnecessary as src is not a tag. Writing out HTML directly in PHP script is not the cleanest way of doing this. I highly recommend you check out Head First HTML/CSS or HF HTML5 to augment some of your understanding.