Problem with jquery

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?
 

CurveGotti

Active 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?
Shouldn't the first line
Code:
XenForo.PublicLink = function($link)
be
Code:
XenForo.ContentLoader = function($link)
?
 

James

Well-known member
Don't you need to register it?

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

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..
 
S

Syndol

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

Note the small 'r'
 

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.
 

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);

                });
            });
        });
    };
 

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.
 

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
 

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(ajaxData, textStatus)
            {
                if (XenForo.hasResponseError(ajaxData))
                {
                    return false;
                }
                $('li[id~="bookmark-'+ajaxData.deletedId+'"]').xfRemove('xfSlideUp');

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

            XenForo.ajax(e.target, {}, function(ajaxData, textStatus)
            {
                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!
 
Top