описание без обновления страницы

@vex31 · Регистрация: 31.03.2011

Студворк — интернет-сервис помощи студентам

Собственно проблема в следующем: в левой части человек выбирает пункт(заголовок записи), нажимает на него, в правой подгружается его описание(тело записи), ниже рейтинг (думаю осуществить через произвольные поля). Надо чтобы происходило без перезагрузки страницы.
Подскажите, каким образом реализовать блок в теле страницы.
Вообще движок водпресс, но чувствую плагинов нет подобных, поэтому пишу сюда. Собственно с jQuery знаком очень поверхностно.

@FlyMouse86 · 27.12.2012, 00:13

обычным Ajax запросом на сервер. Формируешь список, на что кликать, настраиваешь кнопки так, чтобы выводили что надо в соседнем блоке и проблема решится. Почитай про события JQUERY (JavaScript) и Ajax-запросы

@vex31 · 27.12.2012, 09:16 **[ТС]**

Сообщение от FlyMouse86

обычным Ajax запросом на сервер. Формируешь список, на что кликать, настраиваешь кнопки так, чтобы выводили что надо в соседнем блоке и проблема решится. Почитай про события JQUERY (JavaScript) и Ajax-запросы

это конечно все хорошо, можно хоть пример какой то привести? пробовал без аякса и жКвери, никак вообще.

@Grand7 · 27.12.2012, 09:42

На официальном сайте имеется вся документация.

@vex31 · 27.12.2012, 15:52 **[ТС]**

Сообщение от Grand7

На официальном сайте имеется вся документация.

вопрос был поставлен несколько по другому. Если бы я хотел ознакомиться с jQuery, я бы это и сделал. тут же я спросил КАК это сделать, а не где прочитать, и ожидал как минимум примерный алгоритм, хотя бы предложенный выше.

@FlyMouse86 · 27.12.2012, 20:48

А КАК это сделать и написано ТАМ, где тебе указали. Темы не объемные и делается это все очень просто! По-другому - никак. Либо ищи готовые решения. Твои темы: события JQuery и функция JQuery.ajax()

@Grand7 · 27.12.2012, 22:06

Сообщение от vex31

я спросил КАК это сделать

Мне вот кажется, что Вы не хотите знать КАК это сделать, Вы хотите, чтобы Вам всё сделали.
Если у Вас имеется хоть доля логического мышления, то просмотрев примеры (на оф. сайте) не сложно догадаться, как всё это реализовать.

@Soldado · 27.12.2012, 22:37

Можно так - демонстрация. Информация через ajax выводится из БД. Второй вариант - можно всё разместить на какой-то странице и загружать с помощью load

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Ajax загрузка из БД</title>
 <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
   
   
    <script type="text/javascript">
    $(document).ready(function() {
$('.indicator:first').css('background-color','blue');   
    
     $('#link span').click(function(){
            var idSpan = $(this).attr('data-id');
                
$.ajax({
    type: "GET",
    url: "ajaxZapros.php",
    data:({idSpan:idSpan}),
        success: function(data){$('#output').html(data)}
        });
var numIndicator= idSpan-1;
$('.indicator').css('background-color','#d0d5d2');
$('.indicator').eq(numIndicator).css('background-color','blue');        
        
        
 
});   
    });/*end ready*/    
    </script>
 <style>
#container{
width:800px;
border:2px solid #a2aead;
 
padding:10px;
} 
#link{
width:300px;
float:left;
border:1px solid #fbdde8;
padding-left:10px;
}
#link span{
color:#010101;
}
 
#link span:hover{
cursor: pointer;
text-decoration: underline;
color:#525558;
 
}
 
#output{
width:440px;
height:170px;
float:right;
border:1px solid #fbdde8;
padding:10px;
}  
.indicator{
margin-left:324px;
width:4px;
height:25px;
border:1px solid #8e8d96;
background-color:#d0d5d2;
}
 
 
 </style>  
</head>
<body>
 <div id="container" type="text/css">
 <div id="link"><br/>
 <span data-id="1">СРО в строительстве</span><br/>
 <span data-id="2">СРО проектировщиков</span><br/>
 <span data-id="3">СРО изыскателей</span><br/>
 <span data-id="4">СРО энергоаудиторов</span><br/>
 <span data-id="5">Готовые фирмы с допуском в СРО</span><br/>
 <span data-id="6">СРО управляющих компаний</span><br/>
 <span data-id="7">Допуск на особо опасные, технически сложные и уникальные объекты</span><br/>
 <br/>
 </div>
<div id="output">1. СРО в строительстве<br/> СРО в строительстве<br/> СРО в строительстве<br/> СРО в строительстве<br/></div> 
    <div class="indicator"></div>
    <div class="indicator"></div>
    <div class="indicator"></div>
     <div class="indicator"></div>
     <div class="indicator"></div>
     <div class="indicator"></div>
     <div class="indicator"></div>
 
</div>   
    
    
    
</body>
</html>

Страница с php имеет имя ajaxZapros.php:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
if(isset($_GET['idSpan'])){$id= $_GET['idSpan'];}
$db=mysql_connect ("localhost","root","");
 mysql_query('set names utf8'); 
 mysql_select_db ("mysql",$db); 
 $result = mysql_query ("SELECT content FROM sro  WHERE id='$id'", $db);
 $myrow = mysql_fetch_array($result);
 if ($result)  
{ 
 echo "$myrow[content]"; 
 } 
 else 
 { 
 echo "Ошибка загрузки";
 }
?>

Подключение к базе данных - естественно Ваши данные

KOPOJI · 28.12.2012, 12:03

Не по теме:

Сообщение от Soldado

PHP
1
$id= $_GET['idSpan'];

т.е., я в консоли меняю в любом data-id в span-e цифру на к примеру '' или если просто ввожу адрес в браузер, то вижу ошибку с вашей структурой файловой системы?

@Soldado · 28.12.2012, 12:48

KOPOJI, можно подробнее. Я в ввожу в адресную строку:
http://yuaes.16mb.com/sroAjax/... hp?idSpan='
Ошибка есть, но структуры не видно

KOPOJI · 28.12.2012, 13:17

Не по теме:

ну путь то указан? :) Это самое простое, что можно сделать.. вот еще простенький пример
И это еще хорошо что используется mysql, а не PDO/mysqli без prepared statements.. mysql не поддерживает мультизапросы

Добавлено через 3 минуты
там надо заменить

Code
1
 &_#39; на  '

Добавлено через 1 минуту
без подчеркивания

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@vex31 16 / 16 / 1 Регистрация: 31.03.2011 Сообщений: 81

	описание без обновления страницы 26.12.2012, 15:36. Показов 1133. Ответов 10 Метки нет (Все метки) Собственно проблема в следующем: в левой части человек выбирает пункт(заголовок записи), нажимает на него, в правой подгружается его описание(тело записи), ниже рейтинг (думаю осуществить через произвольные поля). Надо чтобы происходило без перезагрузки страницы. Подскажите, каким образом реализовать блок в теле страницы. Вообще движок водпресс, но чувствую плагинов нет подобных, поэтому пишу сюда. Собственно с jQuery знаком очень поверхностно. Миниатюры 0

@FlyMouse86 55 / 55 / 8 Регистрация: 29.08.2012 Сообщений: 175
	27.12.2012, 00:13
	обычным Ajax запросом на сервер. Формируешь список, на что кликать, настраиваешь кнопки так, чтобы выводили что надо в соседнем блоке и проблема решится. Почитай про события JQUERY (JavaScript) и Ajax-запросы 0

@Grand7 141 / 63 / 11 Регистрация: 19.06.2012 Сообщений: 250
	27.12.2012, 09:42
	На официальном сайте имеется вся документация. 0

@FlyMouse86 55 / 55 / 8 Регистрация: 29.08.2012 Сообщений: 175
	27.12.2012, 20:48
	А КАК это сделать и написано ТАМ, где тебе указали. Темы не объемные и делается это все очень просто! По-другому - никак. Либо ищи готовые решения. Твои темы: события JQuery и функция JQuery.ajax() 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	28.12.2012, 12:48
	KOPOJI, можно подробнее. Я в ввожу в адресную строку: http://yuaes.16mb.com/sroAjax/... hp?idSpan=' Ошибка есть, но структуры не видно 0