CODEWITHSUNDEEP
phpjquerydroppable
Topher
Topher

Reputation: 183

Droppable not posting ID to PHP file

I'm attempting to build a CMS page builder. At the URL below, I'm trying to get the items on the 'templates' tab to do the below.

https://profilefirst.co/admin/content-editor/content-editor.php?page_id=1

When an image is dropped into the container, instead of dropping the image I want to take the ID of that list item and run a php script to pull html content from the database and display it to then be sorted. I can't seem to work out how to not drop the image and how to get the ID passed to the PHP page (get_component.php).

I'm using JQuery Droppable and Sortable for this.

This is a list item:

<ul>
    <li id="1" class="draggable ui-state-highlight"><img src="../../images/com_hero.png" /></li>
    <li id="2" class="draggable ui-state-highlight"><img src="../../images/com_img_text_button.png" /></li>
    <li id="3" class="draggable ui-state-highlight"><img src="../../images/com_text_button_img.png" /></li>
    <li id="4" class="draggable ui-state-highlight"><img src="../../images/3-column-features.png" /></li>
</ul>

This is my JQuery droppable (that I found here somewhere) that should be running the PHP file and posting the ID dropped, that would then echo out the content:

<script>
    $('#sortable').droppable({
    accept: 'li'
    drop: function(event, ui){
    var id=$(ui.draggable).attr('id');
    $.ajax({
        url: 'get_component.php',
        type: 'POST',
        data: {id: id},
        success: function(data){
        //NOT SURE WHAT GOES HERE
        }
        })
        }
    });
    $('img.draggable').draggable();//assuming all draggable images have a draggable class
</script>

On the PHP page, it's looking for $_POST['id'] but never gets it.

I feel like I must be missing something painfully obvious here, but I've checked all the docs and can't work this out. Any help is much appreciated!

Upvotes: 0

Views: 34

Answers (0)

Related Questions