Как передать значение 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".

Спасибо.

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

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 строках кода проще, чем в тысяче.

Никто не мешает хеш сделать составным и с явным признаком - окончания служебной части - вызова модального Окна и части передачи переменных параметров

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>

самый простой это зафигачить значение в глобальную переменую

function f(el) {
    window.popupID = el.id; 
}

чтобы прочитать просто

var a = window.popupID

где угодно

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

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".

Почему?!

Deff, Пробовал писать "href="#editOff?=ship"" - ошибка синтаксиса. Пробовал "href="#editOff?title_old=ship"",- да, так в скрипте можно получить значение "ship", а как его корректно передать в edit.php?

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