Форум

sameness · #1 (**permalink**) 18.02.2015, 08:35

Здравствуйте! В layout подготовил область, для подгрузки попапов, сами попапы выполнены отдельными PartialView (речь идет об ASP.NET MVC). Почему то при подгрузке содержимого с помощью JQ функции .load, <input type="file" /> не работает - не появляется диалог выбора файла, если выношу кнопку за границы попапа - в основное окно, то кнопка работает прекрасно, не в курсе в чем может быть дело?

ksa · #2 (**permalink**) 18.02.2015, 08:53

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

Почему то при подгрузке содержимого с помощью JQ функции .load, <input type="file" /> не работает - не появляется диалог выбора файла

Бивас, тест!

tmp.csp

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#test').load('tmp1.csp');
});
</script>
</head>
<body> 
<div id='test'></div>
</body>
</html>

tmp1.csp

<input type='file' />

Таки работает!

sameness · #3 (**permalink**) 18.02.2015, 09:06

Кнопка с которой открывается popup

<input type="button" onclick="$('.popup-container').load('@Url.Action("Index", "Popup")'); document.getElementById('popup').style.visibility = 'visible';" value="@GlobalRes.SelectFile" />

Область куда вставляется попап:

<div id="popup" style="visibility:hidden">
	<div class="popup-cell">
		<input type="file" />
		<div class="popup-container">
		</div>
	</div>
</div>

html в PartialView:

<div class="popup-root">
	<input type="file" />
</div>

не работает

ksa · #4 (**permalink**) 18.02.2015, 10:05

sameness, может осилишь смастерить нормальный тестовый пример?

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

<input type="button" onclick="$('.popup-container').load('@Url.Action("Index", "Popup")'); document.getElementById('popup').style.visibility = 'visible';" value="@GlobalRes.SelectFile" />

Вот это вообще сантаксическая каша...

sameness · #5 (**permalink**) 18.02.2015, 10:33

Все, спасибо! Меня осенило

все дело в когда то добавленном коде исключающем бабблинг:

$(".popup-root").click(function (e) {
        return false;
    });

ksa · #6 (**permalink**) 18.02.2015, 10:38

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

Все, спасибо

Потому как у меня и это работает...

tmp.csp

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<input 
	type="button" 
	onclick="$('.popup-container').load('tmp1.csp'); document.getElementById('popup').style.visibility = 'visible';" 
	value="Test" 
/>
<div id="popup" style="visibility:hidden">
	<div class="popup-cell">
		<input type="file" />
		<div class="popup-container">
		</div>
	</div>
</div>
</body>
</html>

tmp1.csp

<div class="popup-root">
    <input type="file" />
</div>

sameness · #7 (**permalink**) 18.02.2015, 10:47

А как тогда бабблинг исключить правильно? Только вверх, что бы вниз по модели DOM он распространялся все таки

ksa · #8 (**permalink**) 18.02.2015, 11:18

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

А как тогда бабблинг исключить правильно?

Ээээ, я тут погуглил...

Цитата:

Бабблинг — это наложение пузырей на фотографию, создается эффект голого человека.

Как это может повлиять на

<input type="file" />

?

sameness · #9 (**permalink**) 18.02.2015, 11:49

Есть такое

http://learn.javascript.ru/bubbling-and-capturing
http://habrahabr.ru/post/126471/

laimas · #10 (**permalink**) 18.02.2015, 12:13

>А как тогда бабблинг исключить правильно? Только вверх, что бы вниз по модели DOM он распространялся

События всплывают (вверх), но чтобы они еще и тонули (вниз), это уже не иначе как эксклюзив.

Форум

Справочник

Discord чат

Курсы javascript