1

I'm creating a html builder for my project which including importing a template and edit via drag and drop. I used jquery's load() function to import template to my console page. But after the load function is completed,the draggable become undefined. This is the error i'm getting after load function.

Uncaught TypeError: $(...).draggable is not a function

Here is my code

$(document).ready(function(){
   enableDrag();
   $("#canvas").load("../collectionTemplates/apparel/index.html", function(){
        $('.element').draggable({
           helper: 'original',
           containment: '#canvas',
           tolerance: 'fit'
        });
        $('.element').find('.ui-resizable-handle').remove();
        $('.element').resizable({
           minHeight: 40,
           minWidth: 50,
           maxWidth: 796,
           handles: 'e, w, s, n'
        });

    });
});

Where enableDrag() is initial function to give drag and drop to the tools. In that draggable is working perfectly. But if i call the draggable in callback of the load function it's not working. Anyone know what's happening?

Ditto P S
  • 141
  • 4
  • 15
  • 1
    Works fine at my side. Can you create a [jsFiddle](https://jsfiddle.net/) or [Pen](http://codepen.io/) – vaibhavmande Nov 14 '15 at 05:36
  • @vbrmnd i'm not used to jsFiddle or Pen. I tried to create on fiddle. But how can i load external file in fiddle?. When i tried to load a website its giving failed loading error. – Ditto P S Nov 14 '15 at 05:58
  • 1
    are you re-initializing `jquery` on your `index.html` page? If that is the case then your previously loaded/initialized `jquery widgets` gets overridden and i think because of that only you are loosing them. – vijayP Nov 14 '15 at 09:25
  • Yeah that's the issue. When removed the jquery from the html page i'm loading, the issue is solved. But is there a way that i can tackle this? Since im creating a template editor, i wont be able to change the scripts manually. – Ditto P S Nov 14 '15 at 09:28

0 Answers0