div element hides when load() function is called

January 26, 2021, at 08:10 AM

I'm working on making ordering by some criterias(e.g. by price, by author) on my jsp page. And using ajax to reload content of div when new sorting option is selected. But when reload function is called, it just hides div on web page.

I've checked out, that there are books in session scope needed to be shown and Jquery is included correctly.

This is html for choosing criterias to sort by:

  <select>
        <option id="default">Default</option>
        <option id="price">By price</option>
        <option id="author">By author</option>
  </select>

And here is a code for processing click events for select element:

$(document).ready(function () {
    $('select').change(function () {
        $( "select option:selected" ).each(function() {
            let sortAttr = $('option:selected').attr('id');
            $.ajax({
                // passing data to servlet
                url: 'http://localhost:8080/sort',
                type: 'GET',
                // sort criteria
                data: ({sort: sortAttr}),
                // div needed to be reloaded
                success: function () {
                    $('#mydiv').load(' #mydiv');
                }
            });
        })
    });
})

And code on jsp page for the div needed to be reloaded:

<div id="mydiv">
   <c:forEach var="book" items="${sessionScope.books}">
       <div class="col-4"><a href="/home?command=book_details&isbn=${book.ISBN}">
           <img src="data:image/jpg;base64,${book.base64Image}">
           <h4>${book.title}</h4>
           <p>${book.price}$</p>
        </a></div>
   </c:forEach>
</div>

Any ideas why this happens?

Answer 1

First of all, you need to fix the typo in your code. Having space at the beginning of JQuery identifier won't find the required element.

Change this: $('#mydiv').load(' #mydiv'); To this: $('#mydiv').load('#mydiv');

Also, I think you're using it the wrong way.

Check the documentation here

Answer 2

How about

$(function() { // on page load
  $('select').on("change", function() { // when the select changes
    let sortAttr = $('option:selected', this).map(function() {
      return $(this).attr('id')
    }).get(); // get an array of selected IDs
    if (sortArrr.length > 0) {
      $('#mydiv').load('http://localhost:8080/sort?sort=' + 
        sortAttr.join(',') + // make a comma delimited string
        ' #mydiv'); // copy myDiv from the result
    }
  });
})