AJAX expert needed.

Discussion in 'Web Design and Development' started by CANEHDN, Aug 7, 2008.

  1. CANEHDN macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #1
    Unfortunately I will not be able to provide links for this. I have a table that is displayed on the page. A user can press a button to added information to the database which in turn adds a new row to the table. I'm using AJAX to create the row without having to refresh. This works perfectly, finally.

    This is what one of the rows looks like. The class attribute works fine when the page loads but doesn't seem to work when I add the rows with AJAX. I use it to open a fancy popup box if the user clicks the image.

    Here is the code that I use to create the row and the columns.

    I hope you can understand this. Any help would be much appreciated.
     
  2. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #2
    I wont pretend to be a javascript expert, because I am not anywhere near close to one. However....

    Let me make sure I understand your problem first. Thickbox isnt working on the new rows that are generated using the javascript? The class attribute is used by thickbox to figure out which links thickbox gets applied to. Am I right?

    The problem could be a result of the code that thickbox uses to initialize itself when the page loads.

    This is the function that is being called I am talking about...

    Code:
    //add thickbox to href & area elements that have a class of .thickbox
    function tb_init(domChunk){
      $(domChunk).click(function(){
      var t = this.title || this.name || null;
      var a = this.href || this.alt;
      var g = this.rel || false;
      tb_show(t,a,g);
      this.blur();
      return false;
      });
    }

    This is the actual call of the function, along with other calls...
    Code:
    $(document).ready(function(){   
      tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
      imgLoader = new Image();// preload image
      imgLoader.src = tb_pathToImage;
    });
    you might need to recall the tb_init() function after you generate the new row...

    I think that would probably fix it, assuming I understood your problem correctly.
     
  3. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #3
    You understand it exactly. I will try to call that that function again once I close the popup, tomorrow. Hopefully it works. Thanks for the help.
     
  4. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #4
    Alright, then I would just copy this into your javascript, right after the new table row is created...

    Code:
    tb_init('a.thickbox, area.thickbox, input.thickbox');
    Best of luck with this.
     
  5. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #5
    Erm...

    Did you use setAttribute in this manner for your new row

    Code:
    newrow.setAttribute('class', 'thickbox');
    
    Add this line in as well

    Code:
    newrow.className = 'thickbox';
    newrow.setAttribute('class', 'thickbox');
    
    Some browsers do not register style changes with setAttribute


    For adding events such as onclick, use attachEvent for IE and addEventListener for the rest
     
  6. CANEHDN thread starter macrumors 6502a

    CANEHDN

    Joined:
    Dec 12, 2005
    Location:
    Eagle Mountain, UT
    #6
    I've both suggestions and still have the same issue. I even tried calling the function on an onClick event in the image and link. Any more suggestions? I'm sure this can be done.


    I'm such a dingle berry. You were right. I forgot to add parent. I hate working on problems and once you come close to getting it, you forget the basic stuff. Since I've added this, it works.
    Code:
    parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
    
    Thanks a ton for you help. Here have a jolly rancher.
     

Share This Page