div element hides when load() function is called

62
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
    }
  });
})
READ ALSO
Displaying Dynamic placeholder content on Textbox in ReactJS

Displaying Dynamic placeholder content on Textbox in ReactJS

I wanted to place a dynamic content in placeholder inside my textbox component in ReactI have declared a function which returns the placeholder, passing the value as argument

83
Extracting Parameters from Redirect URI - QuickBooks API / Python

Extracting Parameters from Redirect URI - QuickBooks API / Python

I'm working on the authentication component of an app that calls the quickbooks online reporting APIIntuit has an authentication package, intuit-oauth, which I'm using to generate the authorization URL

87
How to check if a function is running in worker thread in node?

How to check if a function is running in worker thread in node?

I am trying to use worker_threads in node to run some expensive calculation without blocking the main thread

87
PyQt5 - setting background color and background image

PyQt5 - setting background color and background image

I wonder how do I set background color AND background image in Python GUI app using PyQt5I can't figure out how to set them simultaneously

105