parser
НовостиFAQАвторыДокументацияВ действииБиблиотека
ИнструментыПолезные ссылкиХостингиСкачатьПримерыФорум

Написать ответ на текущее сообщение

 

 
   команды управления поиском

Ответ

G_Z 05.05.2017 23:22 / 05.05.2017 23:23

как правильно подключать JS-файлы
Когда страница работает, так сказать, в AJAX-режиме (то есть совершает некие действия и будет возвращать только данные, а не полный HTML страницы) на ней не нужно включать никакие скрипты и формировать прочую HTML-обвязку.

Очень условный пример:
page.html: 
@auto[]
$basket[^load_basket[]]
$items[
	$.1[Item 1]
	$.2[Item 2]
	$.3[Item 3]
	$.4[Item 4]
]


@main[]
^response[]


@response[]
<!DOCTYPE html>
<html lang="ru">
	<head>
		^head[]
	</head>
	<body>
		^body[]
		^scripts[]
	</body>
</html>


@head[]
^title[]
^styles[]


@title[]
<title>Page</title>


@styles[]
<style>
	#items li, #full-basket td { cursor: pointer^; }
	.in-basket { font-weight: bolder^; }
</style>


@body[]
^basket[]
^items[]


@scripts[]
<script src="//yastatic.net/jquery/3.1.1/jquery.min.js"></script>
<script src="/basket.js"></script>


@load_basket[]
$result[^table::load[/basket.txt]]
$result[^result.hash[id]]


@save_basket[]
$new_basket[^table::create{id	title}]

^basket.foreach[;item]{
	^new_basket.append[$item]
}

^new_basket.save[/basket.txt]


@basket[]
<div id="basket">
	<h2><a href="/basket.html">Basket</a></h2>
	^if($basket){
		<ol>
			^basket.foreach[;item]{
				<li>$item.title</li>
			}
		</ol>
	}{
		<p>В корзине пусто.</p>
	}
</div>


@items[]
<div id="items">
	<h2>Items</h2>
	<ol>
		^items.foreach[id;item]{
			$in_basket(^basket.contains[$id])

			<li id="$id"^if($in_basket)[ class="in-basket"] title="^if($in_basket)[Remove from basket;Add to basket]">$item</li>
		}
	</ol>
</div>
basket.html: 
@USE
/page.html


@main[]
^if(^request:headers.X_REQUESTED_WITH.pos[XMLHttpRequest] > -1){
	^action[]
}{
	^response[]
}


@title[]
<title>Basket</title>


@body[]
^full_basket[]


@full_basket[]
<div id="full-basket">
	<a href="/page.html">&larr^;</a>
	<h1>Basket</h1>

	^if($basket){
		<table>
			<tr>
				<td>title</td>
				<td>quantity</td>
			</tr>
			^basket.foreach[id;item]{
				<tr id="$id">
					<td title="Remove from basket">$item.title</td>
				</tr>
			}
		</table>
	}{
		<p>Basket is empty.</p>
	}
</div>


@action[]
$id[$form:id]

^switch[$form:action]{
	^case[add;DEFAULT]{
		$basket.$id[
			$.id[$id]
			$.title[$items.$id]
		]
	}
	^case[remove]{
		^basket.delete[$id]
	}
}

^save_basket[]

^if($form:view eq 'full'){
	$result[^full_basket[]]
}{
	$result[
		<div id="items">^items[]</div>
		<div id="basket">^basket[]</div>
	]
}
basket.js: 
$(function(){
	var backend = '/basket.html';

	$('body').on('click', '#items ol li', function(){
		var $this = $(this);

		var data = {
			id: $this.attr('id'),
			action: $this.hasClass('in-basket') ? 'remove': 'add'
		}

		$.post(backend, data, function(response){
			var $response = $(response);

			$('#basket').replaceWith($response.find('#basket'));
			$('#items').replaceWith($response.find('#items'));
		});
	});

	$('body').on('click', '#full-basket td', function(){
		var $this = $(this);

		var data = {
			id: $this.parent().attr('id'),
			action: 'remove',
			view: 'full'
		}

		$.post(backend, data, function(response){
			$('#full-basket').replaceWith(response);
		});
	});
});
basket.txt: 
id	title


Электропочта:
Форма обратной связи