Andipas: jQuery

Показаны сообщения с ярлыком jQuery. Показать все сообщения

пятница, 14 октября 2011 г.

Как получить выбранные элементы checkbox в массив jQuery

var selectedItems = new Array();
$("input[@name='itemSelect[]']:checked").each(function() {selectedItems.push($(this).val());});
 
if (selectedItems .length == 0) {
    alert("Please select item(s) to delete.");
} else {
    $.ajax({
        type: "POST",
        url: "/ajax_do_something.php",
        data: "items=" + selectedItems.join('|'),
        dataType: "text",
        success: function (request) {
            document.location.reload();
        },
        error: function(request,error){
            alert('Error deleting item(s), try again later.');
        }
    })
}

Нашел здесь

суббота, 5 февраля 2011 г.

Клиентская и серверная валидация

Одна из наиболее частых задач в web-разработке - создание форм и проверка их на корректность вводимых данных. Для того чтобы это все было более юзабильно, есть специальный jQuery Validation Plugin. Этот плагин позволяет на стороне клиента, проверять форму на корректность вводимых данных, соответственно не требуется перезагрузка страницы.

Чтобы облегчить создание форм в web-приложениях, существуют различные библиотеки. Одна из них HTML_QuickForm2 и ее доработка jQuickForm которая должна была подружить, этот построитель форм с jQuery Validation Plugin. Вышло на мой взгляд не плохо, но слишком наворочено. К тому же автор давно не развивал это дополнение, последний раз когда я скачивал этот пакет, не работала клиентская валидация, а ведь изначально именно для этого и был разработанн этот пакет.

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

У всех этих "помошников" построителей форм, есть минусы - 1. Необходимо разбиратся с интерфейсами классов, как правило, сделано удобно, разобраться можно быстро 2. Сложности кастомизации, изменения дизайна форм 3. Все эти надстройки жрут ресурсы

После размышлений над этим, я создал небольшой класс, который занимается только валидацией, правила задаются аналогично jQuery Validation Plugin. Объект этого класса создает необходимый код JS для валидации на стороне клиента (если нужно) и также проверяет формы на стороне сервера по тем же правилам. Привожу пример -


<?php
header("Content-Type: text/html; charset=utf-8");
require 'valid/Valid.php';
require 'valid/ValidLang.php';

$oValid = new Valid($l);
$oValid->addRule('login', 'required');
$oValid->addRule('login', 'minlength', 5);
$oValid->addRule('pass', 'required');
$oValid->addRule('pass', 'minlength', 5);
$oValid->addRule('re_pass', 'equalTo', 'pass');
$oValid->addRule('email', 'required');
$oValid->addRule('email', 'email');

if (isset($_POST['login'])) {
   if ($oValid->check()) {
       // Здесь можно проверить дополнительно, на повторный логин и мыло например
       echo 'Валидация успешна';
       // Сохраняем данные, редиректим если надо
   }
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <title>Valid - mini validator</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
       <link rel="STYLESHEET" type="text/css" href="css/eform.css">
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
       <script type="text/javascript">
               !window.jQuery && document.write('<script src="js/jquery-1.4.3.min.js"><\/script>');
       </script>
       <script type="text/javascript" src="js/jquery.validate.pack.js"></script>
       <script type="text/javascript" src="js/jquery.form.js"></script>
   </head>
 
<body>

<form action="index.php" method="post" name="reg_form" id="reg_form" class="eForm">
   <fieldset>
       <legend><?php echo $l['index']['registration']; ?></legend>
       <p>
           <label for="login"><?php echo $l['index']['login']; ?></label>
           <input type="text" id="login" name="login" value="<?php echo $oValid->getReq('login');?>" />
           <?php echo $oValid->getErr('login');?>
       </p>
       <p>
           <label for="pass"><?php echo $l['index']['pass']; ?></label>
           <input type="password" id="pass" name="pass" value="" />
           <?php echo $oValid->getErr('pass');?>
       </p>
       <p>
           <label for="re_pass"><?php echo $l['index']['re_pass']; ?></label>
           <input type="password" id="re_pass" name="re_pass" value="" />
           <?php echo $oValid->getErr('re_pass');?>
       </p>
       <p>
           <label for="email"><?php echo $l['index']['email']; ?></label>
           <input type="text" id="email" name="email" value="<?php echo $oValid->getReq('email');?>" />
           <?php echo $oValid->getErr('email');?>
       </p>
       <p>
           <input type="submit" value="<?php echo $l['index']['registration']; ?>" class="noresize submit"/>
       </p>
   </fieldset>
</form>

<?php echo $oValid->getJS('reg_form'); ?>

</body>
</html>

Пример реализации можно посмотреть в моем mini MVC framework, там уже реализована регистрация, авторизация - mFram

среда, 2 февраля 2011 г.

Скролл к элементу DOM HTML

Переход к элементу с определённым id достигается очень просто: даётся ссылка с href="#id-элемента". Однако, иногда id у элемента нет. Используя jQuery перейти к определённому элементу можно так:

$("html,body").scrollTop($(myElement).offset().top);

$("html,body").animate({scrollTop: $(myElement).offset().top}, 1000);

Прочел у Sam-a

четверг, 9 декабря 2010 г.

jQuery - как получить value radio элемента

Код - пример #1

// ========= 1 вариант ==========
Cтрана: <br />
<input type="radio" name="country" value="Russia" checked="checked">Россия <br />
<input type="radio" name="country" value="Other">Другая

...

var the_value = $(":radio[name=country]").filter(":checked");

// ========= 2 вариант ==========
<form id="radio_form">
  <fieldset>
    <label><input type="radio" name="color" value="red" checked="checked" />Red</label><br />
    <label><input type="radio" name="color" value="yellow" />Yellow</label><br />    
    <label><input type="radio" name="color" value="blue" />Blue</label><br />
    <label><input type="radio" name="color" value="purple" />Purple</label><br />
  </fieldset>
</form>

...

var the_value = $('#radio_form input:radio:checked').val();

Страницы

пятница, 14 октября 2011 г.