I have a DIV with id: TEST that I can drag using jQuery UI. All works, but as soon as I remove it and load the DIV into the HTML dynamically (well to specify more: using SSE to load the DIV into the HTML), the DIV can't be dragged. This is because the jQuery is loaded before the DIV is. How to fix this? Since I use SSE, the DIV is loaded several times over a period of time and must stay draggable.
The DIV looks like this in the TXT file (which is loaded into the HTML)
This DIV (with ID: TEST) is loaded into another DIV called dragZone
- <div id="dragZone" name="dragZone"> [div TEST is loaded here] </div>
The jquery code in the HTML:
- $(function() {
- $( "#TEST" ).draggable({
- containment: "parent"
- }).css({'cursor': 'all-scroll', 'z-index': '5'});
- });
The JS code
that loads the SSE (which pushes the content of txt file everytime it changes):
- //HTML5 SSE(Server Sent Event) initilization
- this.initSevr=function(){
- sevr = new EventSource('test.php');
- sevr.onmessage = function(e){
- if(oldata!=e.data){
- dragZone.innerHTML+=e.data;
- oldata = e.data;
- }
- };
- };
So how can I drag the DIV again everytime the DIV is "pushed" into the HTML?
I've tried putting the jquery part into the SSE part, but that had no effect