Forums

jQuery Sortable doesn't sort table items

Permalink
Howdy!

I'll preface this by stating I'm a newbie to concrete5. I'm have an issue getting the jQuery Sortable plugin to work and am not sure what wrong. I'm using 5.5.1 and am using the Javascript, jQuery and concrete5 documentation as my reference. Ok, so I added following to the block controller.php:


public function on_page_view() {
// this doesn't work yet
/* if ($this->rss) {
$b = $this->getBlockObject();
$this->addHeaderItem('<link href="' . $this->getRssUrl($b) . '" rel="alternate" type="application/rss+xml" title="' . $this->rssTitle . '" />');
}
*/
$html = Loader::helper('html');
$this->addHeaderItem($html->css('jquery.css'));
$this->addHeaderItem($html->css('ccm.dialog.css'));
$this->addHeaderItem($html->javascript('jquery.ui.js'));
$this->addHeaderItem($html->javascript('ccm.dialog.js'));
}

Then I created a view.php:


<H3 align=center>Howdy!</H3>
<BR>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
...
</tbody>
</table>

and view.js:

$(document).ready(function()
{
$("#myTable").tablesorter( );
}
);


The table displays, but I can't get the columns to sort. Any ideas? MTIA!
ChuckP
 
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
I see that in your controller you're calling jquery.ui.js. This is a no-no! Concrete already includes this script by default, so adding this will make it redundant, so it won't work. Try removing that.

Also, make sure you're not including any regular jquery library, as Concrete also includes jquery by default as well.

Let me know if that worked.
ChuckP replied on at Permalink Reply
ChuckP
I commented the out 'jquery.ui.' js and css lines and tried that wo/any success. I also commented out all the lines I added and had no success. I checked the php error logs and see no clues. Has C5 changed that much since 5.4.2? I guess I'm thrown off a bit that it (include jquery.ui.js) is in the C5 how-to docs.

I'll keep poking around a bit. Thanks for your help!
12345j replied on at Permalink Best Answer Reply
12345j
Actually c5 doesn't include jquery ui only jquery base

Sent from my iPod
ChuckP replied on at Permalink Reply
ChuckP
D'oh!! That's the trick!! Sorry, it should have been more obvious to me!!

I also added the tablesorter.js file to the concrete/js directory and added the following lines in the controller.php:

public function on_page_view() {
      // this doesn't work yet
      /*   if ($this->rss) {
            $b = $this->getBlockObject();
            $this->addHeaderItem('<link href="' . $this->getRssUrl($b) . '"  rel="alternate" type="application/rss+xml" title="' . $this->rssTitle . '" />');
         } 
                */
                  $html = Loader::helper('html');
                  $this->addHeaderItem($html->css('jquery.css')); 
                  $this->addHeaderItem($html->css('ccm.dialog.css')); 
                  $this->addHeaderItem($html->javascript('jquery.ui.js')); 
                  $this->addHeaderItem($html->javascript('jquery.tablesorter.js')); 
                  $this->addHeaderItem($html->javascript('ccm.dialog.js')); 
      }


Now, I will replace the hardcoded tbody data with a foreach loop tied to a database table. Wish me luck! :)

Thanx Guys!!!!