How to access DIV that was added via HTML jquery function?

47 views Asked by At

I have a form that is submitted by clicking a button via jquery. While the form is running it puts some custom html in #results like so:

$('#run-scraper').click(function() {

    $('#scraper-form').submit();

    $('#results').html('<div class="loading">Scraping odds. Please wait...<br><img src="/images/ajax-loader.gif">');

});

Im using jquery-form-validation below. What I want to do is clear out the results div on error. But its not working. The HTML stays there when it errors out. How do I access the results after it was added when the button was clicked?

$.validate({
    form                    :   '#scraper-form',
    errorMessagePosition    :   'top',
    validateOnBlur          :   false,
    scrollToTopOnError      :   false,
    onError                 :   function($form) {

        $('#results').html('');

    }
});
2

There are 2 answers

1
Yogesh On BEST ANSWER

use like below

$('#run-scraper').click(function() {
    $('#results').html('<div class="loading">Scraping odds. Please wait...<br><img src="/images/ajax-loader.gif">');
    $('#scraper-form').submit();
});
0
Shiladitya On

Here you go with the solution.

$.validate({
    form                    :   '#scraper-form',
    errorMessagePosition    :   'top',
    validateOnBlur          :   false,
    scrollToTopOnError      :   false,
    onError                 :   function($form) {
      $('div[class="loading"]).remove();
    }
});

Below code is having invalid HTML

$('#results').html('<div class="loading">Scraping odds. Please wait...<br><img src="/images/ajax-loader.gif">');

Change this to

$('#results').html('<div class="loading">Scraping odds. Please wait...<br><img src="/images/ajax-loader.gif"></div>');

One more way to empty the #result container using jQuery empty method.

$.validate({
    form                    :   '#scraper-form',
    errorMessagePosition    :   'top',
    validateOnBlur          :   false,
    scrollToTopOnError      :   false,
    onError                 :   function($form) {
      $('#results').empty();
    }
});

Hope this will help you.