Уведомления

Группа в Telegram: @pythonsu

#1 Янв. 26, 2016 16:23:02

sht
От:
Зарегистрирован: 2010-03-02
Сообщения: 27
Репутация: +  0  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Здравствуйте.
Есть код в шаблоне. Это AJAX запрос. Из шаблона посылается запрос на коллекцию картинок и сервер их отдает. Не могу додумать как результат ответа сервера подставить в jinja {% for in result %} result - принятый json.

<script type="text/javascript">
  function setFilter(){
   $.ajax({
  type:"POST",
  url:"{{ url_for('gallery.load_image') }}",
  data:JSON.stringify({"id":id}),
  contentType:'application/json;charset=UTF-8',
  success:function(result){
  console.log(result);
    $("#gallery").html( {% for  i in result %} <img src=i.filename>{% endfor %} );  !!! тут чтото сделать надо.
    });
  );
  };
  $(".filter").click(setFilter);
  setFilter();
</script>



Офлайн

#2 Янв. 26, 2016 16:41:25

ayb
Зарегистрирован: 2014-04-01
Сообщения: 297
Репутация: +  24  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Зачем post запрос, да еще и json ?

А если по делу то :

for(var i=0; i<data.length; i++){
    $('#gallery').append('<img src="'+i.filename+'" />')
}

Офлайн

#3 Янв. 26, 2016 16:45:54

4kpt_IV
Зарегистрирован: 2016-01-08
Сообщения: 999
Репутация: +  49  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Шаблон - это то, что создает html документ на сервере. Он никак не связан с ajax запросом. Просто никак и все. После ajax Вы можете изменить существующий html документ (уже отрендеренный jinja) не перезагружая его полностью, а всего лишь выполняя операции с его DOM (Jquery) или явно (react.js или angular.js)…

P.S. jinja != jquery

Отредактировано 4kpt_IV (Янв. 26, 2016 16:46:53)

Офлайн

#4 Янв. 27, 2016 10:26:01

sht
От:
Зарегистрирован: 2010-03-02
Сообщения: 27
Репутация: +  0  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Спасибо, помогло!
Еще вопрос.
После ajax запроса, вставил кусочек кода html. Стили, они применяются автоматически или нужно както перегружать,чтобы применилось для новых добавленных элементов?
4kpt_IV
я то понимаю. вот с реализацией пока еще сложности)



Отредактировано sht (Янв. 27, 2016 10:33:10)

Офлайн

#5 Янв. 27, 2016 11:12:04

4kpt_IV
Зарегистрирован: 2016-01-08
Сообщения: 999
Репутация: +  49  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Нет. Если стили уже есть на странице, то перезагружать не надо. Для элементов, которые есть в стилях CSS правила применяются автоматически.

Офлайн

#6 Янв. 27, 2016 18:51:37

sht
От:
Зарегистрирован: 2010-03-02
Сообщения: 27
Репутация: +  0  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Что-то не совсем удается.
Вычленил код. Файл CSS - там фотогаллерея простенькая.Один файл для обоих примеров.
Неправильно делаю append для div?

Первый .....
  $.ajax({
  type:"POST",
  url:"{{ url_for('gallery.load_image') }}",
  data:JSON.stringify({"id":id}),
  dataType: "json",
  contentType:'application/json;charset=UTF-8',
    success:function(result){
---- эта часть обновляется при ajax запросе, стили не срабатывают
  $('#gallery').append('<div class="item"><ul class="gal">');                           
  for(var i=0; i<result.length; i++) {
	$('#gallery').append('<li><img src="/static/gallery/'+result[i]+'" alt=""></li>');	};
$('#gallery').append("</ul></div><h2> test css</h2>"); -> <h2>- сохраняет стиль при запросах.
}});
Второй...
этот код при загрузке страницы. стили работают.
  <div id="gallery">
  </div>
<div class="item">
<ul  class="gal">
  {% for image in images  %}
  		<li><img src="/static/gallery/{{ image.filename }}" alt=""></li>
		{% endfor %}
</ul>
</div>



Офлайн

#7 Янв. 27, 2016 18:58:40

FishHook
От:
Зарегистрирован: 2011-01-08
Сообщения: 8312
Репутация: +  568  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

sht
Не надо так делать, сначала собери всю разметку, которую собираешься добавлять, как простую строку, потом добавляй.
Ты когда первый аппенд сделал, у тебя сразу же получился невалидный HTML.

Представь, что ты в питоне пытаешься сделать так

eval("print")
eval("(")
eval("x)")



Отредактировано FishHook (Янв. 27, 2016 19:03:50)

Офлайн

#8 Янв. 27, 2016 19:06:54

FishHook
От:
Зарегистрирован: 2011-01-08
Сообщения: 8312
Репутация: +  568  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Вот здесь это что такое? Почему в кавычках? Не выполнится оно в кавычках, потому что это не часть кодда ЖС, а тупо строка.

src="/static/gallery/'+result[i]+'"

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



Отредактировано FishHook (Янв. 27, 2016 19:07:41)

Офлайн

#9 Янв. 27, 2016 19:27:24

ayb
Зарегистрирован: 2014-04-01
Сообщения: 297
Репутация: +  24  -
Профиль   Отправить e-mail  

Flask. Выполнениие jinja в jquery.

Вообще проще для таких целей взять какой нибудь js шаблонизатор и не париться

Офлайн

#10 Янв. 28, 2016 11:54:18

ZZZ
От: Москва
Зарегистрирован: 2008-04-03
Сообщения: 2161
Репутация: +  26  -
Профиль   Адрес электронной почты  

Flask. Выполнениие jinja в jquery.

От себя напишу, что смешивать шаблоны сервера с шаблонами клиента, это получать кучу лишнего геморроя.



Офлайн

Board footer

Модераторировать

Powered by DjangoBB

Lo-Fi Version