1

i am making an UI for which i am using a pre build logic which is

function goto1(){
            $('.fool .item').draggable({
                revert:true,
                proxy:'clone'
            });
            $('#cool .drop').droppable({
                onDragEnter:function(){
                    $(this).addClass('over');
                },
                onDragLeave:function(){
                    $(this).removeClass('over');
                },
                onDrop:function(e,source){
                    $(this).removeClass('over');
                    if ($(source).hasClass('assigned')){
                        $(this).append(source);
                    } else {
                        var c = $(source).clone().addClass('assigned');
                        $(this).empty().append(c);
                        c.draggable({
                            revert:true
                        });
                    }
                }
            });
            $('.fool').droppable({
                accept:'.assigned',
                onDragEnter:function(e,source){
                    $(source).addClass('trash');
                },
                onDragLeave:function(e,source){
                    $(source).removeClass('trash');
                },
                onDrop:function(e,source){
                    $(source).remove();
                }
            });
        }

and it is called when i am dynamically generating the table where the element is to be dropped whose code is 

function calldata(value) {
    $('#goto').fadeOut('fast');

    jQuery.ajax({
        url: "data3.php",
        type: 'post',
        async: false, // why? Don't block your browser! Leave this out.
        data: {value: value}, // key/value, so PHP finds your data as "value"
        cache: false,
        dataType: "json",
        success: function(response) {

            var p = 10;
            var j = 0;
            var m; 

            var z = "<table >"; // moved here
            z = z + "<tr ><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>lunch</th><th>5</th><th>6</th><th>7</th><th>8</th></tr>";
            // Note: z needs one more column (10 in total!)
            var k = response.length;
            if (k > 10) // remove this IF, you need a value in ALL cases.
                m = k / 10;
            for (var o = 0; o < m; o++) {
                z = z + "<tr>";
                for (j; j < p; j++) {
                    var obj = response[j];
                    var go = obj.subject;
                    var no= obj.color;
                    z = z + "<td class='drop'></td>";
                }
                z = z + "</tr>";
                p = p + 10;
            }
            z = z + "</table>";
            document.getElementById("cool").innerHTML = z;

        }

    });
    goto1();
}

and this is my code for html where inside one div 'fool' i have static table and one div 'cool' where i am dynamically generating a table . if u want a link for the pre defined code i am using this as predefined js file js file

this above code is working fine if both table are static its not working if am generating one table dynamically.if anyone could tell me why it ould be of great help thanks in advance

deepak
  • 77
  • 7
  • 2
    Move `goto1();` to `.success`, currently you're calling `goto1` before a new table is created. – Teemu Dec 30 '15 at 10:55
  • 1
    done that still same result – deepak Dec 30 '15 at 11:02
  • You know an AJAX call is [asynchronous](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call/14220323#14220323)? `async` property has been deprecated since jQuery 1.8. – Teemu Dec 30 '15 at 11:06
  • 2
    @Teemu with `goto()` inside ajax success it will be called everytime there is ajax call. It will be applied for all elements with specified class. Will it not raise performance issue? – pratikpawar Dec 30 '15 at 11:10
  • yes it works only my goto1(); was in the wrong place – deepak Dec 30 '15 at 11:10
  • @pratikwebdev Yes, I was just looking at that same. @ deepak `goto1` actually attaches the events also to the existing tables as well. You have to re-think the logic so that you'd get references to the new table only. If you get stucked with that, please ask a new question. – Teemu Dec 30 '15 at 11:19
  • @Teemu agreed. I was thinking of using eventlisteners on body/table like we would do for datepicker on dynamic fields. Just for personal learning. – pratikpawar Dec 30 '15 at 11:25
  • @teemu: its only effecting the required table 'td' element as it changes the class from "drop" to "drop droppable " so its working fine . can you please explain the issue if i am still missing something – deepak Dec 30 '15 at 12:38
  • If you'd have more than one table, `goto1` would add events again to the exisiting tables too, when creating a new table. Just add some loggings to event handlers to see, that they are actually fired multiple times on a single drag sequence. – Teemu Dec 30 '15 at 12:42
  • one more doubt if i want to make the two element swappable how to achieve that – deepak Dec 30 '15 at 12:44

0 Answers0