Load using Target

Question

I am trying to refresh only in part of the content, so I want to use Jquery with Load method. But I would like to use data-target="name" and load inside the HTML code LI. There is the possibility ?

Follows HTML code:

   <nav id="sidebar" class="text-white">
     <div class="nome-do-usuario border-bottom ">
       <h5 class="text-center">Apoio Operacional</h5>
     </div>
     <ul class="lista-de-opcoes">
       <li data-toggle="collapse" data-target="#materiais" class="opcoes-principais text-left"><a href="#">Estoque</a>
         <ul class="submenu collapse" id="materiais">
           <li class="opcao"><a href="#">Cadastro de produtos</a></li>
           <li class="opcao"><a href="#">Entrada</a></li>
           <li class="opcao"><a href="#">Saída</a></li>
           <li class="opcao"><a href="#">Solicitar material</a></li>
           <li class="opcao"><a href="#">Gerenciar estoque</a></li>
         </ul>
       </li>
     </ul>
   </nav>
   <div class="container-fluid" id="resposta-do-conteudo">

Follows code Jquery:

$('.submenu li').click(function(){
 $('#resposta-do-conteudo').load()
})

I wish the LI would stay that way: <li class="opcao" data-target="cadastro-de-produtos.html"><a href="#">Cadastro de produtos</a></li>

What to put inside the load() ?

Thank you !!!

Answer 1

Hello, the method load jquery is a very simple way of fetching server data and assigning it to an html element, in it just provide the destination url address of the page you want to load to the element.

In your case this url address (or part of it) is inside the property data-target, therefore you need to recover this object value and pass the method load. The result would be this:

$('.submenu li').click(function() {
    const link = $(this).data('target');
    const baseUrl = 'http://localhost/pages/';
    $('#resposta-do-conteudo').load(baseUrl + link)
});

Note that there is a variable called baseUrl, fill it with the base url of your application to make the search successful. I’m assuming that all the pages you want to open are inside the same directory, for example:
- pages/product registration.html
- pages/input.html

You can see more about how the load method works at https://api.jquery.com/load/