0

I have loaded content via ajax, but i can't drop an element on it. I do not think it is a matter of dragging/dropping not working, because it functioned well before i rebuild it to ajax.

I have searched and all solutions are with "on", i tried, but i just can't get it working. Then i tried "on mouseover" with just a testalert, which works, but still impossible to drop my element. When using "drop" as event, nothing with jquery works anymore and my accordion and tabs are gone then. I really think it must be an binding problem, but can'tfind out how to fix this.

jquery version: 1.11.3 jqueryUI version: 1.11.4

<script>
        $(function() {
            $( "#left" ).accordion({heightStyle: "content"});
            $( "#main" ).tabs({
                beforeLoad: function( event, ui ) {
                    ui.jqXHR.fail(function() {
                        ui.panel.html(
                            "Failed......" );
                    });
                },
                heightStyle: "content"
            });
            $(".btn-start-new-form").click(function(){
                $.getJSON("backend/newform.php", function(result){
                    var theForm = {formID:result}; // object, but formitems must be an array because of order??
                    $("#theform_tmp" ).replaceWith( '<div class="placeholder">sleep een formulier item naar dit vak of klik op "Klaar!</div><button id="addPlaceholder">item toevoegen +</button>' );// ok
                    $('#formItems').trigger('click');// ok
                }); // ok
            });
            $( ".draggable" ).draggable({
                   cancel:false,
                   appendTo: "body",
                   helper: "clone"}); // ok


            $( ".placeholder" ).droppable({
                drop: function( event, ui ){
                    var currentId = $(ui.draggable).attr('id');
                    alert(currentId);
                }
            }); //not working with the ajax app.

            $('#theform').on('mouseover','.placeholder', function(){
                var currentId = $(ui.draggable).attr('id');
                alert(currentId); // var and alert not working
                alert("test");// works, when var/alert are disabled, but dropping stopped
            }); 
        });
    </script>

HTML part:

<div id=wrapper>
        <div id="left" style="width:300px;float:left">
            <h3>Reset/Nieuw formulier</h3>
            <div>
                <p><button class="btn-start-new-form">Start nieuw formulier</button></p>
            </div>

            <h3 id="formItems">Formulier items</h3>
            <div>
            <p>
            <div class="draggable" id="frmTitle"><button id="btnAddTitle" class="addButton">Titel</button></div>
            <div class="draggable" id="boe"><button id="btnAddTxt" class="addButton">Tekstveld</button></div>
            <button id="btnAddTxtArea" class="addButton">Tekst area</button>
            <button id="btnAddSubmit" class="addButton">Verzend knop</button>
            </p>
            </div>

            <h3>N/A</h3><div><p>N/A</p></div>
            <h3>N/A</h3><div><p>N/A</p></div>

        </div>

        <div id="main" style="float:left;">
            <ul>
                <li><a href="#tab-start">Formulier opbouwen</a></li>
                <li><a href="backend/htmlcode.php">HTML code</a></li>
                <li><a href="backend/json.php">JSON</a></li>
                <li><a href="backend/xml.php">XML</a></li>
                <li><a href="backend/preview.php">Preview</a></li>
                <li><a href="backend/help.php">Help</a></li>
            </ul>
            <div id="tab-start">
                <div id="theform">
                    <span id="theform_tmp">Klik links in het menu op:"Start nieuw formulier"</span>
                </div>
            </div>
        </div>
    </div>

Hope someone can help me with this!

Terradon
  • 883
  • 2
  • 13
  • 33
  • Did you try this http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements? – j08691 Sep 30 '15 at 18:28
  • yes i did, and just like other compairable answers,they use "on", but i could not find any answer which could solve my problem. – Terradon Sep 30 '15 at 19:12
  • But are you using the proper event delegation syntax of .on()? Using .on()'s default syntax won't work. – j08691 Sep 30 '15 at 19:16
  • it seems i use that "on" the wrong way, but i can't figure it out. Not from the examples and not from the jquery site. as event i have tried drop, did not work. when using mouseover,i get the alert, but the everything stops working. – Terradon Sep 30 '15 at 19:24

0 Answers0