jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tree › Problem with Firebug
This topic contains 4 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 9 months ago.
-
AuthorProblem with Firebug Posts
-
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
SolutionsEducation
Financial services
CommunityProducts
Support
Support home
Customer ServiceKnowledge base
ForumEvents 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<!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>
Sorry I had posted my code incorrectly….
Solved the issue myself, the problem was with the FireQuery Extension. After disabling it, everything works fine.
-
AuthorPosts
You must be logged in to reply to this topic.