Почему элемент выпадает из DOM

[imedia]

Посмотрите пожалуйста почему селект class="country_select" выпадает если нет алерта в функции add_resort_form()
есть селект со странами

<select class="country_select" name="select_country">
<option disabled selected >Выберите страну</option>
<?foreach($countries as $key=>$value){
?>
<option value="<?=$value['id']?>"><?=$value['name']?></option>
<?
}
?>
</select>

вот инициализация формы в которую я хочу передать значение выбранной страны в <input type="hidden" name="id_country">

function append_resorts(){

$.ajax({
				  type: 'POST',
				  dataType:'json',
				  url: '/functions_ajax/get_resorts_types/',
				  success: function(resort_types) {
				  $('.place_window').append('<h3>Добавьте курорт в страну</h3><form action="javascript:void(0)" method="post" id="resort-info" enctype="multipart/form-data" ><div class="frame frame_place"><input type="hidden" name="id_country"><label>Введите название курорта</label><input style="width:400px" type="text" name="resort_name"><label>Напишите краткое описание курорта</label><textarea style="width:400px" name="resort_desript" cols="60" rows="3" ></textarea><label>Добавьте герб курорта</label><input type="file" name="gerb_path"><label>Выберите тип курорта</label><select class="resorts_types" name="resort_type"></select><input type="submit" class="button_adm add_resort_btn" value="Добавить"></div></form>');
$.each(resort_types, function(key, val) { 
$('.resorts_types').append('<option value="'+val.id+'">'+val.type+'</option>');
});
add_resort_btn_click()
},
error:  function(xhr, str){
alert('Возникла ошибка при подключении курортов: ' + xhr.responseCode);
}
});

}

Если вот так то страна не передается

function add_resort_form(){
$(".resort_btn").click(function(){
var wrap_height=$('#wrapper').height();
$('#preloader_back').height(wrap_height);
$('#preloader_back').css('display','block');
append_resorts();
$('.place_window').css('display','block');
$('.add_photos_window').css('display','none');
var val_country= $('.country_select').val();
$('.place_window').find('h3').append(' '+$('.country_select option:selected').text())
$('input[name=id_country]').val(val_country);
});
}

А если вот так то передается, в чем фокус при чем здесь алерт

function add_resort_form(){
$(".resort_btn").click(function(){
var wrap_height=$('#wrapper').height();
$('#preloader_back').height(wrap_height);
$('#preloader_back').css('display','block');
append_resorts();
$('.place_window').css('display','block');
$('.add_photos_window').css('display','none');
var val_country= $('.country_select').val();
alert(val_country);
$('.place_window').find('h3').append(' '+$('.country_select option:selected').text())
$('input[name=id_country]').val(val_country);
});
}

Причем значения появляются даже если вывести алерт пустой, без алерта же значений нет

[skrudjmakdak]

потому что вы делайте аякс запрос, видимо когда есть алерт (а это задержка во времени) данные успевают подтянуться, а когда нет алерта, то соответственно данные приходят после того как отработает ваша функция. вам надо делать через callback функцию

[imedia]

а если очередь поставить только я не знаю как правильно
делаю так не правильно

append_resorts().queue(function() {
$('.place_window').css('display','block');
$('.add_photos_window').css('display','none');
$('.place_window').find('h3').append(' '+$('.country_select option:selected').text())
$('input[name=id_country]').val($('.country_select option:selected').val());
});

TypeError: append_resorts(...) is undefined
append_resorts().queue(function() {

[imedia]

чтобы только после инициализации формы происходило заполнение полей значениями

Просто с callback никогда не сталкивался если можете приведите пример буду очень благодарен

[skrudjmakdak]

нет, вам надо функцию передать как аргумент
вот самый простой пример функции:

function myfunc(param)
	{
	console.log(param);
	}
myfunc(34);

здесь вы передаете число, т.е. paramу вас равняется 34. а вы можете передать функцию в функцию. это называется callback - функция обратного вызова. т.е. это когда вы в функцию передаете функцию и внутри ее вызывайте:

function myfunc(param)
	{
	console.log(param); // - функция
	param();
	}
myfunc(function ()
	{
	console.log('меня вызвали..');
	});

вам примерно также нужно:

append_resorts(function ()
{
$('.place_window').css('display','block');
$('.add_photos_window').css('display','none');
...
});