Jquery elements not rebinding + HTMLDivElement unrecognized expression

390
November 21, 2016, at 7:07 PM

I am creating a dynamic refresh feature for div elements on my site that need to be dynamically refreshed.

$(document).ready(function() {
        function refreshDiv() {
            var refreshUrl =  window.location.pathname;
            $('.refreshable').each(function() {
                $(this).fadeOut("slow", function() {
                    $(this).hide().load(refreshUrl + " " + this, "").fadeIn("slow");
                });
            });
        }
        $(document.body).on("click", ".login_button.submit", function(e) {
            e.preventDefault();
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                type : "POST",
                url : '/login',
                data : {username:username, password:password},
                success:function(response) {
                    if(response.status == 'success') {
                        $('#sb-site').animate({'opacity': '1'}, 300);
                        $('#login_form').toggle();
                        refreshDiv();
                    } else {
                        console.log('Something went wrong');
                    }
                },
                error:function(response) { 
                    console.log('Something went wrong');
                }
            });
        });
        $(document.body).on("click", ".logout_button", function(e) {
            e.preventDefault();
            $.ajax({
                type : "POST",
                url : '/logout',
                success:function(response) {
                    if(response.status == 'success') {
                        refreshDiv();
                    } else {
                        console.log('Something went wrong');
                    }
                },
                error:function(response) { 
                    console.log('Something went wrong');
                }
            });
        });
    });

I have a few issues that have come up.

1) After logout is clicked, it calls the Laravel controller at /logout. After that, it loads up the page with the refreshed content, but the jquery click events wont rebind, so I have to refresh in order to log in again after a logout. The elements rebind fine after login happens, however. I figured using .on() would fix this, but it has not.

2) Elements are duplicated because I am having trouble implementing 'this' into the refreshDiv function. I get an error:

Uncaught Error: Syntax error, unrecognized expression: [object HTMLDivElement]

This doesn't happen if I do

$(this).hide().load(refreshUrl + " .refreshable>*", "").fadeIn("slow");

but I need it to reload each specific targeted element individually, or it overlaps the content with matching classes. I tried:

$(this).hide().load(refreshUrl + " " + this, "").fadeIn("slow");

My goal is to just be able to have a scalable solution to just add a .refresh class to a wrapper that needs to be dynamically refreshed.

Answer 1

It is hard to tell exactly what you want from this as shown in your call to .load(). The reason your error is showing up is because you are implicitly casting this to a string. The result is "[object HTMLDivElement]" which makes your call look like this

$(this).hide().load(refreshUrl + " " + "[object HTMLDivElement]", "").fadeIn("slow");

and that should clear up why the error occurs. What do you need from the div element in that spot?

In order to access the current div, just use prop or attr or native calls to get the information out from that point, such as this.className or this.id or $(this).data('location') etc.

However, as you have already started this chain off with $(this), making the call to .load will already apply the loaded content at refreshUrl to the current this element.

So really all you need to do is

$(this).hide().load(refreshUrl,function(){
    $(this).fadeIn('slow'); // only fade in once content is loaded
});

Or perhaps you want the fade to occur while the data loads, in which case $(this).hide().load(refreshUrl).fadeIn("slow"); would be used.

Rent Charter Buses Company
READ ALSO
Button text change before appearing in the new html page

Button text change before appearing in the new html page

I have a problem: I am changing the text of a button depending on a click from the previous page, so I tried using JavaScript to update the innerHTML of the button in the new page using the onload() event for the body of the new page. But, it appears...

310
Jquery horizontal slide based on div width

Jquery horizontal slide based on div width

I have jquery script where you can click a left and right button and it will scroll horizontally to show more content. .

438
AJAX POST form is changing page

AJAX POST form is changing page

This is driving me bonkers, I'm sure it's a silly little error but I can't see it - could one of you geniuses embarrassed me & point it out please?.

361
jHeatmap Javascript library tab behaves strangely

jHeatmap Javascript library tab behaves strangely

I have been struggling with this problem for days and it really baffled me. Hopefully someone skillful in JQuery could help out.

240