Javascript Function Not Being Called after dynamic loading

Question

I have a weird issue that i am hoping someone can help resolve.

Problem

When i load html dynamically via .load() function, if any aspect of html in the loaded fragment tries to access the javascript query functions in original HTML page, it doesn't work. Example code below:

Main HTML page (main.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<!--javascript load functions etc... standard header stuff -->
</head>
<body>
<div id="dynamic_section_fragment"></div>
<a href="javascript:" onclick="loadFragment()">Load Fragment</a>

    <script type="text/javascript">


        // <![CDATA[
function loadFragment() {
            $("#dynamic_section_fragment").load("/api/fragment/");
        };

$(".checkvalue").click(function () {
            $.getJSON("/api/checkvalue", {term: $(this).attr('value')}, function () {
                console.info("submitted for checking");
            })
        });
        // ]]>
    </script>

</body>
</html>

FRAGMENT File (fragment.html)

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">

    </head>
    <body>
<div th:fragment="check_value">
    <br/>
Check the value in the attribute field   
<br/>
<a href="javascript:" th:attr="value='123'" class="checkvalue">Check This<a/> 
</div>
    </body>
    </html>

SPRING MVC Controller Method

@RequestMapping("/api/checkvalue")
public String getFragment(Model model) {
return "fragment :: check_value";
}

So a run down of actions:

-Main.html page loads

-User clicks on Load Fragment hyperlink

-Javascript dynamically loads the relevant fragment into the div

-User clicks on Check This hyperlink, nothing happens

Is there something i am missing or something i need to be aware?

It is as if Thymeleaf has preregistered all the possible scenarios of events and doesn't allow any others. Only way i have been able to get it to work is by injecting the "checkvalue" javascript within the fragment, which as you can agree is a bad way of doing things.

Help is appreciated.

is the fragment loaded asynchronously?

forgivenson
– forgivenson

2015-04-16 11:50:50 +00:00
Commented Apr 16, 2015 at 11:50 — forgivenson
– forgivenson, Commented Apr 16, 2015 at 11:50

Jite · Accepted Answer · 2015-04-16 12:02:57Z

2

You are applying the click event listener to all existing objects with the checkvalue class.

$(".checkvalue").click(function ()

What you rather wish to do (to make the click event apply to all the existing and any new added, dynamically) is to set a event on a parent in the dom tree (parent both to the existing and to all that will be added).
In your case, the body tag would probably be the safe bet.

The following should suffice:

$('body').on('click', '.checkvalue', function() { ...

Simplified, the code will apply a listener on the body element instead of the .checkvalue objects, and whenever a object with the .checkvalue class is clicked (wether dynamically or statically loaded), the event will fire.

edit
I would also suggest that you, in your javascript, don't use jquery before you know for certain that it is loaded.
The jquery lib have a way of fixing this for you, by using the $( document ).ready() function:

$( document ).ready(function() {
  // All jquery dependant code here.
});

edited Apr 16, 2015 at 12:02

answered Apr 16, 2015 at 11:57

Jite

5,8772 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aeseir Over a year ago

Fantastic. I'd buy you beer coz this was doing my head in (I'm just coming back to javascript after exceptionally long absence).

Ghasem Sadeghi Over a year ago

Simple but very important note. Thank you @Jite.

Collectives™ on Stack Overflow

Javascript Function Not Being Called after dynamic loading

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related