#javascript #php #html #ajax #codeigniter
#javascript #php #HTML #аякс #codeigniter — инициализатор кода
Вопрос:
Я создал нижеприведенную форму в Codeigniter, где есть выпадающий список, зависящий от 4 уровней. Пока я учусь в первом классе, все работает так, как и ожидалось. Когда я нажимаю кнопку добавить, чтобы создать обновленную форму, похожую на первую, всякий раз, когда я выбираю поле страны и ожидаю, что на основе моего выбора будут соответствующие опции во втором выпадающем меню (чемпионат), это не работает. Данные, основанные на моем выборе страны, не поступают. Похоже, что вызова JavaScript нет. Не могли бы вы, пожалуйста, помочь мне понять, в чем моя ошибка после нажатия кнопки добавить, так что независимо от того, сколько форм я создаю, у меня будут соответствующие вызовы функций в моем контроллере, где он выводит соответствующие данные в выпадающие меню depentened? Большое вам спасибо!
<div class="container box">
<br />
<br />
<h3 align="center">Available Championships</h3>
<br />
<?php echo form_open_multipart('dynamic_dependent'); ?>
<div id="dynamic_field">
<div class="form-group">
<select name="country[]" id="country" class="form-control input-lg">
<option value="">Select Country</option>
<?php
foreach($country as $row)
{
echo '<option value="'.$row->id.'">'.$row->name.'</option>';
}
?>
</select>
</div>
<br />
<div class="form-group">
<select name="championship[]" id="championship" class="form-control input-lg">
<option value="">Select Championship</option>
</select>
</div>
<br />
<div class="form-group">
<select name="home_team[]" id="home_team" class="form-control input-lg">
<option value="">Select Home Team</option>
</select>
</div>
<div class="form-group">
<select name="away_team[]" id="away_team" class="form-control input-lg">
<option value="">Select Away Team</option>
</select>
</div>
<div class="form-group">
<input type="text" name="prediction[]" id="prediction">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" name="add" id="add" class="btn btn-success">Add More</button>
</div>
</div>
<div class="form-group">
<button>Submit</button>
</div>
<?php echo form_close(); ?>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i ;
$('#dynamic_field').append('<div id="row' i '"><div class="form-group"><select name="country[]" id="country" class="form-control input-lg"><option value="">Select Country</option><?php foreach($country as $row) { echo '<option value="'.$row->id.'">'.$row->name.'</option>'; } ?></select></div><div class="form-group"><select name="championship[]" id="championship" class="form-control input-lg"><option value="">Select Championship</option></select></div><div class="form-group"><select name="home_team[]" id="home_team" class="form-control input-lg"><option value="">Select Home Team</option></select></div><div class="form-group"><select name="away_team[]" id="away_team" class="form-control input-lg"><option value="">Select Away Team</option></select></div><div class="form-group"><input type="text" name="prediction[]" id="prediction"></div><button type="button" name="remove" id="' i '" class="btn btn-danger btn_remove">X</button></div></div></div>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
var res = confirm('Are You Sure You Want To Delete This?');
if(res==true){
$('#row' button_id '').remove();
$('#' button_id '').remove();
}
});
});
$('#country').change(function(){
var country_id = $('#country').val();
if(country_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/dynamic_dependent/fetch_state",
method:"POST",
data:{country_id:country_id},
success:function(data)
{
$('#championship').html(data);
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
}
else
{
$('#championship').html('<option value="">Select Championship</option>');
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
$('#championship').change(function(){
var championship_id = $('#championship').val();
if(championship_id != '')
{
$.ajax({
url:"<?php echo base_url(); ?>index.php/dynamic_dependent/fetch_city",
method:"POST",
data:{championship_id:championship_id},
success:function(data)
{
$('#home_team').html(data);
$('#away_team').html(data);
}
});
}
else
{
$('#home_team').html('<option value="">Select Home Team</option>');
$('#away_team').html('<option value="">Select Away Team</option>');
}
});
</script> Комментарии:
1. Какой-нибудь совет, пожалуйста? Я полностью застрял и не могу двигаться дальше без этого…
2. Вы хотите создать новую форму при нажатии кнопки, например, так? sanwebcorner.com/2017/02 /…
3. Спасибо @heathscliff за ваш комментарий, касающийся формы, она работает, мне удалось повторно заполнить ее вышеупомянутым кодом, но после нажатия кнопки «Добавить еще» проблема в том, что для следующих повторно заполненных форм вызовы функций / контроллеров не работают. Работает только первое поле выбора, в котором есть запрос непосредственно внутри него. Другие не работают..
4. Ладно, никаких проблем. Теперь дело не в том, что вся форма вставлена в базу данных, верно? Можете ли вы показать код функции / контроллера?
5. Уважаемый @heathscliff, проблема не связана с контроллером, поскольку он никогда не доходит до контроллера …., это то, что в новой сгенерированной форме после выбора кнопки добавления новые выпадающие меню никогда не вызывают (через ajax) контроллер при выборе чего-либо (при изменении). Я добавил несколько консольных журналов в код и вижу, что он никогда не попадает внутрь функции JavaScript ($(‘#country’).change(function(){) и я не могу понять почему…