Ishamel,
Thanks so much for responding to my post:
I am having trouble getting your solution to work - I included a sample of
the code I am using.
Just an FYI I am using ColdFusion's new ajaxproxy
Whatever insights you have would be appreciated.
code below:
==============================================
//init(); is called onLoad() - it is binding the table cells to the method
handlers correctly.
var init = function() {
$("table tbody
td").filter(".hasContent").hover(showBox,hideBox).mousemove(position);
$("table tbody td").filter(".hasContent").click(showDetail);
}
//method is called on click to change the data in the table
function changeContent(){
// create an instance of the ColdFusion/Ajax proxy.
var e = new proxy_cfc();
e.setCallbackHandler(handleContent);
e.setErrorHandler(handleError);
e.getContent(x);
}
//Callback function handles returned records
var handleContent = function(res)
{
//unbinding does not seem to work
$("table tbody td.hasContent").unbind('hover').unbind('mousemove');
$("table tbody td.hasContent").unbind('click')
for ( var i=0; i<=res.length-1; i++ ){
//this is the row header
rows[i].setAttribute('id',res[i][0].TOPIC);
var cell=rows[i].cells;
cell[0].innerHTML=res[i][0].CONTENT;
//This is where the cells are poulated with content
if (res[i][1].HASCONTENT){
cell[1].innerHTML="<a onMouseOver='javascript:getRO(" +
res[i][1].CONTENT_ID + ");' " +
"href='javascript:getDetail(" + res[i][1].CONTENT_ID + ");'>" +
res[i][1].CONTENT +"</a>";
cell[1].setAttribute('className',"hasContent");
cell[1].setAttribute('class',"hasContent");
}
else {
cell[1].innerHTML=res[i][1].CONTENT;//content here is just ;nbsp
cell[1].setAttribute('className',"noContent");
cell[1].setAttribute('class',"noContent");
}
if (res[i][2].HASCONTENT){
cell[2].innerHTML="<a onMouseOver='javascript:getRO(" +
res[i][2].CONTENT_ID + ");' " +
"href='javascript:getDetail(" + res[i][2].CONTENT_ID + ");'>" +
res[i][2].CONTENT +"</a>";
cell[2].setAttribute('className',"hasContent");
cell[2].setAttribute('class',"hasContent");
}
else {
cell[2].innerHTML=res[i][2].CONTENT;
cell[2].setAttribute('className',"noContent");
cell[2].setAttribute('class',"noContent");
}
}
//re binding does not work
$("table tbody
td.hasContent").hover(showBox,hideBox).mousemove(position);
$("table tbody td.hasContent").click(showDetail);
}
On Mon, Sep 15, 2008 at 3:16 PM, Ishamel <[EMAIL PROTECTED]> wrote:
>
>
>
> On Sep 15, 12:49 pm, jwynne <[EMAIL PROTECTED]> wrote:
> > Currently I am using $(document).ready to bind some behaviours to
> elements in
> > the DOM based on a class name (using jquery's .filter) - This works great
> on
> > the initial load of the page however these bindings get all screwy when I
> > try injecting or editing new elements to the DOM dynamically via AJAX.
> > After researching the issue I have been trying to use the livequery
> plug-in
> > but have been unsuccessful so far.
> >
> > In $(document).ready I am assigning behaviour to td elements of the class
> > "hasContent". I am looking to hook them up to livequery listeners so that
> > the correct behaviours are assigned when the DOM is updated.
> >
> > $(document).ready(function(event) {
> >
> > var position = function() {
> > }
> > var showBox = function() {
> > }
> > var hideBox = function() {
> > }
> > var showDetail = function() {
> > }
> >
> > //Syntax help below
> > $("table tbody td").filter(".hasContent").hover(showBox,
> > hideBox).mousemove(position);
> > $("table tbody td").filter(".hasContent").click(showDetail);
> >
> > });//EOF
> >
> > Can anybody help me with the syntax necessary to get livequery to
> > bind/unbind the necessary behaviours to the table tds?
> >
> > Thanks for the help.
> > --
> > View this message in context:
> http://www.nabble.com/jquery-livequery-assign-behaviour-to-element-by...
> > Sent from the jQuery General Discussion mailing list archive at
> Nabble.com.
>
> jQuery runs the code once on load, and binds the beahvior to the
> elements. Once you star to add and remove elements using ajax you have
> to tell jquery to bind to the newly created element on the page.
>
> I'm not sure what how your getting you data back; but in the callback
> you will need to unbind the behavior, load the data in the DOM then
> rebind the behavior yo want
>
> onload bind your events
> $("table tbody td").filter(".hasContent").hover(showBox,
> hideBox).mousemove(position);
> $("table tbody td").filter(".hasContent").click(showDetail);
> in the callback function unbind your event
>
> $("table tbody
> td.hasContent").unbind('hover').unbind('mousemove);
> $("table tbody td.hasContent").unbind('click')
>
> Inject the data into the DOM; then rebind you events
>
> $("table tbody td.hasContent").hover(showBox,
> hideBox).mousemove(position);
> $("table tbody td.hasContent").click(showDetail);
>
> That should work for you.
> If you add the code that you are using to do the ajax work I could be
> more precise.
>
>
