2017-02-22 7 views
0

У меня есть кнопка html с атрибутом onclick, которая запускает функцию jQuery AJAX, указывающую на PHP-код.
PHP-код записывает HTML в выходной HTML-код <select> (элемент остается скрытым до запуска javascript.)
Это прекрасно работает, чтобы заполнить <select> при нажатии кнопки «Добавить еще».JS Ajax OnClick: Как выполнить PHP-код несколько раз?

Проблема заключается в том, что она добавляет один и только один. Я хочу быть в состоянии иметь новый <select> тег заполнения с каждый щелчком «добавить еще один» кнопку до макс 2.
The JS в вопросе:

var genre_dropdown = function genre_dropdown() { 
    $('.genre_output').css('display', 'block'); 
    $.ajax({ 
     url:'../includes/functions/genre_dropdown.php', 
     complete: function (response) { 
     $('.genre_output').html(response.responseText); 
     }, 
     error: function() { 
      $('.genre_output').html('Bummer: there was an error!'); 
     } 
    }); 
    return false; 
} 


HTML, в вопрос:

<select name="genre_id[]" autocomplete="off" class="genre_output"></select> 
    <select name="genre_id[]" autocomplete="off" class="genre_output"></select> 
    <div class="button add-genre-button" onclick="return genre_dropdown();">+ Add Existing Genre</div> 


Я думал, что я мог бы включать в себя 2 HTML <select> элементы для PHP для заполнения в код будет выполняться от одного до го е далее. Я понимаю, почему это неверно, код работает одновременно. Я нахожусь в месте, где у меня есть две кнопки («добавить одну», «добавить другую»), но это кажется излишним и неправильным, особенно учитывая, что я хочу использовать масштабируемую технику (максимум не всегда может быть 2 .) Мне нужна помощь.

ответ

0

Ваш запрос php в порядке.

Я просто имею в виду определить переменную в качестве Использование JavaScript т.е .:

var sel = '<select name="genre_id[]" autocomplete="off" class="genre_output">' + response + "</select>'; 

, а затем каждый раз, когда вы делаете запрос будет включать в ответ в качестве значения элемента. Это позволит вам добавить родительский div столько раз, сколько захотите. Наконец, используйте простой, если счетчик, чтобы решить, следует ли продолжать добавление или нет:

if ($(".genre_output").length <= 2){ 
    $("PARENT_DIV_ID").append(sel); 
}; 

ли это яснее? @kaari

+0

Как бы эта работа с PHP? Я бы описал элементы html как «templated» в php-файле? Этот ответ неясен. –

+0

Когда я пытаюсь это сделать, то, что вставлено в элементы select, является «[object Object]» вместо результатов php-кода. –

+0

Это не плохая новость, по крайней мере ваши дивы получают информацию. Является ли ваша функция php передачей массива? Он состоит из объектов? Если это так, вам нужно использовать только JavaScript для преобразования их в строки для отображения. Имеет ли это смысл? – Luke

0

Предполагая, что вы хотите сохранить предыдущие значения в выпадающем списке, то вы можете попробовать добавить() вместо HTML()

$('.genre_output').append(response.responseText); 
Смежные вопросы