Предлагаю расширить AjaxSnippet
Доброго времени суток!
Предлагаю несколько расширить функционал сниппета от Василия AjaxSnippet.
Предлагаемые изменения: Добавить возможность запуска сниппета при клике на заданный CSS селектор, а так же возможность повторного его вызова.
У себя я это реализовал следующим образом:
Отдаю на Ваш суд, если посчитаете изменения не лишними, то был бы рад обновить данный сниппет в установщике :)
Предлагаю несколько расширить функционал сниппета от Василия AjaxSnippet.
Предлагаемые изменения: Добавить возможность запуска сниппета при клике на заданный CSS селектор, а так же возможность повторного его вызова.
У себя я это реализовал следующим образом:
- Добавил 2 параметра: &as_selector — CSS селектор на onclick, &as_refresh — повторный вызов сниппета (по умолчанию false)
- Дописал сниппет
case 'onclick':
if(empty($as_selector)){
if (empty($wrapper)) {$wrapper = '<div id="[[+key]]" class="ajax-snippet">
<a href="#" class="as_trigger">[[+trigger]]</a>
<img src="'.$spinner.'" class="as_spinner" style="width:32px;margin:auto;display:none;">
</div>';}
if (empty($as_trigger)) {
$as_trigger = $modx->lexicon('as_trigger');
}
$modx->regClientScript(preg_replace('/(\t|\n)/', '','
<script type="text/javascript">
$(document).on("click", ".as_trigger", function(e) {
var spinner = $(this).parent().find(".as_spinner");
spinner.css("display","block");
$(this).remove();
'.$script.'
return false;
});
</script>'), true);
}
else{
if(empty($as_refresh)){$as_refresh = false;}
$ajax='';
if($as_refresh == false){$ajax = '$(this).attr("ajax","none");';}
if (empty($wrapper)) {$wrapper = '<div id="[[+key]]" class="ajax-snippet">
<img src="'.$spinner.'" class="as_spinner" style="width:32px;margin:auto;display:none;">
</div>';}
$modx->regClientScript(preg_replace('/(\t|\n)/', '','
<script type="text/javascript">
$(document).on("click", "'.$as_selector.'", function(e) {
if(!$(this).attr("ajax")){
var spinner = $("'.$as_target.'").find(".as_spinner");
'.$ajax.'
spinner.css("display","block");
'.$script.'
return false;
}
});
</script>'), true);
}
$output = str_replace(array('[[+key]]','[[+trigger]]'), array($key, $as_trigger), $wrapper);
break;
Остальное без изменений.Отдаю на Ваш суд, если посчитаете изменения не лишними, то был бы рад обновить данный сниппет в установщике :)
Комментарии: 36
Вообще автор вряд — ли будет изменять сам на основе предложенного здесь кода. Сделайте форк github.com/bezumkin/AjaxSnippet, напишите изменения, а потом отправте pull-request, так больше шансов, что изменения попадут в пакет
Спасибо, попробую. правда теперь надо разобраться как это сделать:) Раньше не приходилось, но надо же научиться:)
А пример вызова &as_selector можно? наименование класса? Не пашет…
&as_selector=`#id` или &as_selector=`.class`
неа, я пробовал и так и сяк
проверь, что-то не так сделал.
если знаешь jquery, то вот эта строчка говорит сама за себя:
если знаешь jquery, то вот эта строчка говорит сама за себя:
$(document).on("click", "'.$as_selector.'", function(e) {
[[MyAjaxSnippet?
&snippet=`snip`
&type=`good`
&as_mode=`onclick`
&as_target=`#good`
&as_selector=`#good-tab`
]]
все работает
Хах, твою дивизию!!! Я про
Ок, запустил.
А повторный запуск — это что имеется ввиду?
&as_mode=`onclick`
забыл… Старость не радость))) Ок, запустил.
А повторный запуск — это что имеется ввиду?
к примеру по клику на кнопку нужно каждый раз обновлять данные, в данном случае сниппет будет вызываться каждый раз при клике на селектор
У меня это не прокатило,
вписывал так : &as_refresh=`true`
Первый раз сниппет вызывается, второй раз и дальше — неа А, не, ошибся, все четко работает! Данные слишком быстро приходили и казалось, что не меняется ничего, консолька помогла!
Крайне рекомендую к использованию!
спасибо за отзыв)
А кстати не решал проблемку с переменной spinner?) Я конечно все понимаю, что чувство юмора должно быть, но в сниппете из 23300 символов 19900 занимает код картинки спиннера в base64)))
так там же можно вроде свой подставлять, к примеру из font Avesome, правда сам не проверял
Заменил во всем сниппете это
'.$spinner.'
на это/assets/images/icons/ajax-loader.gif
и зачистил это$spinner = 'блабла-на-19900-символов';
Еще может понадобиться такой вариант — запуск по готовности страницы (т.е. как было задумано изначально автором сниппета) и ПЛЮС запуск по клику, неужели придется вписать два вызова, один стандартный, второй с кликом???
если нужно обновлять контент этого сниппета, то да, придется дважды вызывать, ну или дописать под себя этот сниппет.
У меня этот сниппет работает при переходе по вкладкам (во кладках находится второстепенный контент, который ни к чему вызывать при загрузке страницы, он нужен только по требованию)
У меня этот сниппет работает при переходе по вкладкам (во кладках находится второстепенный контент, который ни к чему вызывать при загрузке страницы, он нужен только по требованию)
Еще заметил — если второй и т.д. раз запускаю — то спиннер не вызывается…
по тому, что спиннер на момент запуска находится в том же боксе, куда вставляется контент, и спиннер убирается оттуда после вставки результатов, надо его поковырять просто
Я сначала подумал, что он туда добавляется по событию. Угу, ок!
Подскажи, что значит эта запись в tpl.msOrder — что-то на феноме, а я в нем ни зуб ногой:
Подскажи, что значит эта запись в tpl.msOrder — что-то на феноме, а я в нем ни зуб ногой:
{var $checked = !$order.delivery && $index == 0 || $delivery.id == $order.delivery}
я понял так, верно?: $checked будет true, если не существует $order.delivery и это первая доставка в цикле ИЛИ при совпадении id текущей в цикле доставки с выбранной доставкой $order.delivery.
это же какое-то условие из минишопа, как я понял, я хз, надо полностью смотреть что есть что
Когда увидел заголовок данного поста, то первая мысль была «предлагаю кому-то прокачать скиллы в JavaScript», т.к. на мой скромный взгляд AjaxSnippet нужен для случаев, когда совсем уж лень писать несколько строк кода…
критикуешь — предлагай!
Я не то чтобы критикую, а скорее не понимаю смысла. Ну да ладно. Что конкретно предложить надо не совсем понял.
Ну интересно, что это за
несколько строк кодаУ безумкина и то строк 30 было в аналоге этого компонента — здесь жевали — modx.pro/development/3139-foundations-of-ajax/
Скажем так… На данный момент мне нравится вариант для загрузки и манипуляции с AJAX контентом, когда используется действительно далеко не несколько строк…
Суть в том, что на сайт подключаются jquery, underscore и backbone, далее пишутся соответствующие Model, View и т.д. с помощью extend стандартных объектов backbone.
Далее создается в корне сайта папка rest в которой создается что-то по типу и подобию этого docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/developing-rest-servers
Ну и последнее это расписывание template для нужных блоков.
Но… Если вернуться к вашей ссылке, то если вы банально уберете из кода все комментарии, а также alert из js скрипта (ибо нужно в консоли браузера debug'ить) и посчитаете кол-во строк оставшихся… Я даже промолчу про то, что код можно уменьшить, если несколько иначе переписать…
Суть в том, что на сайт подключаются jquery, underscore и backbone, далее пишутся соответствующие Model, View и т.д. с помощью extend стандартных объектов backbone.
Далее создается в корне сайта папка rest в которой создается что-то по типу и подобию этого docs.modx.com/revolution/2.x/developing-in-modx/advanced-development/developing-rest-servers
Ну и последнее это расписывание template для нужных блоков.
Но… Если вернуться к вашей ссылке, то если вы банально уберете из кода все комментарии, а также alert из js скрипта (ибо нужно в консоли браузера debug'ить) и посчитаете кол-во строк оставшихся… Я даже промолчу про то, что код можно уменьшить, если несколько иначе переписать…
А, т.е. этот код modx.pro/development/3139-foundations-of-ajax/ сами не используете? ууууу… я думал есть реальный опыт использования, сам код проверял лично, работает исправно, но думал есть что-то посвежее 2012 года…
REST конечно круто, но ради ТРЕХ использовании на одном сайте огород городить…
REST конечно круто, но ради ТРЕХ использовании на одном сайте огород городить…
Я сейчас в растерянности, если честно. Я весь твой код в тексте заметки сжал до нескольких строк. PHPDoc строки, разумеется, не считаются :-) Вот смотри, если мой вариант окажется лучше, то что будет с исходным текстом твоей заметки?
Я сейчас на github'е глянул исходники ajaxSnippet и вообще со смеху умираю, если честно. Надо было с самого начала это сделать, т.к. не помня наизусть оригинальный код, не смог сходу понять, что конкретно добавил ТЫ, а что было изначально. Помимо всего прочего в код Василия со своими улучшениями влез и его код сократить умудрился:-) Ну да ладно. Касательно того, что именно ТЫ написал. У меня вышло от 2 до 4 строк… 4 строки 100% вариант, а более короткие варианты я еще банально не до конца проверил.
И сами вы:
ууууу^_^
пока что одни я да я, а где код-то вась?
Сейчас скину ^_^
ммм… не, не в этом дело, когда много всякого функционала нужно обновлять через ajax, то каждый раз надо писать заново «несколько строк кода», а потом при изменении каждый раз искать «где же надо немного исправить?». А когда есть такой стандартный функционал, то все это проще.
Ну и да, мне еще есть куда стремиться в правильности написания кода и знания JS)
Ну и да, мне еще есть куда стремиться в правильности написания кода и знания JS)
case 'onclick':
//1
$as_selector = $modx->getOption('as_selector', $scriptProperties, 'as_trigger');
//2
if (empty($wrapper)) {$wrapper = '<div id="[[+key]]" class="ajax-snippet">
<a href="#" class="[[+as_selector]]">[[+trigger]]</a>
<img src="'.$spinner.'" class="as_spinner" style="width:32px;margin:auto;display:none;">
</div>';}
if (empty($as_trigger)) {
$as_trigger = $modx->lexicon('as_trigger');
}
//3
$script = (empty($as_repeat)?'$(this).remove();':'').$script;
//4, 5
$modx->regClientScript(preg_replace('/(\t|\n)/', '','
<script type="text/javascript">
$(document).on("click", ".'.$as_selector.'", function(e) {
var spinner = $(this).parent().find(".as_spinner");
spinner.css("display","block");
'.$script.'
return false;
});
</script>'), true);
//6
$output = str_replace(array('[[+key]]','[[+trigger]], [[+as_selector]]'), array($key, $as_trigger, $as_selector), $wrapper);
break;
P.S. Это написано на от*&ись, поэтому претензии или т.п. не принимаются! :-)
Можно использовать AjaxForm + свой сниппет, в котором можно делать, всё что угодно.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.