Как вывести определенный блок из файла при помощи ajax?

Question

[mix123123]

Всем привет!
Ребята подскажите:
1. Есть блоки в файле index.php:

<div id="myid">Картинка</div>
<div id="myid_f">Картинка</div>
<div id="myid_c">Картинка</div>
<div id="myid_k">Картинка</div>

2. Имеем также файл content.php
с полным содержанием всех блоков:

<div class="modal-wrap" id="myid">
    <p>Полное описание...</p>
</div>
<div class="modal-wrap" id="myid_f">
    <p>Полное описание...</p>
</div>
.... и так далее.

$(".block").click(function() {
		event.preventDefault();
		var myid = $(this)attr("id");
		$.ajax({
			url: "content.php",
			dataType: 'html',
			/*error: function (request, status, error){alert('request.responseText');},*/
			success: function (result)
			{
				var el = $(result.response).find('#id').html();
				if(myid == el){  //Условие*
					$(".modal").html(result);
					$(".modal-open").trigger("click");
					setTimeout(base,1000);					
				}
				else{alert('не то');}

* Вот это условие не срабатывает! подскажите как правильно сформировать условие одинаковых id

По клику на один из блоков с id "myid" или "myid_f" с помощью ajax запроса мне необходимо показать на странице index.php блок совпадающий по id из файла content.php
Подскажите пожалуйста, как правильно реализовать вывод информации через ajax запрос.

Comments

[Георгий Баручян]

А зачем ajax??
Просто всем modal-wrap сделать display: none

а при клике на элемент открывать нужный.
ЗЫ: на странице не должно быть элементов с одинаковым id

[Павел Корнилов]

Подскажите пожалуйста, как правильно реализовать вывод информации через ajax запрос.

Получить ответ сервера, распарсить его при необходимости, динамически изменить innerHTML / textContent нужных узлов.

Answer 1

[Ао]

Повесьте на дивы обработчик клика

<div id="myid" onclick="showConent("myid")">Картинка</div>
<div id="myid_f"  onclick="showConent("myid_f")">Картинка</div>
<div id="myid_c"  onclick="showConent("myid_c")">Картинка</div>
<div id="myid_k"  onclick="showConent("myid_k")">Картинка</div>
<div id="target"></div>

т.к. я хз куда вы вставить хотите то сделал на примере блока с id = target

function showConent(id){
url="index.php/?contentId="+id
fetch( url).then(function (response){
  return response.json();
}).then(function(response){
//   предположим что с сервреа вы вернули что то типа {"html":"<div class="modal-wrap" id="myid">
//     <p>Полное описание...</p>
// </div>"}
 // response = {"html":"<div class="modal-wrap" id="myid"> <p>Полное описание...</p> </div>"};
 
  document.getElementById("target").innerHTML = response.html
})}

Comments

[mix123123]

Не выходит.

[NonameMeTrue]

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

Для серверной(PHP) отдавать таким образом:

if(!empty($_POST['getDesc'])) {
	
	//Хранение в виде: id(ключ) => информация
	$descBlocks = [
		'myid' => 'some',
		'myid_f' => 'some_f'
	];
	
	//Выдача информации на POST запрос и выход.
	echo $descBlocks[$_POST['getDesc']] ? $descBlocks[$_POST['getDesc']] : '404';
	exit();
}

Ajax(jQuery):

$('.divs').click(function() {
	var id = $(this).attr('id');
	$.post('/content.php', {getDesc: id}, function(response) {
		var finalBlock = '<div class="modal-wrap" id="'+id+'"><p>'+response+'</p></div>';
		//Далее можем манипулировать информацией, к примеру: document.write(finalBlock);
	});
});

Вариант с хранением на клиенте:

var descBlocks = {
	'myid': 'some',
	'myid_f': 'some_f'
};

$('.divs').click(function() {
	var id = $(this).attr('id');
	var finalBlock = '<div class="modal-wrap" id="'+id+'"><p>'+descBlocks[id]+'</p></div>';
});

Answer 2

[mix123123]

Ребята, это всё не то, что нужно. Посмотрите пожалуйста ещё раз обновил код