Mam ten kod HTML:

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
</div>

Następnie w moim kodzie jQuery mam warunek, jeśli nie powiedzie się, a następnie dołączę niektóre HTML do elementu Wybierz:

$(".country").on('change', function() {
    country = $(this).find('option:selected').val();
    $.get(Routing.generate('states', {country_id: country})).success(function(data) {
        if (data.message === "") {
            $('.state').empty().append('<option value="-1">Choose state</option>');
            $.each(data.entities, function(i, d) {
                $('.state').append('<option value="' + d.id + '">' + d.name + '</option>');
            });
            $('.state').removeAttr('disabled');
        } else {
            $('.country').after('<span class="help-block">' + data.message + '</span>');
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No connection";
        }
    });
});

To wyjście coś takiego:

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
    <span class="help-block">Some text goes here</span>
</div>

Ale w dowolnym momencie zmienam wybór i warunek nie powiedzie się <span> jest powtórz raz i raz wytwarzanie tego:

<div class="form-group">
    <select class="country form-control" required="required" name="fos_user_registration_form[country]" id="fos_user_registration_form_country">
        ....
    </select>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
    <span class="help-block">Some text goes here</span>
</div>

Kiedy powinno być tylko raz, co muszę zrobić, aby to naprawić?

Ponadto, jak dodam klasę do <div class="form-group">

1
ReynierPM 14 sierpień 2014, 21:10

3 odpowiedzi

Najlepsza odpowiedź

Powinieneś spróbować najpierw usunąć rozpiętość, jeśli już istnieje

$(this).next('.help-block').remove()

Aby dodać klasę do bieżącego DIX DIV tylko, użyj rodzica

$(this).parent('.form-group').addClass('newClass');
1
Islam El-Khayat 14 sierpień 2014, 17:21

Po pierwsze, aby wybrać tylko tę konkretną "grupę Form-Group", musisz dodać inny typ identyfikatora do znacznika. Może to być kolejna nazwa klasy, albo być może identyfikator, jak więc:

<div class="form-group" id="form-group-country">
    ...
</div>

Wtedy byłbyś w stanie wyróżnić ten <div> łatwo w jQuery:

// Store the form-group wrapper for the states <select>
var $formGroupCountry = $('#form-group-country');

Aby odpowiedzieć na twoje pytanie o dodanie tylko rozpiętości raz, będziesz chciał zachować jakiś flagę, aby wiedzieć, że błąd został już dodany do DOM. To powinno działać:

var hasErrorBeenAdded = false;
$(".country").on('change', function() {
    country = $(this).find('option:selected').val();
    $.get(Routing.generate('states', {country_id: country})).success(function(data) {
        if (data.message === "") {
            $('.state').empty().append('<option value="-1">Choose state</option>');
            $.each(data.entities, function(i, d) {
                $('.state').append('<option value="' + d.id + '">' + d.name + '</option>');
            });
            $('.state').removeAttr('disabled');
        } else if($('.country .help-block').length==0 && !hasErrorBeenAdded) {
            $('.country').after('<span class="help-block">' + data.message + '</span>');
            hasErrorBeenAdded = true;
        }
    }).error(function(data, status, headers, config) {
        if (status == '500') {
            message = "No connection";
        }
    });
});

Mam nadzieję że to pomoże.

2
grammar 14 sierpień 2014, 17:25

Możesz użyć po prostu flagi do śledzenia. coś takiego

var flag = 0;//declare globally
if(... && flag == 0){
    //your scripts
    flag++;
}
1
MH2K9 14 sierpień 2014, 17:33