1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Problem with jquery

Discussion in 'XenForo Development Discussions' started by Fuhrmann, Oct 13, 2011.

  1. Fuhrmann

    Fuhrmann Well-Known Member

    So, i am loading a page with ajax.

    I am at page one with 3 elements. All the elements have the class "PublicLink", so when i click in the "PublicLink" it is called a jquery function that i made.
    Element 1
    Element 2
    Element 3

    When i click on the link to go to the next page, i will have two more elements all with the same class.

    But then, when i try to click inthe "PublicLink" of the new objects added to the dom, nothing works.

    I now there is the "live()" function in jquery, i though that it is exactly what i am looking for, but, does not work!

    Code:
    XenForo.PublicLink = function($link)
    {
        $link.live('click', function(e)
        {
            //do stuff
        });
    }
    Any help to make this work?
     
  2. CurveGotti

    CurveGotti Active Member

    Shouldn't the first line
    Code:
    XenForo.PublicLink = function($link)
    be
    Code:
    XenForo.ContentLoader = function($link)
    ?
     
  3. Fuhrmann

    Fuhrmann Well-Known Member

    Dont, because i have this:

    <a href="index.php?tags/posts" class="PublicLink">Link</a>
     
  4. James

    James Well-Known Member

    Don't you need to register it?

    Code:
    XenForo.Register('.PublicLink', 'XenForo.PublicLink');
     
  5. Fuhrmann

    Fuhrmann Well-Known Member

    Yes, i make it too:

    XenForo.Register('a.PublicLink', 'XenForo.PublicLink');

    I just put here one part of the code...

    My problem is the new elements to the page and the jquery that does not work on them..
     
  6. James

    James Well-Known Member

    Is the JS included in the templates?
     
  7. Fuhrmann

    Fuhrmann Well-Known Member

    Yes!

    <xen:require js="js/frontend.js" />

    And i have included too in the response template, but does not work too.
     
  8. Syndol

    Syndol Guest

    Shouldn't
    XenForo.Register(
    be
    XenForo.register(

    Note the small 'r'
     
  9. Fuhrmann

    Fuhrmann Well-Known Member

    This is what i got, its working for all elements in the page:

    XenForo.register('a.PublicLink', 'XenForo.BookmarkLink');
    XenForo.register('a.ShowOlder', 'XenForo.ShowOlder');
    XenForo.register('a.ShareLink', 'XenForo.ShareLink');

    The problem still is with the PublicLink, that add new elements to the page, with the same class "PublicLink", but then, jquery doest not work with the news elements.
     
  10. Fuhrmann

    Fuhrmann Well-Known Member

    This is my code:
    Code:
    XenForo.TagLink = function($link)
        {
            $link.click(function(e)
            {
                e.preventDefault();
                var $link = $(this);
    
                XenForo.ajax(this.href, {}, function(ajaxData, textStatus)
                {
                    if (XenForo.hasResponseError(ajaxData))
                    {
                        return false;
                    }
                    $link.stop(true, true);
    
                    new XenForo.ExtLoader(ajaxData, function()
                    {
    
                        var $container = $($link.data('container'));
                        $container.empty().append(ajaxData.templateHtml);
    
                    });
                });
            });
        };
     
  11. Fuhrmann

    Fuhrmann Well-Known Member

    Well, i found a way that make my new elements in DOM work with the jquery function that i made..but, its ugly, i know, but is the only wat i get it to work:

    Just added a XenForo.init(); in my function that add new elements to the DOM.
     
  12. Fuhrmann

    Fuhrmann Well-Known Member

    Another workarround that i think could work:

    PHP:
    public function renderJson()
        {
            
    $this->_templateName 'bookmark_posts_each';
            
    $output $this->_renderer->getDefaultOutputArray(get_class($this), $this->_params$this->_templateName);
            
    $output['js'] = array('js/BookmarkPosts/frontend.js');
            return 
    XenForo_ViewRenderer_Json::jsonEncodeForOutput($output);
    }
    So, when i click the link to add new elements to the page, a the page load again the "frontend.js".

    But, its fail for me. Doest not work in the new elements. Still looking...:D
     
  13. Fuhrmann

    Fuhrmann Well-Known Member

    Omg! Cant believe i got it!

    I change all my jquery and now i got this:

    PHP:
    XenForo.BookmarkPosts = function($form) { this.__construct($form); };
        
    XenForo.BookmarkPosts.prototype =
        {
            
    __construct: function($form)
            {
                
    this.$form $form;

                $(
    'a.BookmarkLink').live('click', $.context(this'unbookmark'));

                $(
    'a.TagLink').live('click', $.context(this'showAllBookmarksWithTags'));
            },

            
    unbookmark: function(e)
            {
                
    e.preventDefault();

                
    XenForo.ajax(e.target, {}, function(ajaxDatatextStatus)
                {
                    if (
    XenForo.hasResponseError(ajaxData))
                    {
                        return 
    false;
                    }
                    $(
    'li[id~="bookmark-'+ajaxData.deletedId+'"]').xfRemove('xfSlideUp');

                });
            },
            
    showAllBookmarksWithTags: function(e)
            {
                
    e.preventDefault();

                
    XenForo.ajax(e.target, {}, function(ajaxDatatextStatus)
                {
                    if (
    XenForo.hasResponseError(ajaxData))
                    {
                        return 
    false;
                    }
                    var 
    $tagLink = $('a.TagLink');
                    var 
    $container = $($tagLink.data('container'));
                    
    $container.empty().append(ajaxData.templateHtml);
                });
            }
        };
    Now, the when i click in some element that was added to the dom, which i require a jquery action, works! Thanks to all that tried to help me!
     

Share This Page