Меню
Что нового?

jQuery Ajax select без перезагрузки

JqNoob

Новичок
Всем привет!
Не имею привычки спрашивать что-то на форумах, но здесь не вижу другого выхода, вроде всё верно, но не хочет работать.
Подскажите, пожалуйста, что не так?
По клику на кнопку - слой отображается, а по "onchange" - ничего не происходит.
Код использую для админки, где пользователь выбирает тип страницы, и ему выпадают соответсвующие дополнительные поля для заполнения (вместо указанного слоя "jopa").
Заранее прошу к поиску не отсылать, т.к. делал это в первую очередь, на форум пишу первый раз.
Понимаю, что нужно что-то описать в success, но не знаю, что именно, ведь мне просто нужно отправить этому скрипту запрос, то есть совершить действие, аналогичное кнопке submit.
PHP: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">	
<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function typeOfPage(){
	var page = $('select[name="page"]').val();
	        $.ajax({
		             type: "POST",
		             url: "test.php",
		             data: {page: page}       
             });
};
</script>
</head>
<body>
<form method="post">
<select name="page" onchange="javascript:typeOfPage();" >
<option value="pages">Страница</option>
<option value="goods">Товар</option>
</select>
<button class="submit" name="save" value="save">Отправить</button>
</form>
<?php if (isset($_POST['page']) && $_POST['page']=='goods'){?>
<div name="jopa">срамота</div>
<?php }?>
</body>
 
archcoffe

archcoffe

Новичок
PHP: 
	  $('form select[name=page]').change(function () {
		  $('form select[name=page2]').remove();
		  var data = {};
	          data['id'] = $(this).val();
	  
	      $.ajax({
	          url: '#',
	          type:"POST",
	          data: data,
		      dataType: "json",
		      success: function(data){
		          if (data.type.error == true) return(false);
		          else {  
		              var options='';
			          $('form select[name=type]').after('<select name="page2"></select>');
			          $(data.value).each(function() {
			              options +='<option value="' + $(this).attr('id') + '">' + $(this).attr('title') + '</option>';
			          });
			          $('form select[name=page]').html(options);	        
		          }
	              },
	      	  error: function(data){
	      	      return(false);
			  }
	    	  
	      });
	});
 

JqNoob

Новичок
На данный момент у меня получилось так:
PHP: 
<html>
<head>
<meta charset="utf-8"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function typeOfPage(){
        var page = $('select[name="page"]').val();
                $.ajax({
                             type: "POST",
                             url: "test.php?ajax",
                             data: {page: page},
                             success: function(data) {
                                   $('#ajax_reciever').html(data);
                             }
            });
};
</script>
</head>
<body  onload="typeOfPage();">
<?php
if (!isset($_GET['ajax'])){
?> 
<form method="post" >
<select name="page" onchange="typeOfPage();">
<option value="pages">Страница</option>
<option value="goods">Товар</option>
</select>
</form>
<div id="ajax_reciever"></div>
<?php }
else {
	if (isset($_POST['page'])){
		if($_POST['page']=='goods')echo "парапабабам";
		if($_POST['page']=='pages')echo "татарамдарамдам";
	}
}
?>
</body>
</html>
Но вот проблема:
Первым в списке стоит value="pages", но аякс подставляет "татарамдарамдам" по onchange, и эта надпись появляется только если сначала выбрать "товары", а потом обратно "страница".
Чтобы сразу при загрузке страницы обрабатывался select и запускалась функция typeOfPage(); добавил в <body onload="typeOfPage();">
Какие могут быть подводные камни?
 
HEm

HEm

Сетевой бобер
Для админки проще распихать поля по div-ам , которые показываются в зависимости от выбранного флага

самое простое -
PHP: 
<script>
$('#typeselect').change(function(){
  $('div.for').hide();
  $('div.for-'+$(this).val()).show();
});
</script>
Выберите тип вставляемого объекта: <select id="typeselect"><option value="categories">Категория</option><option value="items">Товар</option></select>
<div class="for-categories for"><form ...>...</div>
<div class="for-items for" style="display: none"><form ...>...</div>
ну грубо говоря, вот тебе направление
 
Войдите или зарегистрируйтесь для ответа.
Сверху