Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2017, 11:29
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

AJAX поиск и Select из БД на одной странице
Есть одна страница и на ней находится форма поиска и выпадающие списки. Информация берётся из БД.
И поиск и селект работает отлично, но хочу чтоб они не пересекались друг с другом. Т.е. если я воспользовался поиском и получил результат, а потом пользуюсь селектом, то результат поиска должен убираться, ну и соответственно наоборот.
А так как страница не перегружается то оба результата показываются пользователю.

вот код селекта
$(document).ready(function(){
		$('#select_marka').change(function(){
			$.post(
				'php/populate_select.php',
				{ marka_id:$('#select_marka').val()},
				function(res){
					$('#modele').html(res);
					
				}
			)
		});
});

а вот поиска
/* -------------------------- */
/*   XMLHTTPRequest Enable    */
/* -------------------------- */
function createObject() {
	var request_type;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		request_type = new ActiveXObject("Microsoft.XMLHTTP");
	} else {
		request_type = new XMLHttpRequest();
	}
	return request_type;
}

var http = createObject();

/* -------------------------- */
/*        SEARCH              */
/* -------------------------- */
function searchNameq() {
	searchq = encodeURI(document.getElementById('searchq').value);
	document.getElementById('msg').style.display = "block";
	document.getElementById('msg').innerHTML = "Searching for <strong>" + searchq+"";
	// Set te random number to add to URL request
	nocache = Math.random();
	http.open('get', 'php/in-search.php?name='+searchq+'&nocache = '+nocache);
	http.onreadystatechange =  searchNameqReply;
	http.send(null);
}
function searchNameqReply() {
	if(http.readyState == 4){
	var response = http.responseText;
	document.getElementById('search-result').innerHTML = response;
	}
}


вот пхп
<!DOCTYPE html>
<html>
<head>
	<title>Выбор марки и модели автомобиля</title>
	<!-- Подключаем библиотеку jQuery -->
	<script src="//libs.raltek.ru/libs/jquery/1.8.3/js/jquery-1.8.3.js"></script>
	<!-- Подключаем таблицу стилей -->
	<link rel="stylesheet" type="text/css" href="css/style.css" /> 
	<!-- Подключаем JavaScript-файл с нашим сценарием, который и будет получать данные об автомобилях -->
	<script src="js/custom.js"></script>
    <script src="js/table.js"></script>
	<script src="js/search.js"></script>
	
</head>
<body>
<?php require_once('php/db.php'); ?>
	<h1>Подбор амортизаторов по каталогу</h1>
	
	<?php
			$marki = pobierzMarki();
	?>
	
<div id="form">	
	<form id="searchFormx">
		<div id="marki">
		<select id="select_marka">
			<option value="">Выберите марку</option>
			<?php foreach($marki as $marka): ?>
					<option value="<?php echo $marka['marka_id'];?>"><?php echo $marka['marka_name'];?></option>
			<?php endforeach; ?>
		</select>
		</div>
		<div id="modele">
		
		</div>
		
		<div id="cars">
		
		</div>

	</form>
	<form id="searchForm" name="searchForm" method="post" action="javascript:insertTask();">
		<div class="searchInput">
			<input name="searchq" placeholder="Поиск по номеру..." type="text" id="searchq" onkeyup="javascript:searchNameq()"/>
			<button type="submit" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:searchNameq()"></button>
		</div>
	</form>

	
		<div id="info">
		
		</div>
		<div style=" width:100%; height:1px; clear:both;"></div>
</div>

<h3>Результат поиска</h3>
<div id="msg"></div>
<div id="search-result"></div>
	
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2017, 11:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Очищайте значит в каждом из запросов результат другого запроса.
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2017, 12:25
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

это я понимаю, не пойму как это реализовать
Ответить с цитированием
  #4 (permalink)  
Старый 13.06.2017, 12:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

function(res){
    $('#modele').html(res);
    $('#search-result').empty();
}


document.getElementById('search-result').innerHTML = response;
document.getElementById('modele').innerHTML = '';


Ну и по большому счету результат поиска можно было выводить в одно и тоже место, если это конечно не противоречит чему либо. И даже оба запроса на поиск можно было обрабатывать одним обработчиком.

Последний раз редактировалось laimas, 13.06.2017 в 12:52.
Ответить с цитированием
  #5 (permalink)  
Старый 13.06.2017, 13:28
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

вот это работает
function(res){
					$('#modele').html(res);
					$('#search-result').empty();
				}


я даже так попробовал, до того как увидел ваш ответ
и тоже работает
$('#select_marka').change(function(){
		
			$.post(
				'php/populate_select.php',
				{ marka_id:$('#select_marka').val()},
				function(res){
					$('#modele').html(res);				
				}
			);
			document.getElementById('search-result').innerHTML = '';
		});


а второе не работает, даже переставлять пробовал сюда
function searchNameq() {
	searchq = encodeURI(document.getElementById('searchq').value);
	document.getElementById('modele').innerHTML = '';
	document.getElementById('msg').style.display = "block";

не хочет очищать результат селекта
Ответить с цитированием
  #6 (permalink)  
Старый 13.06.2017, 13:33
Интересующийся
Отправить личное сообщение для graf_vorontsov Посмотреть профиль Найти все сообщения от graf_vorontsov
 
Регистрация: 13.06.2017
Сообщений: 14

ааааа, всё, получилось!!
просто у меня ведь несколько последовательных селектов
и результат надо чистить не тут
document.getElementById('modele').innerHTML = '';

а тут
document.getElementById('info').innerHTML = '';


спасибо, получилось то что хотел!!!

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модифицировать скрипт для работы с несколькими формами на одной странице javascript_pupil Общие вопросы Javascript 8 30.01.2017 12:53
Поиск текста на странице setRange quazare Firefox/Mozilla 0 07.04.2011 22:09
Поиск на странице maza51 Общие вопросы Javascript 1 20.03.2011 12:26
jCarousel - два раза на одной странице new jQuery 0 22.04.2010 22:20
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 01:46