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

Problem with jquery

Fuhrmann

Well-known member
#1
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
#2
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)
?
 

Fuhrmann

Well-known member
#5
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..
 

Fuhrmann

Well-known member
#9
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
#10
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
#11
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
#12
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
#13
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!