Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
6 / 2 / 0
Регистрация: 17.03.2013
Сообщений: 90
1

Изменения цвета div после после удачного завершения запроса Ajax

04.05.2013, 21:28. Просмотров 1168. Ответов 4
Метки нет (Все метки)

Добрые сутки! Помогите решить следующую проблему.

Есть 10-ть Div внутри каждой написано три слова: (красный, синий, зеленый). Когда пользователь нажимает например на зеленый, одного из Div, запускается функция которая через аякс посылает серверу например green=1; после обработки в функции success должен быть скрипт который менял цвет на зеленый именно того div который мы выбрали, ну а если бы пользователь выбрал синий, то div поменялся соответственно на синий. Помогите написать этот скрипт. Или хотя бы алгоритм.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.05.2013, 21:28
Ответы с готовыми решениями:

Открытие второго контроллера после удачного POST запроса
При старте программы у меня открывается loginWindowController, там я ввожу логин и пароль. После...

Вызов ajax запроса после обработки другого ajax запроса
Добрый день. По нажатию на кнопку происходит ajax запрос. Сервер возвращает true или false. Если...

После вставки ответа ajax в input запроса, ответ ajax не изменяется
Здравствуйте! В общем так, есть поле input, есть таблица с полем count. Задача: изменить...

Не работает JS после ajax запроса
Всем доброго времени суток! Уважаемые знатоки, нужна ваша помощь в решении моей проблемы, а суть...

4
804 / 766 / 165
Регистрация: 28.06.2012
Сообщений: 1,448
Записей в блоге: 4
05.05.2013, 11:05 2
Вначале по php : подойдёт такой вариант, что при клике будeт передаваться в php - обработчик цифры или 1, или 2, или 3. А обработчик будет возвращать назад соответственно или red, или blue, или green?
0
6 / 2 / 0
Регистрация: 17.03.2013
Сообщений: 90
05.05.2013, 11:10  [ТС] 3
да, вполне
0
804 / 766 / 165
Регистрация: 28.06.2012
Сообщений: 1,448
Записей в блоге: 4
05.05.2013, 11:36 4
index.php Использовал краткий $.get запрос
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
<html>
  <head>
    <title>Смена цвета 10 блоков</title>
    
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />    
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.colorBlock span').click(function(){
    var attrData=$(this).attr('data-title');
    $(this).parent('.colorBlock').addClass('activeBlock');
    $.get(
       'color.php',
        {numberColor:attrData},
        function (data){
            $('.activeBlock').css('background-color',data);
            $('.activeBlock').removeClass('activeBlock');
        }
       );
    
}); 
 
});/*end  ready*/
</script>
<style>
.colorBlock {
    width: 400px;
    border: 2px solid #ecec13;
    height: 60px;
    text-align: center;
    margin: 4px 40px;
}   
.colorBlock span{
    font-weight: bold;
    margin:  4px;
    cursor: pointer;
    
}   
.colorBlock span:hover{
    color:#c9853a;
}   
</style>    
  </head>
  <body >
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div> 
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div>
<div class="colorBlock"><br/>
    <span data-title="1">Красный</span><span data-title="2">Синий</span><span data-title="3">Зелёный</span>
</div> 
  </body>
</html>
Обработчик color.php
PHP
1
2
3
4
5
6
<?php
$n=$_GET["numberColor"];
    if($n=="1"){ echo "red";}
    if($n=="2"){ echo "blue";}
    if($n=="3"){ echo "green";}
?>
1
6 / 2 / 0
Регистрация: 17.03.2013
Сообщений: 90
05.05.2013, 11:49  [ТС] 5
Спасибо Огромное
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.05.2013, 11:49

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Перезагрузка страницы после ajax запроса
Вообщем ситуация такая. Есть форма данные из которой php сценарию по клику на копку посредством...

Не срабатывает click(), после ajax запроса
есть такой код : $(&quot;div#timezone&quot;).on(&quot;click&quot;, function(e){ ...

Отправка ajax запроса после .submit
Задача такая. Есть пост запрос который необходимо осуществить ПОСЛЕ отправки данных из формы. Вот...

После выполнения ajax-запроса переменная теряется
Возможно я чего-либо не смыслю в тонкостях работы JS. У меня есть такая функция: const...

Сброс параметров сортировки после ajax запроса
Добрый день Уважаемые программисты! Прибегаю к вашей помощи т.к. в google найти решения не...

Обработка ответа после пост-запроса (Ajax)
Разбираюсь с ajax-функциями jQuery и возник вот такой вопрос, ответ на который никак найти не могу:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.