Add-on FireQuery – simpla integrarea si rularea lui jquery in pagina web in firefox

About this Add-on

FireQuery is a collection of Firebug enhancements for jQuery. Requires Firebug 1.3 or greater.

Features:

jQuery expressions are intelligently presented in Firebug Console and DOM inspector
attached jQuery data are first class citizens
elements in jQuery collections are highlighted on hover
jQuerify: enables you to inject jQuery into any page

Video cum putem sa-l folosim sursa youtube

Sursa Add-on gasiti aici

cum se pot trimite parametrii catre un javascript extern

Presupunem ca avem un fisier extern care executa niste functii de javascript, acesta este inclus in pagina noastra folosing tagurile corespunzatoare

< script type="text/javascript" language="JavaScript" src=".... < /script>

in acest script vrem sa trimitem niste parametrii

?page=general&id=123123

in tagul nostru de javascript extern scriem urmatoarele:

< script type="text/javascript" language="JavaScript" src="do_javascript.php?page=general&id=123123"/>

in fisierul do_javascript.php setam header-ul care seteaza fisierul ca fiind unul de javascript

Initializam parametrii primiti din URL in formatul lui javascript,



In asa fel putem sa folosim parametrii trimisi prin request.

serializarea anumitor campuri din pagina si trimitearea acestoara pe server

Folosind jQuery, se poate face minuni, asta stim cu totii 🙂

o noua minune descoperita de mine este urmatoarea:

am nevoie sa trimit catre server anumite campuri din pagina, o parte dintr-o forma, o parte din afara ei.
ce trebuie sa fac?

1) definesc o clasa pentru acele campuri, ca sa-i pot sa identific
ex:
< input type="text" name="first_name" class=”edit_field” value=”” / >

2) folosind functia .serializeArray() din libraria lui jQuery pentru a serializa rezultate in formatul JSON.

3) folosind ajax tot de la jQuery trimit parametrii serializati catre server, folosind metoda GET/POST

exemplu:

< script >
var fields = $(".edit_field").serializeArray();
// do update via ajax
$.ajax({
    type: "POST",
    url: "/users/update/",
    data:fields,
    success: function(data){}
});
< /script >

Fun with popups

Let’s say we have something like the next scenario:
1. We have a popup window for editing a record.
2. We need to select a value from a complex list of records, so we need another popup for this select.

Problem:
Our second popup is bigger then the first one, so we need to open it from our main page.
By now, we manage to do this really easy. The main issue is when trying to pass the selected value from the second popup to first one. Remeber that we opened it from the main page.

Solution:

In the first popup we will have a function for opening the second popup.
In this function we set a var childPage from the main page as a reference to our first popup.

function openPopup(){

window.parent.setHiddenPageChild(window);
window.parent.OpenModalWindow(params);


}

On the main page we have the setHiddenPageChild function

var childPage;
function setHiddenPageChild(child){

childPage=child;

}

and setRecordFromResponse function that will pass the selected value from the second popup to the first one.
This function will be called from the second popup like this: window.parent.setRecordFromResponse(response)

function setRecordFromResponse(response){

childPage.UseSelectedRecord(response);
//childPage served us well, so we will let it retire
childPage=null;

}

Response is the value selected in the second popup. It can be an id, a value or an object.
Now we use childPage that was initialized at a previous step. This is how we can have access to the functions of the first popup

Nice jQuery Popup Modal Dialog Plugin

One of the best jQuery plugins to display a popup modal window is fancybox

The usage is simple:

$(“.popup”).fancybox();
$.fancybox.resize();

and make sure your link has popup class. It will load the page pointed by your link href and resize as needed.

What if you display a form in the popup and want to reload it with an success message? Use this: $(‘#fancybox-content’).html(data); where data is the content you want to show in popup.

For example, using ajax to submit the form:

$.ajax({
url: ‘exemple.com’,
data: $(‘#form1’).serialize(),
type: ‘post’,
cache: false,
dataType: ‘html’,
success: function (data) {
$(‘#fancybox-content’).html(data);
$.fancybox.resize();
},
error:function (e,data) { alert(e); }
});

Jquery Calendar with time picker and translation of the content

The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these.

To create your own regional objects per region, use the setDefaults method to tie these together. Setting datepicker and timepicker regionals separtely will help ensure proper wording when only using datepicker or timepicker. Here is an example:

$.datepicker.regional[‘ru’] = {
closeText: ‘Закрыть’,
prevText: ‘<Пред', nextText: 'След>‘,
currentText: ‘Сегодня’,
monthNames: [‘Январь’,’Февраль’,’Март’,’Апрель’,’Май’,’Июнь’,
‘Июль’,’Август’,’Сентябрь’,’Октябрь’,’Ноябрь’,’Декабрь’],
monthNamesShort: [‘Янв’,’Фев’,’Мар’,’Апр’,’Май’,’Июн’,
‘Июл’,’Авг’,’Сен’,’Окт’,’Ноя’,’Дек’],
dayNames: [‘воскресенье’,’понедельник’,’вторник’,’среда’,’четверг’,’пятница’,’суббота’],
dayNamesShort: [‘вск’,’пнд’,’втр’,’срд’,’чтв’,’птн’,’сбт’],
dayNamesMin: [‘Вс’,’Пн’,’Вт’,’Ср’,’Чт’,’Пт’,’Сб’],
weekHeader: ‘Не’,
dateFormat: ‘dd.mm.yy’,
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ”
};
$.datepicker.setDefaults($.datepicker.regional[‘ru’]);

$.timepicker.regional[‘ru’] = {
timeOnlyTitle: ‘Выберите время’,
timeText: ‘Время’,
hourText: ‘Часы’,
minuteText: ‘Минуты’,
secondText: ‘Секунды’,
millisecText: ‘миллисекунды’,
currentText: ‘Теперь’,
closeText: ‘Закрыть’,
ampm: false
};
$.timepicker.setDefaults($.timepicker.regional[‘ru’]);

$(‘#example4’).datetimepicker({
timeFormat: ‘h:m’,
separator: ‘ ‘
});

documentation here

pagination on google custom search

in the google custom search results pagination will not keep the number of page just visited,
for example if you go to the page 3 and go back via browser button you will get results from the first page.

To keep visited page some custom modifications should be implemented:

step 1:
In the function searchCompleteCallback(), we need to add to all links parameter &page= with calculated page counter

ex:

if(back_page == '')
 back_page = 0;
else
 back_page = (back_page*10)-10;

with javascript append all links with this parameter.

…’&page=’+back_page;

step 2:

in the function google.setOnLoadCallback(function(){ set the parameter with google custeom search key,to use this application, and concatinate parameter with page number

var customSearchControl = new google.search.CustomSearchControl(‘gcs_customer_key’+’&start=’.$_GET[‘page’]);

This will point the results from the google custom serach to the right page number.

jqGrid – client-side solution loading data dynamically through Ajax callbacks

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

jqGrid’s Home page can be found here