jQuery UI Widgets Forums Navigation Tree Problem with Firebug

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 10 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Problem with Firebug #7044

    mirko.lugano
    Participant

    Hi,
    I’m playing around with the great jqxtree feature, I tried to reproduce the drag’n’drop sample as in the demo, but I’m encountering a problem. When I drop a tree item anywhere, Firefox freezes and I have to kill the related task in the Task Manager. This only happens in Firefox, and only if I load the page with Firebug turned on. If I load the page without firebug and I turn it on later, looking at the Firebug console it says ‘Too much recursion’ and it’s a bit slower than on Chrome or Explorer.
    Here is my code (taken from the demo):

    The sample demonstrates the Tree’s drag and drop functionality.

    $(document).ready(function () {
    var theme = ”;
    // Create jqxTree
    $(‘#treeA’).jqxTree({
    allowDrag: true, allowDrop: true, height: ‘300px’, width: ‘220px’, theme: theme,
    dragStart: function (item) {
    if (item.label == “Community”)
    return false;
    }
    });
    $(‘#treeB’).jqxTree({
    allowDrag: true, allowDrop: true, height: ‘300px’, width: ‘220px’, theme: theme,
    dragEnd: function (item) {
    if (item.label == “Forum”)
    return false;
    }
    });
    $(“#treeA, #treeB”).bind(‘dragStart’, function (event) {
    $(“#dragStartLog”).text(“Drag Start: ” + event.args.label);
    $(“#dragEndLog”).text(“”);
    });
    $(“#treeA, #treeB”).bind(‘dragEnd’, function (event) {
    $(“#dragEndLog”).text(“Drag End”);
    if (event.args.label) {
    var ev = event.args.originalEvent;
    var x = ev.pageX;
    var y = ev.pageY;
    if (event.args.originalEvent.originalEvent.touches) {
    var touch = event.args.originalEvent.originalEvent.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
    }
    var offset = $(“#textarea”).offset();
    var width = $(“#textarea”).width();
    var height = $(“#textarea”).height();
    var right = parseInt(offset.left) + width;
    var bottom = parseInt(offset.top) + height;
    if (x >= parseInt(offset.left) && x = parseInt(offset.top) && y <= bottom) {
    $("#textarea").val(event.args.label);
    }
    }
    }
    });
    });

    Home
    Solutions

    Education

    Financial services
    Community

    Products

    Support

    Support home
    Customer Service

    Knowledge base
    Forum

    Events Log:

    Note:

    Dragging of “Community” is disabled.

    Dropping of “Forum” is disabled.

    My question would be is there a known issue with Firebug or other Firefox plugins/extensions? Or am I just doing something wrong?
    The extensions I’m currently using are: CSS Usage, EventBug, FiddlerHook , Firebug, FireQuery, JS Deminifier, Measure it and RoboForm Toolbar.
    Thank you
    Mirko

    Problem with Firebug #7045

    mirko.lugano
    Participant
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="keywords" content="jQuery Tree, Tree Widget, TreeView" />
    <meta name="description" content="The jqxTree displays a hierarchical collection of items. You
    can populate it from 'UL' or by using its 'source' property." />
    <title id='Description'>The sample demonstrates the Tree's drag and drop functionality.
    </title>
    <link rel="stylesheet" href="/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="/Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="/Scripts/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    // Create jqxTree
    $('#treeA').jqxTree({
    allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
    dragStart: function (item) {
    if (item.label == "Community")
    return false;
    }
    });
    $('#treeB').jqxTree({
    allowDrag: true, allowDrop: true, height: '300px', width: '220px', theme: theme,
    dragEnd: function (item) {
    if (item.label == "Forum")
    return false;
    }
    });
    $("#treeA, #treeB").bind('dragStart', function (event) {
    $("#dragStartLog").text("Drag Start: " + event.args.label);
    $("#dragEndLog").text("");
    });
    $("#treeA, #treeB").bind('dragEnd', function (event) {
    $("#dragEndLog").text("Drag End");
    if (event.args.label) {
    var ev = event.args.originalEvent;
    var x = ev.pageX;
    var y = ev.pageY;
    if (event.args.originalEvent.originalEvent.touches) {
    var touch = event.args.originalEvent.originalEvent.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
    }
    var offset = $("#textarea").offset();
    var width = $("#textarea").width();
    var height = $("#textarea").height();
    var right = parseInt(offset.left) + width;
    var bottom = parseInt(offset.top) + height;
    if (x >= parseInt(offset.left) && x <= right) {
    if (y >= parseInt(offset.top) && y <= bottom) {
    $("#textarea").val(event.args.label);
    }
    }
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div style='float: left;'>
    <div id='treeA' style='float: left; margin-left: 0px;'>
    <ul>
    <li id='home' item-selected='true'>Home</li>
    <li item-expanded='true'>Solutions
    <ul>
    <li>Education</li>
    </ul>
    </li>
    <li>Financial services</li>
    <li>Community</li>
    </ul>
    </div>
    <div style='float: left; margin-left: 20px;' id="treeB">
    <ul>
    <li>Products
    </li>
    <li item-expanded='true'>Support
    <ul>
    <li>Support home</li>
    <li>Customer Service</li>
    </ul>
    </li>
    <li>Knowledge base</li>
    <li>Forum</li>
    </ul>
    </div>
    <div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
    <textarea rows="5" id="textarea"></textarea>
    </div>
    </div>
    <div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
    <b>Events Log:</b>
    <div id="dragStartLog">
    </div>
    <div id="dragEndLog">
    </div>
    <br />
    <b>Note:</b>
    <br />
    Dragging of "Community" is disabled.
    <br />
    Dropping of "Forum" is disabled.
    </div>
    </div>
    </body>
    </html>
    Problem with Firebug #7046

    mirko.lugano
    Participant

    Sorry I had posted my code incorrectly….

    Problem with Firebug #7048

    mirko.lugano
    Participant

    Solved the issue myself, the problem was with the FireQuery Extension. After disabling it, everything works fine.

    Problem with Firebug #7049

    Peter Stoev
    Keymaster

    Hi Mirko,

    Thanks for the update!

    Best Wishes,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.