70-480: Įvairūs AJAX

AJAX apibrėžime naudojami autentifikacijai:

password
username

APIs:
XMLHttpRequest
Geolocation - naudojamas geografinei userio pozicijai

Geolocation API

getCurrectPosition - paima dabartinę poziciją
watchPosition -grąžina dabartinę poziciją ir rodo video

Geolocation naudojamas iPhone ir GPS.

http://www.w3schools.com/html/html5_geolocation.asp

Klaidų gaudymo blokas:

try
catch(e)
finally

Draggable elements

Jei norime, kad elementai būtų draggable, reikia pridėti atributą draggable = true

DataTransfer.setData() - siunčia duomenų tipą ir reikšmę tempimui (?)

function drag(ev){
 ev.dataTransfer.setData("text", ev.target.id);
};

onDragOver - nurodo, kur tą reikšmę galima dėti. Elementai negali būti dedami ant kitų elementų, tam naudojama:
event.preventDefault();

Kai elementas padedamas, iškviečiamas metodas onDrop.

function drop(ev){
 ev.preventDefault(); - naršyklė atidaroma default gaudymui (?)
 var data = ev.dataTransfer.getData("Text"); - paimami persiųsti duomenys
 ev.target.appendChild(document.getElementById(data));
};

Prototype

Prototype savybė leidžia pridėti metodus ar savybes objektui.

Pridėti savybę:

function employee(name,jobtitle,born)
{
this.name=name;
this.jobtitle=jobtitle;
this.born=born;
}

var fred=new employee("Fred Flintstone","Caveman",1970);
employee.prototype.salary=null;
fred.salary=20000;

Pridėti metodą:

Customer.prototype.GetCommission() = function()
{
 alert('payroll');
}

http://www.w3schools.com/jsref/jsref_prototype_string.asp

Error.prototype

Error.prototype - pristatomas klaidos konstruktorius.

Error prototype turi šias savybes:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype

CSS legal color values

Colors in CSS can be specified by the following methods:

• Hexadecimal colors
• RGB colors - rgb(red, green, blue), reikšmės nuo 0 iki 255, procentais - 0% iki 100%. PVZ.: rgb(0,0,255) ir rgb(0%,0%,100%).
• RGBA colors - išplėstas RGB, pridedant alpha savybę: rgba(red, green, blue, alpha). alpha parametras nurodo skaitinę reikšmę nuo 0.0 (visiškai permatoma) ir 1.0 (visiškai nepermatomas).
• HSL colors - nurodo cilindrinius koordinačių atspalvius, hsl(hue - atspalvis, saturation - sodrumas, lightness - lengvumas). #p1 {background-color:hsl(120,100%,50%);} / * green */
• HSLA colors - išplėstas HSL, pridedant alpha savybę.
• Predefined/Cross-browser color names - yra apibrėžta 140 spalvų vardų: http://www.w3schools.com/cssref/css_colornames.asp

Šešioliktainiai spalvų kodai: #RRGGBB, kur RR (red - raudona), GG (green - žalia) and BB (blue - mėlyna). Visos reikšmės gali būti nuo 0 iki FF.

http://www.w3schools.com/cssref/css_colors_legal.asp

Callback gražinti XML duomenis

calback.call(httpRequest.responseXML);

call - naudojamas iškviesti objektą. call([thisObj[, arg1[, arg2[, argN]]}])

responseXML - grąžina duomenis kaip XML duomenis

XMLHttpRequest -leidžia atnaujinti puslapio dalis, neperkraunat puslapio.

http://www.w3schools.com/dom/dom_http.asp

input type="email"

SVG - interactive scalable vector graphic

transform - apibrėžia sąrašą transformacijų

setInterval - įvertiną išraišką specialiam intervale (milisekundėmis)

myGraphic.setAttribute("currectScale", 1.5)

JQuery show() vs. visible

$('#btnEdit').show()

$(selector).show(speed,easing,callback)

Su display:none naudoti show()? show(), hide() dirba su display savybe, o ne visibility

Matomi elementai yra tie, kurie:

• nenurodyta display: none
• nėra tipo type=hidden
• plotis ir ilgis nėra 0
• nėra paslėpto elemento dalis

http://www.w3schools.com/jquery/eff_show.asp

autocomple

autocomplete atributas nurodo, kad laukas gali būti užpildytas automatiškai???

< input type = 'password' required autocomplete = 'off' />

JQuery pažymėti visus header elementus

$(":header")

CSS text-transform property

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

hyphens

hyphens - teksto lygiavimas, kai į eilučių pabaigą žodis dalijamas ir atskiriamas brūkšneliu

 hyphen geriau nei word-break.

CSS3 hyphen veikia nuo Firefox 6 su anglų kalba.

SVG

SVG yra kalba, apibrėžianti 2D grafiką XML.

Canvas	SVG
Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games	Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications

$.ajax settings: accepts, contentType, dataType

accepts - nurodo, kokio tipo atsakymus leidžia grąžinti

contentType - pagal nutylėjimą 'application/x-www-form-urlencoded; charset=UTF-8'

dataType - galimos reikšmės xml, json, script, html

dataFilter - apvalymo, filtravimo funkcija, kad gautume reikiamus "švarų" atsakymą.

getResponseHeader - headerio informacija apie atsakymą, pvz., 

xmlhttp.getResponseHeader("Server")

xmlhttp.getResponseHeader("Content-Type")

xmlhttp.getResponseHeader("Content-Length")

xmlhttp.getResponseHeader("Last-Modified")

JQuery DOM manipulation

http://www.tutorialspoint.com/jquery/jquery-dom.htm

http://jqfundamentals.com/chapter/traversing-manipulating

JQuery: kaip iškviesti WebService metodą sinchroniškai ir nusiųsti parametrus JSON formatu?

 $.ajax({
                             type: "POST",
                             url: sServiceURL + "/reorderRecord",
                             async: false,
                             data: '{ ordNew:' + JSON.stringify(reOrd) + '}',
                             contentType: "application/json; charset=utf-8",
                             dataType: "json",
                             success: function (msg) {
                                 alert("duomenys perduoti sekmingai");
                             },
                             error: function (xr) {
                                 alert(xr.responseText);
                             }
  });

JQuery: kaip iškviesti webService metodą sinchroniškai?

 window.onbeforeunload = function () {

            var val = false;

            $.ajax({
                type: "POST",
                url: sServiceURL + "/checkRecordsStatus",
                async: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                 
                    if (msg.d == true) {
                        val = true;
                    };

                }

            });

            if (val == true) {
                return 'Turite neišsaugotų testavimo įrašų!';
            }

        };

Protected Sub Page_PreRender(sender As Object, e As EventArgs) Handles Me.PreRender

        ScriptManager.RegisterStartupScript(Me, Me.GetType, "Service", "sServiceURL='" & VirtualPathUtility.ToAbsolute("~/ServicesPath.asmx") & "';", True)

    End Sub

JQuery: unload event, JavaScript: onbeforeunload event

Problema: pagauti įvykį, kad su window.open atidarytas langas uždaromas ne mygtuko paspaudimu, o pasirinkus dešiniajame viršutiniame kampe esantį mygtuką.

Sprendimas: naudoti unload event - lango užsarymo metu

 $(window).unload(function () {
            alert("Handler for .unload() called.");
        });



Arba naudoti onbeforeunload, prieš uždarant langą:

window.onbeforeunload = function () {
            return 'You have unsaved changes!';
        }

http://api.jquery.com/unload/ - JQuery įvykis

http://help.dottoro.com/ljhtbtum.php - onbeforeunload IE įvykis

http://help.dottoro.com/ljfvvdnm.php - visi įvykiai

JQuery UI: Dialog savybė AppendTo

Problema: sukūrėme dialogo langą su JQuery dialog. Dialogo lange yra checkbox. Pakeitus checkbox reikšmę, langas užsidaro ir visas puslapis persikrauna.

Sprendimas: naudoti appendTo savybę. Tam reikia visą HTML kodą, kuriame aprašytas dialogas, įdėti į papildomą div elementą ir to div ID nurodyti AppendTo.

JQuery:

 $(document).ready(function () {

            $("#dvOrder").dialog({
                appendTo: "#dvContainer",
                autoOpen: false,
                modal: true,
                width: 800,
                height: 320,
                resizable: false,
                title: "Užsakymo patvirtinimas",
                buttons: [
                    {
                        text: "Tvirtinti",
                        click: function () {
                            SSService.ConfirmOrder(document.getElementById("txtDate").value, document.getElementById("ddlHours").value, document.getElementById("ddlMin").value, document.getElementById("tbPlaceFrom").value, document.getElementById("tbPlaceTo").value, document.getElementById("tbNameSurname").value, $('#cbMeet').val(),$('#tbInfo').val(), $('#tbInfo2').val(), document.getElementById("hfOrderID").value, function (result) {
                                if (result) {

                                    var rowID = document.getElementById("hfrowID").value

                                    if (rowID != "") {
                                        var oTR = $("#" + rowID).get(0);
                                        oTR.cells[0].innerText = "";
                                        if ((result.MeetDate + " " + result.MDHours + " : " + result.MDMin).trim != ":") {
                                            oTR.cells[2].innerText = result.MeetDate + " " + result.MDHours + " : " + result.MDMin;
                                        };
                                        oTR.cells[3].innerText = result.MeetFrom;
                                        oTR.cells[4].innerText = result.MeetTo;
                                        oTR.cells[5].innerText = result.NameSurname;
                                        oTR.cells[6].innerText = result.MeetInAirport;
                                        oTR.cells[7].innerText = result.FlightFrom;
                                        oTR.cells[8].innerText = result.Note;
                                        oTR.cells[10].innerText = result.Status;
                                        oTR.cells[11].innerText = result.TaxiOrderNo;
                                    };
                                };
                            });


                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Atmesti",
                        click: function () {

                         //kodas
                        }
                    }
                ],
                open: function () {
                    document.getElementById("tbPlaceFrom").focus();
                }
            });

         

        });


HTML kodas:
< div id = "dvContainer" >
        < div id="dvOrder" style="display: none" >
         
        < / div >
  < / div >
       

How to call web service synchronously with JavaSript in ASP.NET

 function gvUpdateHeader(sUserLang) {
            var gv = document.getElementById("gvsummary");

            if (gv != null) {
             
                var strid = 2;

                for (var i = 1; i < gv.rows[0].cells.length; i++) {
                    getStringByLang(sUserLang, strid, i, gv);
                    strid++;
                }

            };

        };

        function getStringByLang(sUserLang, strid, i, gv) {

            VIService.GetString(sUserLang, strid, function (result) {
                if (result) {

                    gv.rows[0].cells[i].innerHTML = result;
                };
            });
        }

CalendarExtender using JQuery

Problema: per JQuery CalendarExtender priskirti datos reikšmę taip, kad ir TextBox'e, ir kalendoriuje matytųsi teisinga data.

Sprendimas: Firstly you need to ensure that the Calendar Extender, as seen below in Figure 1, has a BehaviorID value set.

< label for = "dateLastCheckedTextBox" class="textBoxLabel" >Date Last Checked < / label >


< asp : TextBox ID="dateLastCheckedTextBox" runat="server" CssClass="textBox" / >

< asp : CalendarExtender id="dateLastCheckedCalendarExtender" BehaviorID="dateLastCheckedCalendarExtender" runat="server" TargetControlID="dateLastCheckedTextBox" Format="dd/mm/yyyy" EnabledOnClient="true" OnClientShown="checkDate" / >

  Then, assign the OnClientShown event of the CalendarExtender to the checkDate function shown below, setting the date using the set_selectedDate accessor.  

    function checkDate(sender, args) {


var currentDate = $("input[id$='dateLastCheckedTextBox']:visible").val();

var calendarBehavior = $find("dateLastCheckedCalendarExtender");

calendarBehavior.set_selectedDate(getDateFromUkDateString(currentDate));

}

function getDateFromUkDateString(dateStr) {

dateStr = dateStr.split("/");

if (dateStr.length == 1)

return null;

else

return new Date(dateStr[2], dateStr[1] – 1, dateStr[0]);

}  

http://gordonduthie.net/2010/04/14/setting-the-value-of-a-calendarextender-using-jquery/

JQuery: didelės lentelės vaizdavimas

Problema: didelė lentelė, kai norima, kad pirmas stulpelis būtų fiksuotas.

Sprendimas:

http://www.datatables.net/extras/fixedcolumns/

Pritaikant šią biblioteką svarbu, kad lentelės sutruktūra būtų būtent tokia, kokios reikalaujama http://www.datatables.net/usage/. Tam reikės papildomai į VB ASP.NET įdėti kodą, kuris nurodo, kur DataGrid'e bus headeris

< asp:DataGrid GridLines="Both" ID="dgTrainingMatrix1" runat="server" AutoGenerateColumns="true"

 UseAccessibleHeader="True"

< / asp:DataGrid >
Protected  Sub dgTrainingMatrix_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgTrainingMatrix.PreRender
 If dgTrainingMatrix.Rows.Count > 0 Then
dgTrainingMatrix.HeaderRow.TableSection = TableRowSection.TableHeader
   

End If


End Sub

Kadangi lentelės celėse yra paveiksliukai, tai kad jie būtų intepretuojami kaip HTML kodas, o ne tekstas, papildomai reikia: 

Protected Sub dgTrainingMatrix_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles dgTrainingMatrix.RowDataBound
If (e.Row.RowType = DataControlRowType.DataRow) Then
For i = 1 To (e.Row.Cells.Count - 1)
e.Row.Cells(i).Text = Server.HtmlDecode(e.Row.Cells(i).Text)

Next
End If
End Sub

 

DataGrid dinamiškai užpildomas taip:

Dim objDataTable As New System.Data.DataTable

objDataTable.Columns.Add(GetString(372), String.Empty.GetType())



For Each oc In oCources

Dim trCol As DataColumn = objDataTable.Columns.Add(oc.TrDTitle, String.Empty.GetType())

Next

For Each empl In oEmpl

Dim strList1 = New List(Of String)

strList1.Add(empl.NameLast & " " & empl.NameFirst)

For Each oc In oCources

Dim findCourse = False

For Each ot In otm

If (ot.tv.TrEmpID = empl.Id And ot.tv.TrDescID = oc.TrDID And findCourse <> True) Then

If ot.tv.TrIWILastTrainingIssueNo IsNot Nothing And ot.tv.TrIWIIssueNo IsNot Nothing And ot.tv.TrIWILastTrainingIssueNo > ot.tv.TrIWIIssueNo Then

strList1.Add("< img src='../ images/ TrainingMatrix/ matrix_update.gif' alt='' />")

ElseIf ot.tv.TrRefreshDate IsNot Nothing And ot.tv.TrRefresh IsNot Nothing Then

If (ot.tv.TrRefreshDate - Today.Date).Value.TotalDays < 0 Then

strList1.Add("< img src= '../ images/ TrainingMatrix/ matrix_update.gif' alt=' '/>")

Else

strList1.Add("< img src= '../images/ TrainingMatrix/ matrix_good.gif' alt=''/>")

End If

Else

strList1.Add("< img src='../ images/ TrainingMatrix/ matrix_good.gif' alt= '' />")

End If

findCourse = True

End If

Next

If findCourse <> True Then

strList1.Add("< img src='../ images / TrainingMatrix / matrix_bad.gif' alt = ' ' />")

End If

Next

objDataTable.Rows.Add(strList1.ToArray)

Next

If objDataTable.Columns.Count > 0 Then

Dim objDT As System.Data.DataTable = objDataTable

Me.dgTrainingMatrix.DataSource = objDT

Me.dgTrainingMatrix.DataBind()

End If

Galutinis rezultatas:

JQuery: listbox elemento paėmimas

var selCourse = $("#lstSelectedCourse").get(0); - cia su get(0) paimame, jeigu žinome, kad tikrai bus tik 1 toks elementas. Paprastai jquery pateikia sąrašą elementų, kurie tenkina selektorių.

for (var k = 0; k < selCourse.options.length; k++) {

 alert(selCourse.options[k].value);

 }

Kaip apsaugoti paveikslėlius nuo parsiuntimo su JQuery

1 $(document).ready(function(){

2	$(document).bind("contextmenu",function(e){

3	return false;

4

});

5

});

http://www.skaitykit.lt/jquery-atjungiame-desiniji-peles-klavisa-tinklalapio-lankytojams.htm