Erase the dynamically loaded page using ajax and conceal the div

Question

Erase the dynamically loaded page using ajax and conceal the div

Currently, I am utilizing the .on() method with jQuery to display a specific div, and also using .load() to fetch a particular div from a web page hosted on my server.

My query is how can I close this div when clicking outside of it, along with removing it from the DOM to prevent multiple reloads?

This div is part of the footer section and it can be toggled by clicking a link in the footer.

I attempted using .off() in the following way:

if ($(window).width() > 500) {
    //
    $('.marketSelector',this.$element).on('click', function(e){
        e.preventDefault();
        var testMarketSelector = $('.testMarketSelector');
        testMarketSelector.css({
            'display': 'block'
        });
        testMarketSelector.load( "/frontend/MarketSelector.html .MarketSelector" );
        testMarketSelector.off("click", function(){
            testMarketSelector.css({
                'display': 'none'
            });
        });
    });
}

I also experimented with .one():

if ($(window).width() > 500) {
    //
    $('.marketSelector',this.$element).one('click', function(e){
        e.preventDefault();
        var testMarketSelector = $('.testMarketSelector');
        testMarketSelector.css({
            'display': 'block'
        });
        testMarketSelector.load( "/frontend/MarketSelector.html .MarketSelector" );
    });
}

javascript jquery css ajax

Answer 1

Answer №1

testMarketSelector.load( ...); function includes a success handler; remember to invoke

testMarketSelector.off("click", ...)

within the success handler of load(). Additionally, keep in mind that there may be complications if the load() function itself loads jquery, as this could potentially override the parent page's jquery.

Answer 2

testMarketSelector.load( ...); function includes a success handler; remember to invoke

testMarketSelector.off("click", ...)

within the success handler of load(). Additionally, keep in mind that there may be complications if the load() function itself loads jquery, as this could potentially override the parent page's jquery.

Answer 3

Answer №2

Update your event to the following:

$('.marketSelector', this.$element).one('click', function (e) { ... });

To remove the div when clicking outside of the element, you can utilize a plugin such as outerclick or add a new event listener to the body.

Include this event handler when initializing the Dialog:

var $marketingDialog = this.$element;
$("body").on("click.outer",function(event){ 
 // Check if click occurred outside of the dialog
 if(!$marketingDialog.parents($(event.target)).length ){
    $marketingDialog.fadeOut();
    $marketingDialog.remove();
    $("body").off("click.outer"); 
  }
});

Answer 4

Update your event to the following:

$('.marketSelector', this.$element).one('click', function (e) { ... });

To remove the div when clicking outside of the element, you can utilize a plugin such as outerclick or add a new event listener to the body.

Include this event handler when initializing the Dialog:

var $marketingDialog = this.$element;
$("body").on("click.outer",function(event){ 
 // Check if click occurred outside of the dialog
 if(!$marketingDialog.parents($(event.target)).length ){
    $marketingDialog.fadeOut();
    $marketingDialog.remove();
    $("body").off("click.outer"); 
  }
});

Erase the dynamically loaded page using ajax and conceal the div

Answer №1

Answer №2

Similar questions

Remove the active class after it has been clicked for the second time

Ensuring the accuracy of a single field within a form containing multiple fields is made possible through the utilization of

Solution for fixing the position of a div scrollbar under the browser scrollbar

Is it possible for a property to be null or undefined on class instances?

No results found by Mongoose find() method

Recording transmitted information during an ajax call

To align a div or text to the right using inline-flex, simply

Seeking assistance in configuring a dynamic payment amount feature on Stripe using Node.js

Take out property that was placed in the "style" tag

Obtain information from express middleware

Troubleshooting a Node.js problem with variable scope

Transform Client - Server command-line interface Node.js application into a Docker container

HTML integration of JavaScript not working as expected

A solution for managing MUI data grid rows and columns using useRef to prevent infinite loops when handling onSortModelChange

Tips for storing mustache templates for rendering in Node.js

Issues with locating the fonts: React-slick paired with nextjs

streaming an HTML5 video directly from memory source

What is the process of extracting data from JavaScript output using Mongoose?

React | Utilizing ForwardedRefs with React Components

Verify for a class that does not exist