javascript / Tag search / Русский клуб Joomla http://joomclub.net/en/rss/tag/javascript/ ru tena2000@mail.ru tena2000@mail.ru Alto CMS v.1.1.13 Отправка формы с файлом без перезагрузки страницы (ajax jQuery). http://joomclub.net/en/t/103/ http://joomclub.net/en/blog/programming/103.html a.sedelnikov@gmail.com На одном из проектов мне потребовалось сделать отправку формы, содержащей файл,  посредством ajax. Напрямую эта задача не решается, по этому пришлось делать двойную загрузку: сначала происходит загрузка файла, результат загрузки сообщается скрипту и скрипт движется дальше, отправляя саму форму.

Код формы может быть любой, например такой:

<div >
<form action="#" class="vacancy_form"> 
                <input type="text" name="l_name" class="a-name" data-validate="validate(required)"> 
                <input type="text" name="f_name" class="b-name" data-validate="validate(required)"> 
                <input type="file" name="resume" data-validate="validate(required)"> 
                <button class="btn yel_btn">Откликнуться</button> 
                <input type="hidden" name="filename" value=""/> 
</form>

Скрипт:

var iframe = $('<iframe id="upload_iframe" name="upload_iframe" style="width:0;height:0;border:0;"></iframe>'); 
        var hidForm = $('<form style="display:none;" target="upload_iframe" enctype="multipart/form-data" action="/ajax/?function=upload_file" method="post" name="upload-form"/>'); 
        $('body').append(iframe).append(hidForm); 
        iframe.load(function(){ 
            var data = $(this).contents().text(); 
            if (data === undefined || data == '') return; 
            iframe.remove(); 
            hidForm.remove(); 
            data = JSON.parse(data); 
            if (data.error == '1') 
            { 
                alert(data.content); 
                return; 
            } 
            form.find('input[name=filename]').val(data.file); 
            $.ajax({ 
                url: '/ajax/?function=vacancy', 
                type: "POST", 
                dataType:"json", 
                data: form.serialize(), 
                success: function(data){ 
                    ... 
                } 
            }); 
        }); 
        var realFile = form.find('input[name=resume]'), 
            realFileVal = realFile.val(), 
            realFile = form.find('input[name=resume]'), 
            newFile = realFile.clone(); 
        realFile.replaceWith(newFile); 
        hidForm.append(realFile).val(realFileVal); 
        hidForm.submit();

Скрипт был почерпнут на просторвх интернета и переделан под свои нужды. Скрипт создает ифрейм и дополнительную форму чтобы не маяться с передачей атрибутов в основную форму. Вспомогательная форма берет из основной инпут файла с его значением, отправляет на сервер строкой hidForm.submit();. После загрузки файла вступает событие  iframe.load, в которое сервер передает информацию о загрузке файла и путь до загруженного файла на сервере, Далее полученный путь прописывается в input[name=filename] и происходит передача основной формы через  $.ajax. На выходе получаем загруженный файл и переданную форму.

]]> Thu, 30 May 2013 13:19:46 +0400 Смена action в form средствами jquery http://joomclub.net/en/t/60/ http://joomclub.net/en/blog/60.html dron79-79@yandex.ru  Работая над написанием собственной системы управления заказами, столкнулся с необходимостью отправлять данные формы на разные URL в зависимости от того какая кнопка нажата. Так как мой движок все равно использует jquery, то решил что для этой задачи рационально его и использовать.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
     <head>
         .  .  .
       <script language="javascript" type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
   <script language="javascript" type="text/javascript" >
             function sb(ev){
               var urlf="index.php?com=u&z=list";
                             if (ev=="apply") {
                                   urlf="index.php?com=u&z=add&a=apply";           
               }
               if (ev=="save") {
                                   urlf="index.php?com=u&z=add&a=save";   
               }
                           $("#adminForm").attr("action",urlf);  //заменяем в форме атрибут action
                           $("#adminForm").submit();  //отправляем форму
                     }
     </script>
   </head>
  <body>
           ...
  <span id="apply"  onclick="javascript: sb('apply')" >Применить </span>
  <span id="save"  onclick="javascript: sb('save')" >Сохранить </span>
            .....
   <form name="adminForm" method="post" action="index.php" id ="adminForm">
             .... 
   </form>
   </body>
 </html>

Код не сложный, но свои функции выполняет. Если кто знает более короткое решение, то буду рад с ним ознакомится.

]]> Sun, 07 Oct 2012 21:07:23 +0400 Отключение скриптов mootools на уровне шаблона http://joomclub.net/en/t/32/ http://joomclub.net/en/blog/joomla25/32.html dron79-79@yandex.ru Поговорим немного о том, как облегчить вывод страниц сайта на Joomla 2.5. Ни для кого не открою секрета, что в погоне за универсализацией, разработчики Joomla подгружают на все страницы сайта фреймворк Mootools. Не будем обсуждать решения разработчиков, скажу только, что это не всегда оправдано, прежде всего в плане соотношения Функционал/скорость загрузки страницы.

Но у нас есть все возможности, чтобы самим решать, на каких страницах сайта использовать данный фреймворк, а на каких нет.
 Решается данный вопрос на уровне шаблона. Ну что же, приступим к препарации нашего шаблона. Предупреждение, перед всеми изменениями, необходимо сделать резервную копию вашего шаблона.


Вносить изменения будем в файл templates\имя_шаблона\index.php

Для того что бы выяснить какие переменные содержит объект нашего шаблона после строчки 

defined('_JEXEC') or die;
добавим строку 

print_r($this);
В результате мы увидим структуру объекта, состоящую из массивов, с переменными вашего шаблона, весь вывод приводить не буду, кому интересно сами попробуют, приведу только то что нам пригодится для работы.

 

JDocumentHTML Object
(
    ...
    [_scripts] => Array
        (
            [/media/system/js/mootools-core.js] => Array
                (
                    [mime] => text/javascript
                    [defer] =>
                    [async] =>
                )
            [/media/system/js/core.js] => Array
                (
                    [mime] => text/javascript
                    [defer] =>
                    [async] =>
                )
            [/media/system/js/caption.js] => Array
                (
                    [mime] => text/javascript
                    [defer] =>
                    [async] =>
                )
            [/media/system/js/mootools-more.js] => Array
                (
                    [mime] => text/javascript
                    [defer] =>
                    [async] =>
                )
        )
    [_script] => Array
        (
            [text/javascript] => window.addEvent('load', function() {
                new JCaption('img.caption');
            });
        )
    ...
)

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

Когда нам может погрузка этих скриптов? На ум приходит создание нового материала или редактирование существующего. Сделаем в шаблоне проверку на эти условия.

 

$view = JRequest::getVar('view', null, 'get', 'word');
$layout = JRequest::getVar('layout', null, 'get', 'word');
if (!(($view=='form')and($layout='edit'))) {
    //выполняем код по ограничению вывода mootools
    if (isset($this->_scripts)and(count($this->_scripts))){
        foreach ($this->_scripts as $key => $value) {
            if (preg_match("/media\/system\/js/i", $key)) {
                unset ($this->_scripts[$key]);
            }
        }
    }
    //вырезаем строку  window.addEvent('load', function() { new JCaption('img.caption');    });
    if (isset($this->_script)and(count($this->_script))){
        preg_match("/window\.addEvent\('load',\sfunction\(\)\s\{[\s]*new\sJCaption\('img\.caption'\);[\s]*\}\);/iU", $this->_script['text/javascript'],$match);
        if (isset($match[0])) {
            $this->_script['text/javascript']=str_replace($match[0],'',$this->_script['text/javascript']);
        }
        //вырезаем тултип
        preg_match("/window\.addEvent\('domready',\sfunction\(\)\s\{[\s]*[$]+\('\.hasTip'\)\.each\(function\(el\)\s\{[\s]*var\stitle\s=\sel\.get\('title'\);[\s]*if\s\(title\)\s\{[\s]*var\sparts\s=\stitle\.split\('::', 2\);[\s]*el\.store\('tip:title',\sparts\[0\]\);[\s]*el\.store\('tip:text',\sparts\[1\]\);[\s]*\}[\s]*\}\);[\s]*var\sJTooltips\s=\snew\sTips\([$]+\('\.hasTip'\),\s\{\smaxTitleChars:\s50,\sfixed:\sfalse\}\);[\s]*\}\);/iU", $this->_script['text/javascript'],$match2);
        if (isset($match2[0])) {
            $this->_script['text/javascript']=str_replace($match2[0],'',$this->_script['text/javascript']);
        }
    }
}
Почему я не стал обнулять объекты _scripts и _scripts, а сделал по ним поиск, да потому что на страницах могут быть установлены компонент или модули использующие свои скрипты, без которых страница будет отображаться не корректно.

Для тех, кто хочет добиться полного уничтожения всех скриптов на страницах своего сайта, код будет следующим:

$view = JRequest::getVar('view', null, 'get', 'word');
$layout = JRequest::getVar('layout', null, 'get', 'word');
if (!(($view=='form')and($layout='edit'))) {
    //выполняем код по ограничению вывода mootools
    if (isset($this->_scripts)and(count($this->_scripts))){
        $this->_scripts=array();
    }
   
    if (isset($this->_script)and(count($this->_script))){
       $this->_script['text/javascript']='';
      
    }
}

Статья сделана по материалам JoomlaForum joomlaforum.ru/index.php/topic,197566.0.html

Выражаю благодарность участнику форума Poznakomlus за раскрытие данной темы.

Благодарю читателей за внимание!

]]> Tue, 18 Sep 2012 09:49:53 +0400