Архив рубрики: jQuery

Jscript Группировка в ассоциативном массиве с подсчетом

Listing jscript группировка

Есть данные: цвет. У каждого цвета свой размер (может повторятся). Необходимо сделать группировку в jscript по цвету и повторяющиеся размеры посчитать.

Вывести все это.

Для начала создадим массив наших данных. Нам для это надо создать массив массивов.

var array_res = new Array();
.....// тут цикл в котором получаю данные
array_res[i]=new Array ();
array_res[i].push(color,fasA+'x'+fasL+';'); //Получается вида [["Красный","716x396"],[....,....]]
....
//запускаем процедуру для группирования
  print_Group(array_res);

Сама функция для группировки с комментариями. Тут используются ассоциативные массивы.

function print_Group(arr_res){
  gr = [];  
   // Для каждого цвета собираем  его размеры 
for (var i = 0; i < arr_res.length; i++) {
  if (gr[arr_res[i][0]]== null ) {gr[arr_res[i][0]]="";}
   gr[arr_res[i][0]] += arr_res[i][1];
  }  

// группируем и считаем элементы
for (var k in gr) {
 // Выводим цвет 
document.write('<tr><td colspan="2"><b>'+ k + '</b></td></tr>');
c = []; 
t_c = gr[k].split(';'); //получаем массив всех размеров 
for (var i = 0; i < t_c.length-1; i++) {
 if (c[t_c[i]]== null) c[t_c[i]] = 0; 
  c[t_c[i]] +=1; // счетчик одинаковых размеров 
}
 //выводим размер и его количество
   for (var t in c) {
 document.write('<tr><td colspan="2">'+t + '= ' + c[t] +' шт'+ '</td></tr>'); 
   }
 }
}

Вот такая группировка получается в итоге.

group_array

AJAX Показ и скрытие контента по нажатию на элемент

ajax_hide_showНеобходимо по нажатию показать некий контент, при повторном нажатии его скрыть.

Это можно сделать с помощью нескольких  AJAX функций:

1.  fadeToggle(«slow»);

Пример листинг

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id=sl>Коротко</div><br><br>
<div id=sll>
<img src="jpg.jpg">
по нажатию <br>
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
</div>
<script>
$("#sl").click(function () {
$("#sll").fadeToggle("slow");
});
</script>
</body>
</html>

2. .toggle()

Пример листинг

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<div id=sl>Коротко</div><br>
<div id=sll>
<img src="jpg.jpg">
по нажатию <br>
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
Показываем и скрываем блок контента. Показываем и скрываем блок контента.
<script>
$("#sl").toggle(function() {
$("#sll").slideUp("slow");
}, function() {
$("#sll").slideDown("slow");
});
</script>
</body>
</html>

Тоже самое можно проделать силами только CSS3 пример тут

PHP — Перевод русских букв на транслит

Необходимо перевести русские буквы на транслит. Будем использовать языки AJAX  и PHP.

Шаг первый

Создаем форму для ввода текста, который будем конвертировать в транслит.

Форма для обработки

Листинг пример формы

<form id="myForm">
Текст на русском для транслита:<br/>
<textarea rows="15" cols="50" id="t1" style="float:left"></textarea>
<textarea id="transl" rows="15" cols="50"></textarea>
<br/>
<input class="b"type="button" value="перевести" id="butt"/>
</form>

Шаг второй

Пишем след AJAX код для обработки  нажатия на кнопку

<script>
$(document).ready(function(){

$('#butt').click(function(){
$.ajax({
type: "POST",
url: "translate.php",
data: "t1="+$("#t1").val(),
success: function(html){
$("#transl").html(html);
}
});
return false;
});

});
</script>

Шаг третий

пишет обработчик в файле translate.php

$str=$_REQUEST['t1'];

function translit($str)
{
$tr = array(
"А"=>"A","Б"=>"B","В"=>"V","Г"=>"G",
"Д"=>"D","Е"=>"E","Ж"=>"J","З"=>"Z","И"=>"I",
"Й"=>"Y","К"=>"K","Л"=>"L","М"=>"M","Н"=>"N",
"О"=>"O","П"=>"P","Р"=>"R","С"=>"S","Т"=>"T",
"У"=>"U","Ф"=>"F","Х"=>"H","Ц"=>"TS","Ч"=>"CH",
"Ш"=>"SH","Щ"=>"SCH","Ъ"=>"","Ы"=>"YI","Ь"=>"",
"Э"=>"E","Ю"=>"YU","Я"=>"YA","а"=>"a","б"=>"b",
"в"=>"v","г"=>"g","д"=>"d","е"=>"e","ж"=>"j",
"з"=>"z","и"=>"i","й"=>"y","к"=>"k","л"=>"l",
"м"=>"m","н"=>"n","о"=>"o","п"=>"p","р"=>"r",
"с"=>"s","т"=>"t","у"=>"u","ф"=>"f","х"=>"h",
"ц"=>"ts","ч"=>"ch","ш"=>"sh","щ"=>"sch","ъ"=>"y",
"ы"=>"yi","ь"=>"'","э"=>"e","ю"=>"yu","я"=>"ya",
"."=>".","?"=>"?","/"=>"_","\\"=>"_",
"*"=>"_",":"=>":","*"=>"_","\""=>"_","<"=>"_",
">"=>"_","|"=>"_"
);
return strtr($str,$tr);
};
$tans=translit($str);
echo $tans;

Готовый пример онлайн перевода в транслит (транслитирования)

AJAX и PHP — работа с базой данных

Задача:

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

Решение (Пример):

Шаг 1

Создать файл index.php, в котором

  • подключаемся к базе данных для получения списка категории

Листинг файла подключения к БД auth.php

<?
$hostname = "localhost"; // название/путь сервера, с MySQL
$username = "root"; // имя пользователя (в Denwer`е по умолчанию "root")
$password = ""; // пароль пользователя (в Denwer`е по умолчанию пароль отсутствует, этот параметр можно оставить пустым)
$dbName = "test"; // название базы данных

/* Создаем соединение */
mysql_connect($hostname, $username, $password) or die ("Не могу создать соединение");
mysql_query('SET NAMES utf8') or header('Location: Error');

/* Выбираем базу данных. Если произойдет ошибка - вывести ее */
mysql_select_db($dbName) or die (mysql_error());
?>
  •  выводим форму с выпадающим списком из этих категорий

Выпадающий список

  • пишем AJAX запрос на обработку выбранного элемента

Листинг файла с AJAX запросом index.php

<?php
include "auth.php";//Подключаем БД
//делаем запрос на категории
$query = "select * from allcat where Id_parent=0 ";
$result = mysql_query($query) or die(mysql_error());
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="myForm">
Выберите Категорию:<br/>
<select id="idcat">
<?php
//Выводим категории и ее ID
while ($row=mysql_fetch_array($result))
{
print "<option value=".$row['Id_cat'].">";
print $row['Name'];
echo("</option>");
}
?>
</select>
</form>

<div id="content"></div>

<script>
$(document).ready(function(){

$('#idcat').change(function(){
$.ajax({
type: "POST",
url: "show.php",
data: "idcat="+$("#idcat").val(),
success: function(html){
$("#content").html(html);
}
});
return false;
});

});
</script>

</body>
</html>

Шаг 2

Создать файл show.php, в котором обрабатываем AJAX запрос

  • подключаемся к базе данных для получения списка товаров по ID категории
  • выводим полученные товары

Листинг файла для обработки запроса show.php

<?php
include "auth.php"; //Подключаем БД
//делаем запрос на товары этой категории
$query = "select * from allcat where Id_parent=".$_REQUEST['idcat']."";
$result = mysql_query($query) or die(mysql_error());
// выводим товары полученные по запросу
while ($row=mysql_fetch_array($result))
{
print $row['Name']."<br>";
}
?>