CODEWITHSUNDEEP
jquerysharepoint
13reach
13reach

Reputation: 77

$(window).load not always working

I try to implement drag and drop on my site using jquery. When testing this under Google Chrome browser most of the time its working (~ 9 out of 10 times its working). When i use IE11 most of the times its not working (like 1 out of 10 times its working).

I'm trying to implement this on a SharePoint 2013 Site.

I'm using the following code:

$(window).load(function() {
        $('.draggable').draggable({
            cursor: "move",
            revert: "invalid",
            opacity: 0.7,
            snap: ".droppable",
            snapMode: "inner"
        });
    });

    // Dropzone
    $(window).load(function() {
        $('.droppable').droppable({
          accept: ".draggable",
          hoverClass: 'hovered',
          drop: positioning
        });
    });

    function positioning( event, ui ) {
        var draggableId = ui.draggable.attr("id");
        var droppableId = $(this).attr("id");
        updateItemSprintBacklog(droppableId, draggableId);
        window.location = window.location;
    }

    $(window).load(function() {
        $('.droppableDelete').droppable({
            accept: ".draggable",
            hoverClass: 'hovered',
            drop: deleteTicket
        });
    });

I believe the window.load is loaded to slow sometimes, but i can't tell why. And i don't know how to fix this.

Thanks for the help.

Upvotes: 0

Views: 4576

Answers (3)

13reach
13reach

Reputation: 77

Thank your for all your replys. I think i got the answer. I set a TimeOut of 500 ms. Now it works all the time.

    setTimeout(function(){
      // Code
    }, 500);

Upvotes: 3

Zorken17
Zorken17

Reputation: 1896

The reason why it's not working every time is because SharePoint has lot of scriptfiles to load, and sometimes depending on where you put your jQuery file it won't load before the site is loaded.

So you can try to use JavaScripts load instead of jQuerys like this:

window.onload = function() {
  //your code
};

Or you need to check if the jquery file is loaded whit a recursive function that checks if jquery is loaded like this:

(function checkForJquery() {
    if (window.jQuery) {  
        // jQuery is loaded
        // your code here  
    } else {
        // jQuery is not loaded
        checkForJquery();
    }
})();

Hope it helps.

Upvotes: 1

hmd
hmd

Reputation: 970

As @Velimir Tchatchevsky said, $(window).load doesn't need to be write multiple times so you can do that:

<script type="text/javascript">

$(window).load(function() {
    $('.draggable').draggable({
        cursor: "move",
        revert: "invalid",
        opacity: 0.7,
        snap: ".droppable",
        snapMode: "inner"
    });

    // Dropzone
    $('.droppable').droppable({
      accept: ".draggable",
      hoverClass: 'hovered',
      drop: positioning
    });

    $('.droppableDelete').droppable({
        accept: ".draggable",
        hoverClass: 'hovered',
        drop: deleteTicket
    });
});

function positioning( event, ui ) {
    var draggableId = ui.draggable.attr("id");
    var droppableId = $(this).attr("id");
    updateItemSprintBacklog(droppableId, draggableId);
    window.location = window.location;
}

</script>

And you can also use JQuery Document Ready, like this:

<script type="text/javascript">

$(function() {
    $('.draggable').draggable({
        cursor: "move",
        revert: "invalid",
        opacity: 0.7,
        snap: ".droppable",
        snapMode: "inner"
    });

    // Dropzone
    $('.droppable').droppable({
      accept: ".draggable",
      hoverClass: 'hovered',
      drop: positioning
    });

    $('.droppableDelete').droppable({
        accept: ".draggable",
        hoverClass: 'hovered',
        drop: deleteTicket
    });
});

function positioning( event, ui ) {
    var draggableId = ui.draggable.attr("id");
    var droppableId = $(this).attr("id");
    updateItemSprintBacklog(droppableId, draggableId);
    window.location = window.location;
}

</script>

Upvotes: 0

Related Questions