单击时刷新div contenct

Question

I've this problem:

I want to reload this div, made with Java Spring, when the user clicks on a button:

<div id="trigger-who" class="page" th:fragment="triggerWho">
        <h3><strong class="accent">Which</strong> service will activate the rule?</h3>

        <ul id="trigger" class="list list-horizontal">
            <li th:each="channel: ${channels}"
                th:with="service=${channel.getService()}"
                th:if="${channel.getService().getTriggers().size() != 0}">
                <figure
                    class="service-box"
                    data-trigger="trigger"
                    th:attr="data-service-name=${service.getName()},data-service-connected=${channel.isConnected()}">
                    <img th:id="${service.getName()}" th:src="@{/img/} + ${service.getName()} + '.png'" />
                    <figcaption th:text="${service.getName()}"></figcaption>
                </figure>
            </li>
        </ul>
        <br clear="all" />
</div>

In particular, I want to update the attribute "data-service-connected".

I've tried the load() method:

$("#trigger-who").load(location.href + "#trigger-who"),

but it doesn't work fine. It puts the whole page in the div.

Anyone have some suggestion?

Thanks in advance for any answer.

Answer 1

You want to load a "fragment" of the page.

Using this:
$("#trigger-who").load(location.href + "#trigger-who")

The whole page is loaded : http://www.domain.com/#trigger-who
( #trigger-who is considered as a hash in the address) .

Using a space between the address and "hash part" indicates that it is a jQuery selector.
$("#trigger-who").load(location.href + " #trigger-who")

The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.

See documentation .