Cross Domain Ajax Json запрос

И так, самый простой способ это использовать в хидере

<?php
header("access-control-allow-origin: *");
?>

давайте рассмотрим пример, и так, пускай у на на сайте http://example.com есть страница test.php:

<?php
$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
header("access-control-allow-origin: *");
echo json_encode($data);
?>

На другом сайте при помощи js скрипта забираем данные

<script type="text/javascript" id="js">
$.ajax({
url:"http://example/test.php",
dataType: 'json', // Notice! JSONP <-- P (lowercase)
success:function(json){
// do stuff with json (in this case an array)
alert("Success");
},
error:function(){
alert("Error");
},
});
</script>

Автоматически генерируем тумбнейлы для Youtube роликов и используем их вместе с Lytebox

Итак, есть задача, на сайте выводятся Youtube роликивот в таком формате:

<iframe title=»YouTube video player» width=»480″ height=»390″ src=»http://www.youtube.com/embed/ajNC3W-Dlqk» frameborder=»0″ allowfullscreen></iframe>

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

<?
    //  $post_new - сообщение которое мы будем обрабатывать
    $post_new= 'Ролик №1:<br> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/ajNC3W-Dlqk" frameborder="0" allowfullscreen></iframe><br>
    Ролик №2:<br> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/c4XPVvMm4j4" frameborder="0" allowfullscreen></iframe>';
    // Папка для тумбнейлов
    $folder = 'cache';
    
    preg_match_all('/src=[\'"]?([^\'" >]+)[\'" >]/', $post_new, $img);
     foreach($img[1] as $key => $link){
        $tmp_link = explode('/',$link);
        $file = explode('.',array_pop($tmp_link));
        if($tmp_link[2] == 'www.youtube.com'){   
            $name = &$file[0];
            $new_link = 'src="'.$folder.'/'.$name.'_tumb.jpg"';
            if (!file_exists($folder.'/'.$name.'_tumb.jpg')) {
                $homepage = file_get_contents('http://img.youtube.com/vi/'.$name.'/0.jpg');
                file_put_contents($folder.'/'.$name.'_tumb.jpg' , $homepage);
                $homepage = @imagecreatefromjpeg($folder.'/'.$name.'_tumb.jpg');
                $im = @imagecreatefrompng('images/play.png');
                $watermark_width = imagesx($homepage);
                $watermark_height = imagesy($im);
                $alpha_level = 60;
	        //Добавляем вотермарк
                imagecopymerge($homepage, $im, 0, 0, 0, 0, 480, 360, $alpha_level);
                imagejpeg($homepage,$folder.'/'.$name.'_tumb.jpg',75);
            }
            $replace = '<iframe title="YouTube video player" width="480" height="390" src="'.$link.'" frameborder="0" allowfullscreen></iframe>';
            //echo $replace;
            $post_new = str_replace($replace,'<a href="'.$link.'" class="lytebox" data-lyte-options="width:560 height:349"><img '.$new_link.'/></a>',$post_new);
        }
    }
?>

Используемый мною вотермарк

Демонстрация работы скрипта

Js Spoiler или исчезающие div-ы

И так, пускай нам нужно по клику прятать и открывать контент. Демка скрипта Для этого можно использовать следующий скрипт:

<script language="javascript">
function toggle_start() {
var ele = document.getElementById("toggleStart");
var text = document.getElementById("displayStart");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Start";
}
else {
ele.style.display = "block";
text.innerHTML = "Start";
}
}
</script>

Размещаем данный скрипт в body. Далее нам нужна ссылка нажимая на которую мы будем показывать и прятать содержимое:

<a id=»displayStart» class=»» href=»javascript:toggle_start();» target=»»>Start</a>

и теперь сам контент:

<div id=»toggleStart» style=»display: none;»>
START! START! START!
</div>

JS обновляем кусочек кода с помощью jquery и ajax

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

<script type="text/javascript" src="js/jquery.js"></script>

Далее сам скрипт:

<script type="text/javascript">
$(document).ready(function() {
$("#load").load("http://teaseo.ru/demo/time.php");
var refreshId = setInterval(function() {
$("#load").load('http://teaseo.ru/demo/time.php');
}, 30000);
$.ajaxSetup({ cache: false });
});
</script>

где http://teaseo.ru/demo/time.php это обновляемый контент, а 30000 это время обновления в миллисекундах

Контент будет выведен в:

<div id=»load»></div>

Поиск с использованием Jquery Ui Autocmplete

Статей в интернете на эту тему очень, но я все же решил написать свой вариант, своими слова. Первое, что нам будет необходимо сделать, это подключить jQuery и jQuery UI. Для этого, качаем их отсюда и отсюда. Скачивать jQuery Ui полностью или только виджет Autocomlete это дело ваше.

Теперь можно подключить скачанное:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>

Далее сам скрипт Autocomplite :

$(function() {
    var cache = {},
    lastXhr;
    $( "#autocomplete" ).autocomplete({
        minLength: 1,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }lastXhr = $.getJSON( "http://teaseo.ru/search.php", request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        }
    });
});

Параметр minLength задает минимальное количество символов при котором срабатывает автокомплит. Файл search.php расположенный по адресу http://teaseo.ru/search.php должен выдавать предварительные результаты поиска в формате json. Как пример, файл search.php:

<?php
    function get_update_date($search)
    {
        $query = "SELECT name FROM table WHERE name LIKE ".$search."%'";
        $rt = mysql_query($query);
        while($nt = mysql_fetch_array($rt)){
            $new[] = $nt['name'];
        }
        return $new;
    }
    function prep_json($array)
    {
        foreach($array as $key => $val){
            $new[$key]['label'] = $val;
            $new[$key]['id'] = $key;
            $new[$key]['value'] = $val;
        }
        return $new;
    }
    if($_GET('term')){
        echo json_encode(prep_json(get_update_date(trim(strip_tags($_GET('term'))))));     
    } 
?>

Пример для Codeigniter 2.0.X. И так, в модель Data добавляем две следующие функции:

<?php
    function get_update_name($name = '')
    {
        $this->db->select('name');
        $this->db->like('name',$name,'after');
        $query = $this->db->get('table');
        return $query->result_array();         
    }
    function pre_json($array)
    {
        foreach($array as $key => $val){
            $new[$key]['label'] = $val['name'];
            $new[$key]['id'] = $key;
            $new[$key]['value'] = $val['name'];
        }
        return $new;
    }
?>

В контроллере

<?ph
$search = $this->Data->get_update_name(trim(strip_tags($this->input->get('term'))));
$info['result'] = $this->Data->pre_json($search);
?>

И в view :

<?php
echo json_encode($result);
?>

И не забываем присвоить форме id =»autocomplete»

Codeigniter, проверка пароля из базы при помощи Ajax jQuery на примере PyroCMS

Все очень просто и понятно на странице формой пишем следующий скрипт:

$('input[name=password]').bind('keyup focus', function() {

$.post(base_url + 'index.php/ajax/confirm_database', {
server: $('input[name=hostname]').val(),
username: $('input[name=username]').val(),
password: $('input[name=password]').val()
}, function(data) {
if (data.success == 'true') {
$('#confirm_db').html(data.message).removeClass('failure').addClass('success');
}
else {
$('#confirm_db').html(data.message).removeClass('success').addClass('failure');
}
}, 'json'
);

});

проверка будет производиться по средством вызова скрипта index.php/ajax/confirm_database на стороне сервера:

<?php
public function confirm_database()
{

$server = $this->input->post('server');
$username = $this->input->post('username');
$password = $this->input->post('password');
$port = $this->input->post('port');

$host = $server . ':' . $port;

$link = @mysql_connect($host, $username, $password, TRUE);

if ( ! $link )
{
$data['success'] = 'false';
$data['message'] = lang('db_failure').mysql_error();
}
else
{
$data['success'] = 'true';
$data['message'] = lang('db_success');
}

// Set some headers for our JSON
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

echo json_encode($data);

}
?>

JS Простое drop-down меню

Есть множество вариантов выпадающих меню, но вот это мне нравиться больше всего, в первую очередь за простоту. И так, все что вам нужно, это скачать вот этот скрипт и вот этот css. Далее между <head></head>:

<link rel="stylesheet" type="text/css" href="/css/drop.css" />
<script type="text/javascript" src="/js/drop.js"></script>

Описание самого меню :

<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

Демку вы сможете посмотреть здесь

Взято с javascript-array.com

JS Скрипт определяющий высоту iframe

Вот, столкнулся с такой проблемой, нужен был js скрипт для корректного определения высоты <iframe>. Поискав в гугле и испробовав с десяток различных вариантов,но к сожалению, я так и не смог добиться желаемого результата. В итоге, абсолютно случайно изучая проект www.eqdkp.com наткнулся на скрипт решивший все мои проблемы. И так, непосредственно перед <iframe> располагаете данный скрипт:

<script type="text/javascript">

var iframeids=["boardframe"]
var iframehide="no"
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
else if (currentfr.contentWindow && currentfr.contentWindow.body.document.scrollHeight) //Opera?
currentfr.style.height = currentfr.contentWindow.document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

А затем идет сам <ifram>, обязательно с id=»boardframe», как пример:

<iframe onload="window.scrollTo(0,0)" src="http://teaseo.ru id="boardframe" allowtransparency="true" 
height="" width="99%" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>

Как использовать плагин постраничного вывода в Tablesorter

В последнем проекте над которым я работал, была необходимость постранично выводить таблицы данных, с возможностью сортировать. Конечно, постраничный вывод и сортировку можно было бы реализовать средствами PhP и MySQL, но я решил обратить свой взгляд на JQuery плагин Tablesorter. Я не буду заострять внимание на установке плагина и примерах его  использования, там все достаточно просто и тривиально. Подробное описание на русском вы сможете найти на сайте tablesorter.ru

Единственное, что не до конца описано, это как же использовать постраничный плагин. И так, подробная инструкция. Скачиваем последнюю версию jQuery отсюда, сохраним его как jquery.js. А так же скачиваем jquery.tablesorter.min.js и jquery.tablesorter.pager.js Со скриптами разобрались, нам понадобиться еще css

Так, копируем js скрипты в папочку js, а css в папочку css и подключаем их и добавляем скрипт для постраничного вывода :

<head>
<link rel="stylesheet" href="/css/table.css" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mytable")
.tablesorter({widthFixed: true})
.tablesorterPager({container: $("#pager")});
});
</script> </head>

Где mytable это id таблицы которую мы хотим использовать для постраничного вывода, a pager — это id тега <div> в котором у нас будет управление. Далее у нас идет таблица:

<table id="mytable" cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>Ф.И.О.</th>
<th>В работе</th>
<th>Ответственный</th>
<th>Адрес</th>
<th>Создана</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ф.И.О.</th>
<th>В работе</th>
<th>Ответственный</th>
<th>Адрес</th>
<th>Создана</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="gray">Иванов Петр Ивановичь</td>
<td class="gray">4д 20ч</td>
<td class="gray">Петров Иван Петровичь</td>
<td class="gray">вул. Машин, 5а</td>
<td class="gray">2011-03-31</td>
</tr>
</tbody>
</table>

Скачиваем картинки меню управления страницами картинки и записываем их в папку /images/table. А теперь добавляем меню управления, выглядеть она будет так:

<form>
<div id="pager" class="pager">
<img src="/images/table/first.png" class="first"/>
<img src="/images/table/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="/images/table/next.png" class="next"/>
<img src="/images/table/last.png" class="last"/>
<input type="hidden" class="pagesize" value="25" />
</div></form>

Вот и все