Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.06.2012, 02:47
Интересующийся
Отправить личное сообщение для TrogWar Посмотреть профиль Найти все сообщения от TrogWar
 
Регистрация: 15.04.2012
Сообщений: 12

Как передать значение id в переменную внутри bootstrap modal?
Доброго времени суток!

Признаться сразу - я понимаю, что вопрос глупый и простой, но голова либо уже настолько не варит, либо я не понимаю чего-то важного.

bootstrap.js, jquery.js и bootstrap.css подключены.
Есть страница, в которой генерятся (через пхп) ссылки вида:
<?php require('edit.php') ?>
...
<a data-toggle="modal" href="#editOff" id="taxi" class="editOff">car</a>
<a data-toggle="modal" href="#editOff" id="ship" class="editOff">ship</a>
...

Внутри edit.php валяется код модального окна bootstrap, где есть такие строки:
$title = 'supa pupa title';
echo '<input name="edit_title" type="text" placeholder="Title text" value="'.$title.'" autofocus/><br/>';

При клике на ссылку открывается окно редактирования со вставленным очевидным значением "supa pupa title".

Вопрос: Каким образом передать в модальное окно редактирования id ссылки? Чтобы при клике на ссылки с разными id передавались соответствующие разные $title?
Т.е., чтобы при клике по первой ссылке в модальное окно вставился текст "taxi", а при клике на вторую - "ship".

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 04.06.2012, 02:50
Профессор
Отправить личное сообщение для beard Посмотреть профиль Найти все сообщения от beard
 
Регистрация: 08.05.2012
Сообщений: 264

window-location

смотрите на
window.location.hash


хотя нет, в этом случае должна быть уникальность хеша
<a data-toggle="modal" href="#editOff" id="taxi" class="editOff">car</a>
<a data-toggle="modal" href="#editOff" id="ship" class="editOff">ship</a>

Последний раз редактировалось beard, 04.06.2012 в 02:54.
Ответить с цитированием
  #3 (permalink)  
Старый 04.06.2012, 03:03
Интересующийся
Отправить личное сообщение для TrogWar Посмотреть профиль Найти все сообщения от TrogWar
 
Регистрация: 15.04.2012
Сообщений: 12

beard,
Да, window.location.hash не подойдёт, т.к. хэш занят вызовом модального окна.
Я попробовал передавать id вот так:
...
<i class="icon-retweet" id="car" onclick="f(this)"></i>
<i class="icon-retweet" id="ship" onclick="f(this)"></i>
...

function f(el) {
    alert(el.id);
}

Алерт с правильным айдишником он мне показывает.
А вот каким образом дальше передать это в edit.php без перезагрузки всей страницы (т.к. модальное окно "выползает" поверх таблицы и она должна обновляться только после внесения изменений - нажатия сабмитки в окне редактирования) я разобраться не могу =/

Представляю, что нужно передавать XHR'ом. А как точнее? Например, можно написать вот так:
...
req = new XMLHttpRequest();
req.open('POST','edit.php',true);
req.onreadystatechange = processRequestChange;
req.send(null);
...

Но не понимаю - как составить этот send()? Что передавать этой функции? Если пишу send(el.id), то как его получить на стороне php?

Последний раз редактировалось TrogWar, 04.06.2012 в 03:11. Причина: грамматика
Ответить с цитированием
  #4 (permalink)  
Старый 04.06.2012, 03:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

TrogWar,
Вотните значение ID в одно из полей формы, - ответ сервера на отправку формы перенаправляйте во фрейм => http://htmlbook.ru/html/form/target
(*атрибут <form target="имя Iframe">...</form>

Последний раз редактировалось Deff, 04.06.2012 в 03:25.
Ответить с цитированием
  #5 (permalink)  
Старый 04.06.2012, 03:30
Интересующийся
Отправить личное сообщение для TrogWar Посмотреть профиль Найти все сообщения от TrogWar
 
Регистрация: 15.04.2012
Сообщений: 12

Deff, это хорошо, только скажите, пожалуйста, что писать вместо iframe (у меня их нет) в моём случае?
[html]<form method="POST" action="" target="edit.php">
<i class="icon-retweet" id="car" onclick="f(this)"></i>
</form>[html]
Как тогда эту форму сабмитить, если эта иконка внутри большой таблицы и громоздкие кнопки там не нужны абсолютно?

Этот edit.php - не iframe, он тупо вставляет в index.php html-код с модальным окном bootstrap'a. Сделал я это только чтобы разбить объём index.php ибо разных фич нужно довольно много и ориентироваться в 300 строках кода проще, чем в тысяче.
Ответить с цитированием
  #6 (permalink)  
Старый 04.06.2012, 03:35
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от TrogWar
Да, window.location.hash не подойдёт, т.к. хэш занят вызовом модального окна.
Никто не мешает хеш сделать составным и с явным признаком - окончания служебной части - вызова модального Окна и части передачи переменных параметров

http://javascript.ru/forum/library-toolkit-framework.html#modal-out?param=id%23=id%15=%%

<a data-toggle="modal" href="#editOff?=taxi" id="taxi" class="editOff">car</a>
<a data-toggle="modal" href="#editOff?=ship" id="ship" class="editOff">ship</a>

Последний раз редактировалось Deff, 04.06.2012 в 03:44.
Ответить с цитированием
  #7 (permalink)  
Старый 04.06.2012, 04:10
Профессор
Отправить личное сообщение для beard Посмотреть профиль Найти все сообщения от beard
 
Регистрация: 08.05.2012
Сообщений: 264

Сообщение от TrogWar
function f(el) {
    alert(el.id);
}
самый простой это зафигачить значение в глобальную переменую
function f(el) {
    window.popupID = el.id; 
}

чтобы прочитать просто
var a = window.popupID
где угодно
Ответить с цитированием
  #8 (permalink)  
Старый 04.06.2012, 04:39
Интересующийся
Отправить личное сообщение для TrogWar Посмотреть профиль Найти все сообщения от TrogWar
 
Регистрация: 15.04.2012
Сообщений: 12

Чуть помучался. Результат меня совсем сбивает с толку.

index.php:
echo '<div id="vardump"></div>';
require('edit.php');
...
<a data-toggle="modal" href="#editOff" id="'.$off.'" onclick="edit(this)"><i class="icon-retweet"></i></a>

Где $off - это список типа ["car", "ship", ...].

script.js:
function edit(title) {
	vardump = document.getElementById('vardump');
	var url = 'edit.php'+'?title_old='+title.id;
	req = new XMLHttpRequest();
	req.open('POST',url,true);
	req.onreadystatechange = processRequestChange;
	req.send(null);
	function processRequestChange() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				vardump.innerHTML = req.responseText;
			}
		}
	}
}


edit.php:
$title_old = (isset($_REQUEST['title_old'])) ? $_REQUEST['title_old'] : null;
var_dump($title_old);
echo ('
    <div id="editOffer" class="modal hide fade">
        <form action="" method="POST">
..... рисуем окошко формы .....
            <input name="edit_title_new" type="text" placeholder="Button text" value="'.$title_old.'" autofocus/><br/>
..... рисуем остальную часть окошка формы .....
..... делаем запросы к mysql (в том числе с использованием значения $title_old) .....
..... рисуем окошко дальше на основе полученных данных .....
            <input type="submit" class="btn btn-primary" value="Save changes"/>
        </form>
    </div>
');


Что находится в id="vardump":
1. Сначала он показывает очевидное "null".
2. После тычка по <a ... id="ship" ...></a> выдаёт сразу две строки:"string(4) "ship" null".

Почему?!

Последний раз редактировалось TrogWar, 04.06.2012 в 04:53. Причина: очепятки
Ответить с цитированием
  #9 (permalink)  
Старый 04.06.2012, 04:42
Интересующийся
Отправить личное сообщение для TrogWar Посмотреть профиль Найти все сообщения от TrogWar
 
Регистрация: 15.04.2012
Сообщений: 12

Deff, Пробовал писать "href="#editOff?=ship"" - ошибка синтаксиса. Пробовал "href="#editOff?title_old=ship"",- да, так в скрипте можно получить значение "ship", а как его корректно передать в edit.php?
Ответить с цитированием
  #10 (permalink)  
Старый 04.06.2012, 04:45
Интересующийся
Отправить личное сообщение для TrogWar Посмотреть профиль Найти все сообщения от TrogWar
 
Регистрация: 15.04.2012
Сообщений: 12

beard, зафигачить в глобальную - это понимаю. А потом как к нему обращаться в edit.php? Подключив другой скрипт?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать переменную с jquery в php Максим2 jQuery 14 28.07.2013 11:38
Не могу передать переменную frundik Общие вопросы Javascript 1 23.05.2012 12:38
Как передать переменную php в javascript Amateur Javascript под браузер 4 13.07.2011 16:57
Как сделать локальную переменную глобальной?? Дмитрий Общие вопросы Javascript 8 02.11.2010 03:33
Как обозначить переменную выбранную в FileChooser? woo_hoo Общие вопросы Javascript 4 03.07.2008 12:58