Dropdown bootstrap after <g:remotelink> / Ajax call in Grails

Question

I am working on a Grails project where I have this dropdown:

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >${category.getName()} <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        <li>
        <g:remoteLink controller="todo" action="getTodos" update="dynamic" method="GET" id="${category.id}" onSuccess="dynamics()">Ver
                    </g:remoteLink>
    </li>
            <li><a href="#">Modificar</a></li>
            <li><a>Eliminar</a></li>
    </ul>
</li>

and this function on JS:

function dynamics(){
    $("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore");
    $(".dropdown-toggle").dropdown();
}

The problem is: After the ajax call, the jscode $(".dropdown-toggle").dropdown(); the dropdown works normally but after performing another ajax call right after, the dropdown collapses and won't work unless I reload the whole page.

Anyone knows how to fix this problem Thanks in advance.

Answer 1

As @Fernando recommened to implement my own ajax call instead of using <g:remotelink> , I changed my code to this:

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" >${category.getName()} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
    <li><a data-id="${category}" onclick="dynamics('${category.id}')"  class="button">Ver
    </a></li>
    <li><a href="#">Modificar</a></li>
    <li><a>Eliminar</a></li>
</ul>
</li>

function dynamics(id){
        $.get("<g:createLink controller='todo' action='getTodos' />",  {"id":id}, function(respuesta){
              $("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore").html(respuesta)
        ;});
;}

The problem was that I had declared the function $(".dropdown-toggle").dropdown(); inside the function dynamics but after two ajax calls the boostrap drowdowns would not work, then I found the solution to this problem by declaring the mentioned function inside the $(document).ready(function() like this:

$(document).ready(function() {
        $("#dynamic").addClass("dynamicBefore");
        $(".dropdown-toggle").dropdown();
    });