jQuery Forum

jQuery UI Sortable - Update not firing
[2Replies]
- 23-Apr-2012 08:40 AM
- Forum: Using jQuery UI
Hello, I have an interesting situation and I cannot determine what is wrong. I am trying to build a drag and drop category and product list. I am using jQuery UI's sortable function to do so. I am using the latest versions of jQuery and jQuery UI.

The lists are laid out as so:
1. <ul> // Top level categories
2. <li>TLC 1
3. <ul>Sub Category 1
4. <li>Cat A</li>
5. <li>Cat B</li>
6. </ul>
7. </li>
8. <li>TLC 2
9. <ul>Sub Category 2
10. <li>Cat C</li>
11. <li>Cat D</li>
12. </ul>
13. </li>
14. </ul>
My javascript is thus:
1. $(".admin-tree-sort-cat").sortable({
2. cancel: ".sort-button",
3. connectWith: ".admin-tree-sort-cat",
4. update: function(event, ui) {
5. var ids = $(this).sortable("toArray").toString();
6. $.ajax({
7. type: "POST",
8. url: "ajax/tree_order.php",
9. data: { ids: ids, cat: "1" },
10. success: function(data) {
11. alert(data);
12. }
13. });
14. },
15. placeholder: "ui-state-highlight"
16. });
Dragging from sub-category to top level category works fine. Dragging from sub-category to sub-category works fine. However dragging from top level category to sub-category only triggers the update on the top level category, not the sub-category, which means the change doesn't get saved. Why would dragging from sub-category to tlc work but not the other way round?

Firebug shows no errors and all the correct ajax calls, except for the missing one when dragging from tlc to sub cat.

Help Combining jQuery UI and SuperFish
[5Replies]
- 19-Feb-2012 10:07 AM
- Forum: Using jQuery Plugins
I have a CMS system that uses SuperFish to build the menu on the front end. On the back end one of the most common comments we received was users found it hard to relate the back end menu to the front end menu. Our solution, make an editable copy of the front end menu in the back end. This involved combining the jQuery UI selectable feature with a SuperFish menu.

The initial integration works great. I have a menu bar with 2 tiers of drop down menus on them and I can move items around on the menu fine. I can select an item in a child menu and move it to it's parent fine, however I can't move an item to a child menu because whilst the drag feature is functioning hovering over a SuperFish menu doesn't open it.

What I need to do is try to find a suitable way to open all the child menus when select is active. I thought something like this would work:
2. start: function(event, ui) {
3. $('ul.main-menu').showSuperfishUl();
4. },
5. stop: function(event, ui) {
6. $('ul.main-menu').hideSuperfishUl();
7. }
However that just creates an ever increasing number of white spaces every time I move my mouse whilst dragging an item in a menu. Is there a way to open all of the child menus of the active select menu?

Tab height when using divs inside tab div
[1Reply]
- 11-Dec-2011 12:00 PM
- Forum: Using jQuery UI
I have a tab, <div id="tab1">, that works perfectly fine. However I want to split the div up in two, so I used 2 divs inside, menu and content, so my DOM structure looks thus:
1. <div id="tabs">
2. <ul>
3. <li><a href="#tab1">Tab 1</a></li>
4. <li><a href="#tab2">Tab 2</a></li>
5. <li><a href="#tab3">Tab 3</a></li>
6. </ul>
7. <div id="tab1">
8. <div class="menu">
9. <h3>Menu</h3>
10. <br />
11. <ul>
12. <li><a href="#settings">Settings</a></li>
13. </ul>
14. </div>
15. <div class="content">
16. Settings go here...
17. </div>
18. </div>
19. </div>
Menu is floated left and content is floated right.

The problem is the height of the tab background doesn't extend down with the menu and content. Why not?

New to jQuery, trying to use Ajax
[3Replies]
- 14-Oct-2011 08:18 AM
- Forum: Getting Started
Hello all, I'm still relatively new to the world of developing websites (about 9 months now) and I've just discovered jQuery. Looks fantastic and an easy way to save me writing a lot of Javascript.

I wrote a demo login system, just for me to learn and as some example code I could show to prospective employers, with my own Ajax code in it. It worked great. All it does is send 2 variables to another page, ajax.php, which in turn echo's out the new information to be placed in the specified div. Now I'm trying to take out my code and use jQuery's Ajax, however I cannot get it to work and from the examples in the documentation I believe it should.

Can someone please take a look at this code and tell me why it isn't working?
1. function funcValUser(user) {
2. $(document).ready(function(){
3. if(user.length < 5 || user.length > 24) {
4. alert("Usernames must be between 5 and 24 characters. \nPlease enter a valid username.");
5. }
6. var iChars = "!@#$%^&*()+=-[]\\\';,./{}|\":<>?~_";
7. for(var i = 0; i < user.length; i++) {
8. if(iChars.indexOf(user.charAt(i)) != -1) {
9. alert ("Usernames must only contain alphanumeric charactes. \nPlease enter a valid username.");
10. $.post("includes/ajax.php", { action: 4, info: 1 },
11. function(data) {
12. $('.ajaxResult1').html(data);
13. }
14. );
15. return false;
16. }
17. }
18. $.ajax({
19. url: 'includes/ajax.php',
20. data: { action: 1, info: user },
21. success: function(data) {
22. $('.ajaxResult1').html(data);
23. }
24. });
25. return true;
26. });
27. }
As you can see I've tried to use 2 different methods for the 2 different Ajax calls, $.post in one and $.ajax in the other but neither seems to work.

Response title

Attachments

jQuery Forum

Activity Trend