A DOM-thing problem I guess
Ok, In order to explain the problem, first I'm going to describe the situation:
I'm collaborating in a project involving cakephp doing the front-end. We have a view that is composed by a search section and a table to show the matches of the search. At first, the view shows in the table all the items, well, it only shows 15 items due to pagination, that's the default view and the one that is loaded in the DOM.
The table uses this plugin called "tablesorter" to apply styles and sorting, it has an easy implementation, I just need to write $("table").tablesorter() to get all my tables affected by the plugin and get them to do the sorting thing and to have a nice zebra style on the rows.
Inside my table, there is column named "actions", and inside of it, there are a bunch of button-like images for the most common actions, "edit", "delete", "add value" and so on. Inside my javascript file, I do a $(selected image).click to perform an ajax comunication with the controller of the view, and depending on the image I clicked, It answers with a view to load inside a Jquery UI modal window.
So, If I clicked on the "edit" image, the script tells the controller of the site to load inside the modal window the view for edit. To be more specific, what the $.ajax gets as a response is the html and php code of the view.
At this point, there is no problem and works perfectly, the problem is that, when I perform a search, the actual view with all the items is substituted by one containing only the items from the search. That new view has the same composition of the original, no exceptions, a table with the same ids, same classes, same button-like images, same everything, but I don't get the same actions that my javascript file provided to the original view, I mean, the table, with the same id and class as the original, don't get the features of the jquery plugin, and the buttons perform no action when clicked.
Ok, I get that it fails to do it because those elements weren't "catched" by the DOM because they were sent by an ajax. I managed to solve the button problem using .live instead of .click, and voila, they worked fine in the search-generated table, but I couldn't do the same thing with my table.
The thing is that .live uses an "event trigger", and for the buttons it was easy, they used the "click" event to do their thing, but as for the table, I really don't use an event to tell it to do its job, I use a plugin.
I managed to half-solve the problem with this code :
$("table").live('hover',function(){
$("table").tablesorter();
});
As you can see, I use the "hover" event to trigger the sorting with the .live features, now, when my search-generated view loads, I have to position the mouse on the table in order to make the plugin to work, but at first glance, the table loads without the zebra style and without the default sorting order that I tell it to do using the plugin tools.
After this long explanation, my question is, is there another way to solve the table problem without using a HOVER event, or any other event that forces me to do a thing before I can get my table to work proprerly. What I would really need is a method that could force the plugin to apply to the ajax-loaded view from the begining.
Thank you
I'm collaborating in a project involving cakephp doing the front-end. We have a view that is composed by a search section and a table to show the matches of the search. At first, the view shows in the table all the items, well, it only shows 15 items due to pagination, that's the default view and the one that is loaded in the DOM.
The table uses this plugin called "tablesorter" to apply styles and sorting, it has an easy implementation, I just need to write $("table").tablesorter() to get all my tables affected by the plugin and get them to do the sorting thing and to have a nice zebra style on the rows.
Inside my table, there is column named "actions", and inside of it, there are a bunch of button-like images for the most common actions, "edit", "delete", "add value" and so on. Inside my javascript file, I do a $(selected image).click to perform an ajax comunication with the controller of the view, and depending on the image I clicked, It answers with a view to load inside a Jquery UI modal window.
So, If I clicked on the "edit" image, the script tells the controller of the site to load inside the modal window the view for edit. To be more specific, what the $.ajax gets as a response is the html and php code of the view.
At this point, there is no problem and works perfectly, the problem is that, when I perform a search, the actual view with all the items is substituted by one containing only the items from the search. That new view has the same composition of the original, no exceptions, a table with the same ids, same classes, same button-like images, same everything, but I don't get the same actions that my javascript file provided to the original view, I mean, the table, with the same id and class as the original, don't get the features of the jquery plugin, and the buttons perform no action when clicked.
Ok, I get that it fails to do it because those elements weren't "catched" by the DOM because they were sent by an ajax. I managed to solve the button problem using .live instead of .click, and voila, they worked fine in the search-generated table, but I couldn't do the same thing with my table.
The thing is that .live uses an "event trigger", and for the buttons it was easy, they used the "click" event to do their thing, but as for the table, I really don't use an event to tell it to do its job, I use a plugin.
I managed to half-solve the problem with this code :
$("table").live('hover',function(){
$("table").tablesorter();
});
As you can see, I use the "hover" event to trigger the sorting with the .live features, now, when my search-generated view loads, I have to position the mouse on the table in order to make the plugin to work, but at first glance, the table loads without the zebra style and without the default sorting order that I tell it to do using the plugin tools.
After this long explanation, my question is, is there another way to solve the table problem without using a HOVER event, or any other event that forces me to do a thing before I can get my table to work proprerly. What I would really need is a method that could force the plugin to apply to the ajax-loaded view from the begining.
Thank you
Topic Participants
jolus_grey
Kevin Boudloche
redeyesloki