Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Передача параметра в модальное окно fancybox (https://javascript.ru/forum/jquery/43056-peredacha-parametra-v-modalnoe-okno-fancybox.html)

GTAlex 20.11.2013 11:20
Передача параметра в модальное окно fancybox
 
Есть 2 кнопки "купить" по которым появляется модальное окно fancybox в которое нужно передать ID покупаемого товара

<a class="modal" href="#inline" rel="1111">Buy 1111</a>
<a class="modal" href="#inline" rel="2222">Buy 2222</a>



$(".modal").fancybox({
	'onStart': function() { 
    	      var id = $(this).attr('rel');
              alert(id);     
           }
});


Так не пашет! - даёт "undefined"

рони 20.11.2013 12:10
GTAlex, Meditate on documentation
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
  <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
  <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script type='text/javascript'>
 $(function()
 		{
 			 $(".modal").fancybox({
             'afterLoad': function() {
    	      var id = $(this.element).attr('rel');
              this.content =  this.content.html()+'<h1>'+id+'</h1>';
             }
          });
 		});
</script>
</head>
<body>
<a class="modal" href="#inline" rel="1111">Buy 1111</a>
<a class="modal" href="#inline" rel="2222">Buy 2222</a>
<div id="inline" style="display: none">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif"  >
</div>
</body>
</html>

GTAlex 20.11.2013 13:43
onStart меняем на afterLoad и всё пашет!
ммда уж ...

"Meditate on documentation"
и где это написано ?

рони 20.11.2013 13:59
GTAlex,
перейдите на страницу http://fancyapps.com/fancybox/

тут пример нахождения атрибута id
◦Based on element ID


тут пример добавления своего контента
◦Append custom content

GTAlex 21.11.2013 07:08
Рони ответил в ПМ - за что ему ещё раз огромное спасибо!

Для всех - дока тут http://fancyapps.com/fancybox/
Пример с передачей ID тут http://jsfiddle.net/Se8Yu/

cript 04.04.2014 16:16
Приветствую! Такой вопрос, как эту переменную поместить в инпут?

<input type="hidden" value="javascript:document.write(id);" id="abc"> // не работает
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox({
'afterLoad': function() {
var id = $(this.element).attr('rel');
this.content =  this.content.html()+id;               
}
});
});
</script>


Так же пробовал делать так
function setVal() {
document.getElementById('abc').value = id;
}

рони 04.04.2014 16:29
cript,
немогу вам помочь ибо вижу пока бред и в коде и в вопросе

cript 04.04.2014 16:35
А в чем бред?
Передаем переменную в модальное окно, хотелось бы поместить ее в value инпута, только что-то не выходит..
В документации написано делать так $("#abc").val(id); , но это не работает..

рони 04.04.2014 16:39
cript,
а где код модального окна и всё остальное

cript 04.04.2014 16:44 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<div id="inline">
<h3>Системное сообщение</h3>
<form name="delete" action="#" method="post">
<p>Текст</p>
<input type="hidden" id="abc" name="abcid">
<input type="submit" name="del" id="send" value="Да">
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox({
'afterLoad': function() {
id = $(this.element).attr('rel');     
}
}); 
});
</script>
<a class="modalbox" href="#inline" rel="9">Popup</a>

рони 04.04.2014 16:50
cript,
<!DOCTYPE HTML>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<div id="inline">
<h3>Системное сообщение</h3>
<form name="delete" action="#" method="post">
<p>Текст</p>
<input  id="abc" name="abcid">
<input type="submit" name="del" id="send" value="Да">

</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox({
'afterLoad': function() {
id = $(this.element).attr('rel');
$("#abc").val(id);
}
});
});
</script>
<a class="modalbox" href="#inline" rel="9">Popup</a>

cript 04.04.2014 17:02
рони,
Вот вы сейчас написали все заработало! )

cript 06.04.2014 15:13
Появился еще один вопрос по теме.
Нужно эту переменную записать не в инпут а сделать ее частью картинки, например:
<img src="http://.../id">

рони 06.04.2014 15:41
cript,
$('img')[0].src="http://.../"+id;

cript 06.04.2014 16:24
Цитата:
Сообщение от рони (Сообщение 306406)
cript,
$('img')[0].src="http://.../"+id;
Не совсем понимаю, вот примерная ссылка:
<a href="#dialog" rel="img.gif" onclick="javascript: popup();">Клик</a>
Code:
$(document).ready(function () {
id = $(this.element).attr('rel'); 
$('img')[0].src="http://site.net/"+id;    
});

А картинку как вставлять?
<div id="dialog">
<img src="">
</div>

рони 06.04.2014 16:41
cript,
<!DOCTYPE HTML>
<meta charset="utf-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<div id="inline" style=" display: none">
<h3>Системное сообщение</h3>
<form name="delete" action="#" method="post">
<p>Текст</p>
<input  id="abc" name="abcid">
<input type="submit" name="del" id="send" value="Да">
<img src="">
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".modalbox").fancybox({
'afterLoad': function() {
id = $(this.element).attr('rel');
$('img')[0].src="http://javascript.ru/forum/images/ca_serenity/misc/"+id;
}
});
});
</script>
<a class="modalbox" href="#inline" rel="logo.gif">Popup</a>

cript 06.04.2014 17:37
Может не совсем в тему, но 
id = $(this.element).attr('rel');
$('img')[0].src="http://site.net/"+id;

сработает без fancybox?

рони 06.04.2014 17:58
cript,
сработает если $(this.element) это указать правильно
$('.modalbox') например

cript 06.04.2014 18:15
рони,
Цитата:
Сообщение от рони
$(this.element) это указать правильно
Ну вот например у меня такой код 
$(document).ready(function () {
id = $('#dialog-box').attr('rel');
$('img')[0].src="http://site.net/"+id;
});


<div id="dialog-box2">
<div class="dialog-content">
<div id="dialog-message" align="center">
<img src="">
</div>
</div>
</div>
<a href="#dialog-box2" rel="img.gif" onclick="javascript:popup2();">Link</a>

Но не получается..

maksbazhin 22.07.2014 23:54
Вопрос: как id передать в div в виде переменной PHP, которую можно использовать в запросе к базе и частичному заполнению окна. Пробовал методом GET, но модальное окно сразу закрывается, в POST пустота.
Заранее спасибо.


Часовой пояс GMT +3, время: 07:25.