The div is fully visible

i'm attempting to use JQuery to hide this particular div.

<div id="nbar" style="background-color: #f7f7f7; box-shadow: 0 0 1px lightgray; margin-bottom: 20px; padding-left: 0; width: 100%; margin-top: 5px" class="search-navbar collapse navbar-collapse font-xs">
            <ul class="no-margin nav navbar-nav">
                <li><a href="#" id="ccb">Computer Code</a></li>
                <li><a href="#" id="nameb">Name</a></li>
                <li><a href="#" id="experienceb">Experience</a></li>
                <li><a href="#" id="winsb">No of Win Cases</a></li>
                <li><a href="#" id="totalb">Total Cases</a></li>
                <li><a href="#" id="tlsrankb">TLS Rank</a></li>
            </ul>
            <!---End of no-margin nav navbar-nav--->
        </div>

using the following code inside document ready function:

    function SearchLawyers(SearchText) {

            var url1 = "LawyerData/SearchLawyer/?pTextToSearch=" + SearchText;
            MyWebApp.Globals.MakeAjaxCall("GET", url1, "{}", function (result) {
            if (result.success === true) {
                console.log(result);

                window.globala = result.data;
                debugger;

                if (jQuery.isEmptyObject(window.globala.LawyerList)) {
                    window.isFind = false;
                    $("#nbar").css({ 'display': 'none' });
                    $("#nbar").hide();
                    $(".no-margin nav navbar-nav").hide();
                    $("#Records").html("<h1>No Results Found...!!!<h1>");
                }
                else {
                    window.isFind = true;

                    DisplayLawyerData(result.data);
                    }
            } else {
                MyWebApp.UI.showRoasterMessage(result.error, Enums.MessageType.Error);
            }
        }, function (xhr, ajaxOptions, thrownError) {
            MyWebApp.UI.showRoasterMessage('A problem has occurred while getting Lawyers: "' + thrownError + '". Please try again.', Enums.MessageType.Error);
        });

    }

despite successful execution of jQuery with no errors, the div remains visible on the page even though "No Records Found" message is displayed.

javascriptjqueryhtmlcss

Answer №1

It's possible that the div element is being concealed before it has a chance to display on the page. Give this solution a try:

$(document).ready(function () {
    $("#nbar").hide();
});

Answer №2

// This code will hide the element with id "nbar" when the document is ready

$('#nbar').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nbar" style="background-color: #f7f7f7; box-shadow: 0 0 1px lightgray; margin-bottom: 20px; padding-left: 0; width: 100%; margin-top: 5px" class="search-navbar collapse navbar-collapse font-xs">
            <ul class="no-margin nav navbar-nav">
                <li><a href="#" id="ccb">Computer Code</a></li>
                <li><a href="#" id="nameb">Name</a></li>
                <li><a href="#" id="experienceb">Experience</a></li>
                <li><a href="#" id="winsb">No of Win Cases</a></li>
                <li><a href="#" id="totalb">Total Cases</a></li>
                <li><a href="#" id="tlsrankb">TLS Rank</a></li>
            </ul>
            <!---End of no-margin nav navbar-nav--->
        </div>

Answer №3

When working with Jquery, it is important to remember that it is event-driven. This means you will need to hide elements based on certain events, such as when the window loads.

$(document).ready(function(){
     $("#nbar").hide();
});

Another option is:

$(document).ready(function(){
         $("#nbar").css({'display':'none'});
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

`The Streaming module within React Native`

I am facing an issue in my React Native project where I want to use a node library that depends on stream (require('stream')). The problem arises with the error stream could not be found within the project because stream is a nodejs package not ...

javascriptnode.jsreactjsreact-native

Is it possible to define a constant enum within a TypeScript class?

I am looking for a way to statically set an enum on my TypeScript class and be able to reference it both internally and externally by exporting the class. As I am new to TypeScript, I am unsure of the correct syntax for this. Below is some pseudo-code (whi ...

javascriptclassbackbone.jsenumstypescript

send back the result to the primary function

I need help with this code. I'm trying to return the budget from callbacks in the main function. How can I return a value from the main function? // This method returns the current budget of the user getCurrentBudget: function (req) { var reqTok ...

javascriptnode.jsmongoose

I'm having trouble viewing my display:table-cell content because Internet Explorer is hiding it

I am attempting to align an icon vertically centered and far right inside a container. I currently have code that achieves this using ::after and table-cell properties. However, the content does not display in Internet Explorer. If I remove the display:tab ...

cssinternet-explorercss-tables

Having trouble utilizing Selenium to choose the Date range picker through its XPATH

Trying to extract information from by scraping the data. The goal is to automate the process of changing the date range through a script. However, encountering difficulty in selecting the date range picker using the XPATH provided below. //*[@id="bod ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

Attempting to connect JQuery to a different page through a data attribute connection

I am currently working on a slider that connects slides from an external page through data attributes. Here is the setup: Main Page <div id="sitewrapper"> <section class="sliderwrapper"> <div id="slider" data-source="slides-pa ...

javascriptjqueryhtmlcss

Splitting a JSON array into two separate arrays of values using jQuery: a step-by-step guide

My AJAX script is pulling a JSON array from a PHP file. Here's the script: // jsonData fetched from inc/wip-data.php var jsonData = $.ajax({ url: 'inc/wip-data.php', dataType: 'json', }); The JSON array looks like this: [ { ...

javascriptjqueryarraysjsonajax

When transitioning between different node.js apps, the URL localhost:3000 remains constant

As I was launching a fresh node.js application (referred to as app 2), an unexpected and puzzling phenomenon occurred. I decided to run app 2 after spending some time working on another application earlier in the day (app 1). With the previous app, there w ...

javascriptnode.jshttp-redirectnetworkinglocalhost

Unable to increase value in interface field

I am working with an array of objects that represent interfaces. Once this array is created, each object needs to have a value incremented inside it. Specifically from 'x1' to 'x2'. After the iteration, all the 'x1' and &apo ...

javascriptnode.jstypescript

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

htmlcsssvg

Modify one of the items in the array without changing its original state

Within the React component's state, I have a property named formErrors which consists of an array of objects that dynamically changes. Here is the structure: [ {fieldName: 'title', valid: false}, {fieldName: 'description', va ...

javascriptreactjsecmascript-6immutability

Utilize JavaScript conditions to dynamically apply styles within your web application

I am facing a challenge with managing two separate <style> tags that each contain a large number of styles and media queries. The issue is that one set of styles is intended for desktop users, while the other is meant for mobile users. When both se ...

javascripthtmlcss

What is the method for accessing an HTML control with hyphens in its ID?

I am currently facing a dilemma while converting my front end written in HTML to ASP. The issue arises because many controls have names with "-" in them, causing significant headaches as there is no time to rename everything. Using "ctrl-f" and replace bre ...

c#htmlcssasp.net.net

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

htmljquerycssformsdate

Save the JSON response to an object in order to easily access and retrieve the values from it

I am working on integrating the geonames' API to retrieve JSON data. I have created a dataStorage Object to store the response, but I am facing an issue when trying to access the stored value. Below is the code snippet: var dataStorage = new Object( ...

javascriptjqueryjsonajax

The AngularJS directive seems to be having trouble receiving the data being passed through its scope

Check out this HTML code snippet I created: <div ng-controller="ctrl"> <custom-tag title = "name" body = "content"> </custom-tag> </div> Take a look at the controller and directive implementation below: var mod = angular.mod ...

javascripthtmlangularjs

Having trouble importing NPM packages (e.g. Faker) in TypeScript?

Currently I am encountering an issue while attempting to import Faker into my project. The file structure is as follows: import * as faker from 'faker'; interface Test { FirstName: String, LastName: String } function create() { le ...

javascriptnode.jstypescriptnpmfaker

Problem with a JQuery Slide Show Plugin

My JQuery-created image rotator is generating a Microsoft JScript runtime error: Object Expected message when it runs. Here's the code I'm using. Thank you in advance! <!doctype html> <html> <head> <title>JQuery Test< ...

jqueryhtmlcssvb.net

Building a listview using Angular, MySQL, and Node.js

As a newcomer to Angular, I've been navigating my way through the learning process with some success but also encountering challenges. Although I've managed to resolve certain issues within the application, such as successfully inserting data int ...

javascriptmysqlnode.jsangularjs

angularJS editable input field with click-to-exit functionality

One issue I encountered involved an editable text field directive in Angular, which is structured like this: myApp.directive('editable', function () { return { restrict: 'E', scope: { model: '=&apos ...

javascriptangularjs