jQuery text（）和show（）无法正常工作（RoR应用程序）

Question

I want to implement a custom and simple check of the number of items that I have in the cart.

First, I load my page with a place holder div in one of my menu elements:

<div id="items_count" style="display:none;">(count)</div>

Then in my javascript file (application.js) I have the following code:

$(document).ready(function () {
  $items_count_element = $("#items_count");
  if ($items_count_element.length > 0 )
  {
    $.ajax({
        url: '/get_items_count',
        type: 'GET',
        dataType: 'json',
        success: function (response) {
            // Construct the new string to display
            items_count_new_content = "(" + response.items_count + ")";

            // Printout to verify that we point to the correct div
            alert($("#items_count").text());
            // Verify the new string to display
            alert(items_count_new_content);


            // Empty the div element and replace the content with the new string
            $("#items_count").empty().text(items_count_new_content);

            // Remove display : none
            $("#items_count").show();
            }
        });
    }
});

The AJAX requested is executed with success, and the alerts display the expected text ( "(count)" and lets's say "(3)", which means i have 3 items in the cart ).

But $("#items_count").empty().html(items_count_new_content); and $("#items_count").show(); seem to not work at all, even if the functions are simple enough. Moreover, I've used them many times in the past with success...

I've tried to replace text() with html() with no success.

Any ideas what may be the problem here ?

Thanks

Answer 1

在jQuery中，您可以使用val更改值：

$("#items_count").empty().val(items_count_new_content);

Answer 2

After debugging, i noticed that i had 2 menus on the page instead of one ( the normal menu and the sticky menu ). So my problem was the usage of the id as the selector my element. This caused that the jQuery replaced the content only for the sticky menu ( Which is invisible in the top of the page ), since we are supposed to have unique ids for each element in the DOM.

I fixed my issue by replacing $("#items_count") by $(".items_count_div")

I hope it'll help whoever encounter similar problem.