Search jQuery

jQuery Forum

Screen name:
obin

obin's Profile

6 Posts

10 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Pass post variables to ajax tabs
[0Replies]
- 21-Nov-2012 05:58 PM
- Forum: Using jQuery UI
Hi,

When running jquery ui 1.8.23 I used to be able to pass parameters through my ajax tabs just like that :
1. <li><a href="my_url.php?my_param=my_value">My Tab Name</a></li>
I'm now trying to migrate to 1.9.1 and it's a total different story... as soon as I add
1. "?my_param=my_value"
to my url I run into problems. For instance I will not be able to drop items into the tabs generated that way.
So I decided to explore the ajaxOption area to see if I could fin a workaround... I was thinking of doing something like:
1. <li><a href="my_url.php" my_param="my_value">My Tab Name</a></li>
and then get my_param attr value through some ajaxOption coding...
My problem is that I was just not able to do so... my post value would never land to my my_url.php page :-(
Besides I read here that ajaxOption is going to be deprecated in 1.10 in favor of beforeLoad... same issue here...I was never able to make it through....

Here's what I've tried so far (among few other trials):
1. $(function() {
3. var $tabs = $("#tabs").tabs({
5. load: function(event, ui) {
7. var post_variables = {my_param:'my_param'};
8. $("#tabs").tabs("option", "ajaxOptions",{
9. type: 'POST',
10. data: post_variables,
11. error: function(xhr, status, index, anchor) {
12. $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo.");
13. }
14. })
16. etc...
So could anyone help with:
- the right way to get post variable through ajax tabs ?
- confirm (or not) the fact that ajaxOption should be replaced my BeforeLoad ?
Thanks for reading !

jquery UI loosing widget functionality after using ajax...
[2Replies]
- 20-Nov-2012 05:58 PM
- Forum: Using jQuery UI
Hi,

Ok I'm trying to have a merge of connect-lists-through-tabs AND tabs content with ajax.

If I play connect-lists-through-tabs alone it works great but as soon as I try to combinate it with tabs content with ajax it gets harder...

Actually what happens is that I still can see my two lists in my two tabs (perfectly calling my two html files) but the problem is that the items from the lists are no more draggable/droppable/sortable...

Please note I run jquery ui 1.9.1

Any help would be much appreciated...

Thanks in advance !

Here is my main file:
2. <!doctype html>
4. <html lang="en">
5. <head>
6. <meta charset="utf-8" />
7. <title>jQuery UI Sortable - Connect lists with Tabs</title>
8. <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
9. <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
10. <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
11. <link rel="stylesheet" href="/resources/demos/style.css" />
12. <style>
13. #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
14. </style>
15. <script>
16. $(function() {
17. $( "#sortable1, #sortable2" ).sortable().disableSelection();
19. var $tabs = $( "#tabs" ).tabs();
21. var $tab_items = $( "ul:first li", $tabs ).droppable({
22. accept: ".connectedSortable li",
23. hoverClass: "ui-state-hover",
24. drop: function( event, ui ) {
25. var $item = $( this );
26. var $list = $( $item.find( "a" ).attr( "href" ) )
27. .find( ".connectedSortable" );
29. ui.draggable.hide( "slow", function() {
30. $tabs.tabs( "select", $tab_items.index( $item ) );
31. $( this ).appendTo( $list ).show( "slow" );
32. });
33. }
34. });
35. });
36. </script>
37. </head>
38. <body>
40. <div id="tabs">
41. <ul>
42. <li><a href="content1.html">Nunc tincidunt</a></li>
43. <li><a href="content2.html">Proin dolor</a></li>
44. </ul>
45. </div>
46. </body>
47. </html>
and here is the content of "content1.html" (content2.html was built following the same pattern)
2. <div id="tabs-1">
3. <ul id="sortable1" class="connectedSortable ui-helper-reset">
4. <li class="ui-state-default">Item 1</li>
5. <li class="ui-state-default">Item 2</li>
6. <li class="ui-state-default">Item 3</li>
7. <li class="ui-state-default">Item 4</li>
8. <li class="ui-state-default">Item 5</li>
9. </ul>
10. </div>

Display accordion using ajax works fine on jq ui 1.8.23 but crashes on 1.9.1
[1Reply]
- 19-Nov-2012 06:17 AM
- Forum: Using jQuery UI
I have a problem migrating some code from jquery ui 1.8.23 to 1.9.1.

The purpose of the code is to display accordions within tabs. The accordion code is present in another page called with ajax.

It works fine when set up to 1.8.23 and crashes (accordion not displayed properly) when updated to 1.9.1.

I've tried many updates ( checking out 1.9.0 and 1.9.1 changelogs) but just couldn't manage to sort this out.

Any help will be much appreciated.

Here is the code I play in my main document:
1. <html>
  <head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="../include/css/jquery/jquery-ui-1.9.1.custom.css" type="text/css" media="all" />
  
  <script>
  $(function () {
  var $tabs = $("#tabs").tabs({
  ajaxOptions: {
  error: function (xhr, status, index, anchor) {
  $(anchor.hash).html("<font face='arial' size='2'>Problem.</font>");
  },
  complete: function () {
  $(".accordion").accordion({
  active: 1,
  autoHeight: false,
  collapsible: true
  });
  }
  }
  });
  });
  </script>
  </head>
  
  <body>
  <div id="tabs">
  <ul>
  <li><span class='ui-icon ui-icon-close'>Remove Tab</span><span class='ui-icon ui-icon-pencil' id='modif_categ_1' idcat='1' title='Categ1'></span><a href='accordion.php?tabs=1' name='1' title='1'>Categ 1</a></li>
  <li><span class='ui-icon ui-icon-close'>Remove Tab</span><span class='ui-icon ui-icon-pencil' id='modif_categ_2' idcat='2' title='Categ2'></span><a href='accordion.php?tabs=2' name='2' title='2'>Categ 2</a></li>
  </ul>
  </div>
  </body>
Here is the code I play in the document (accordion.php) called by ajax (with accordion in it):
1. <?
  echo "<div><ul>";
  echo "<li class='accordion'>";
  echo "<h3>Title of Accordion</h3>";
  echo "<div>Content</div>";
  echo "</li>"
  echo "</ul></div>";
  ?>

Accordion avoid overlap
[3Replies]
- 15-Aug-2012 06:35 AM
- Forum: Using jQuery UI
Hello,

I've got an issue here:

I have 2 tabs with lists of sortable accordions in them.
On tab 1, if I open an accordion content will not overlap the other elements of the list.
However once I've dropped the accordion into second tab, this accordion will always overlap other element if the list even if I drop it back to tab1.
So I guess accordion looses some properties moving from tab A to tab B... but I just can't figure out what... any clue ?

Thanks

Large item dropped within small tab ... is that possible ?
[2Replies]
- 13-Aug-2012 03:12 AM
- Forum: Using jQuery
Hello,

I have an accordion embedded in a connected sortable list. My items (accordions to be dropped from one tab to another) are 300 px when my tabs are like 50 px. When trying to drop those elements it doesn't work.... it can be dragged but refuses to get dropped.(too large to be swallowed ;-) ?)
Anyone used good practice to perform this ?

Thanks !

Paul

Accordion Embedded in Sortable Connected Lists
[0Replies]
- 11-Aug-2012 08:53 AM
- Forum: Getting Started
Hello,

I'm new to jquery and I'm willing to build and embedded accordion within a Sortable Connected Lists...
I already succeeded embedding the accordion within the tabs however I get two issues:

1- When I drop an accordion from one tab to another I can no more see it's content when I click on the header. I can see I can open it (the little arrow show that it is opened) but no way I can read what's inside the accordion. It's somehow "hidden"...) Looks like the div is broken somewhere. Any clue ?

2- My headers are going to be a "sentence" so my accordion will have like 400px width. Problem is when I set this width it becomes almost impossible to find the spot where to drop the accordion if I want to drop it in another tab.Any idea ?

Any help will be much appreciated !

Here is my jquery:
2. <script>
3. $(function() {
4. $( "#accordion1" ).accordion({ active: 1, collapsible: true, autoheight: true });
5. $( "#accordion2" ).accordion({ active: 1, collapsible: true, autoheight: true });
6. $( "#accordion3" ).accordion({ active: 1, collapsible: true, autoheight: true });
7. $( "#accordion4" ).accordion({ active: 1, collapsible: true, autoheight: true });
9. $( "#sortable1, #sortable2" ).sortable().disableSelection();
11. var $tabs = $( "#tabs" ).tabs();
13. var $tab_items = $( "ul:first li", $tabs ).droppable({
14. accept: ".connectedSortable li",
15. hoverClass: "ui-state-hover",
16. drop: function( event, ui ) {
17. var $item = $( this );
18. var $list = $( $item.find( "a" ).attr( "href" ) )
19. .find( ".connectedSortable" );
21. ui.draggable.hide( "slow", function() {
22. $( this ).appendTo( $list ).show( "slow" );
23. });
24. }
25. });
26. });
27. </script>
Here is my html:
2. <div class="demo">
4. <div id="tabs">
5. <ul>
6. <li><a href="#tabs-1">Nunc tincidunt</a></li>
7. <li><a href="#tabs-2">Proin dolor</a></li>
8. </ul>
10. <div id="tabs-1">
12. <ul id="sortable1" class="connectedSortable ui-helper-reset">
13. <li class="ui-state-default">
14. <div id="accordion1">
15. <h3><a href="#">Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</a></h3>
16. <div id="bidule">
17. <p>
18. TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1
19. </p>
20. </div>
21. </div>
22. </li>
23. <li class="ui-state-default">
24. <div id="accordion2">
25. <h3><a href="#">Section 2</a></h3>
26. <div id="bidule">
27. <p>
28. TAB 1 Accordion 2 TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2
29. </p>
30. </div>
31. </div>
32. </li>
33. <li class="ui-state-default">Item T1 3</li>
34. <li class="ui-state-default">Item T1 4</li>
35. <li class="ui-state-default">Item T1 5</li>
36. </ul>
39. </div>
40. <div id="tabs-2">
42. <ul id="sortable2" class="connectedSortable ui-helper-reset">
43. <li class="ui-state-default">
44. <div id="accordion3">
45. <h3><a href="#">Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</a></h3>
46. <div id="bidule">
47. <p>
48. TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1
49. </p>
50. </div>
51. </div>
52. </li>
53. <li class="ui-state-default">
54. <div id="accordion4">
55. <h3><a href="#">Section 2</a></h3>
56. <div id="bidule">
57. <p>
58. TAB 2 Accordion 2 TAB 2 Accordion 2TAB 2 Accordion 2 TAB 2 Accordion 2 TAB 2 Accordion 2 TAB 2 Accordion 2 TAB 2 Accordion 2
59. </p>
60. </div>
61. </div>
62. </li>
63. <li class="ui-state-default">Item T2 3</li>
64. <li class="ui-state-default">Item T2 4</li>
65. <li class="ui-state-default">Item T2 5</li>
66. </ul>
69. </div>
70. </div>
72. </div>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend