JS part 2

//Get From JSON , FIlter , and put in drop down

$.getJSON('https://fly.com/stations/file.json', function (list) {

    list = list.filter(function (item) {

        return item.StationType == "A";

    });

    for (var i in list) {

        if (list.hasOwnProperty(i)) {

            optionDes += "<option value='" + list[i].StationCode + "'>" + list[i].StationName + " (" + list[i].StationCode + ")</option>";

        }

    }

    optionDes += "</select>";

    document.getElementById("origin").innerHTML = optionDes;

Enable Cors

JS cannot call Web api, it will get block, add code below to Web API web.config to enable cors.

<system.webServer>

  <modules runAllManagedModulesForAllRequests="true" />

  <!--<handlers>

     <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />

   </handlers>-->

  <httpProtocol>

    <customHeaders>

      <!--<add name="Access-Control-Allow-Origin" value="*" />

       <add name="Access-Control-Allow-Headers" value="*" />

       <add name="Access-Control-Allow-Methods" value="*" />-->

      <remove name="X-Powered-By" />

    </customHeaders>

  </httpProtocol>

</system.webServer>

Java script Obfuscator Tool

https://www.javascriptobfuscator.com/Javascript-Obfuscator.aspx

Alert allow copy

prompt("Copy to clipboard: Ctrl+C, Enter", crypted);

Encryption in Javascript

<script src="Scripts/tripledes.js"></script>

<script src="Scripts/mode-ecb.js"></script>

function encrypt() {

    var keyHex = CryptoJS.enc.Utf8.parse("mkadm11n");

    var crypted = CryptoJS.DES.encrypt("Message", keyHex, {

        mode: CryptoJS.mode.ECB,

        padding: CryptoJS.pad.Pkcs7

    });

}

Javascript, JQuery, CSS

Javascript 

• Program behavior of web pages, web browser.
• Interpreter language (no need compile). [C# is Compiled Language]
• Case Sensitive
• Use Client side processor to execute.
• Faster, not require to process in the web server and sent back with server bandwidth. 
• Reduce Load on servers.
• Disadvantage :
• Security issue, the java script can exploit by user.
• Many version, different version may have different result. and also different browser too.

JQuery - Make it easier to use Javascript on your website

CSS 

• Describe how HTML element should display.
• Development faster, Low maintenance, no need change in every page.
• Disadvantage : 
• Fragmentation, different dimensions with each browser and also device (PC and mobile)

• select all p elements inside a div element? div p
• select elements with class name "test"? .test
• select an element with id "demo"?  #demo
• border-width:10px 1px 5px 20px; (Top, Right , Bottom, Left)

Bootstrap

HTML - CSS - JavaScript

Make sure to add jQuery file above the bootstrap file.

<div class="container-fluid">

Full width container

<div class="container">

Fixed width container

btn Modifier
–Default
–Primary
–Success
–Info
–Warning
–Danger

Confirmation Box with Gridview Rows

function ConfirmationUpdate() 

{

    var totalRows = $('TABLE[id*=gvPerson] tr').length; //If Record = 2

    if (totalRows > 0) {

            return confirm('It Overwrite the Person update. Do you want to continue?');

    }

}

<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return ConfirmationUpdate()" OnClick="btnSave_Click" />

Grid Use this

OnClientClick="return confirm('Confirm to remove');"

OnClientClick='<%# Item.IsAlive ? "return confirm(\"OFF\");"  : "return confirm(\"ON\");" %>'
 OnClientClick='<%# Eval("ProviderName", "return confirm(\"Delete the datasource {0}?\");") %>'

Others Condition

if ($('INPUT[id*=hfChangeInactive]').val() == "Inactive

Check IE by Javascript

    function getInternetExplorerVersion()

    {

        var rv = -1; // Return value assumes failure.

        if (navigator.appName == 'Microsoft Internet Explorer')

        {

            var ua = navigator.userAgent;

            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

            if (re.exec(ua) != null)

                rv = parseFloat(RegExp.$1);

        }

        return rv;

}

    function checkVersion()

    {

var msg = "The site is best viewed with Internet Explorer Version 6 and above.\n\nThe page might not be properly displayed if viewed on your current browser.";

      

var ver = getInternetExplorerVersion();

        if (ver > -1)

        {

            if (ver >= 6.0)

                msg = ""

        }

        if(msg != "")

        {

            alert(msg);

        }

}

Javascript and Jquery

Add JQUERY and CSS Header

<script src="Scripts/jquery-2.0.3.min.js"></script>

<script src="Scripts/jquery-ui-1.10.3.min.js"></script>

<script src="Scripts/configSetting.js"></script>

<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />

Way to find Javascript Class : $(".Config")

2 way to find Javascript ID :

1. $("a[id*=InsertLink]")
2. $("#InsertLink")

INPUT	Button | checkbox | hidden | image | radio | DateTime | Textbox
a	Link
SELECT	DropDown

JQUERY METHOD AND CODE

Click trigger ( can use this in following as an object)	$("INPUT[id*=SelectCheck]").click(function () { }
Change trigger	$("INPUT[id*=radStatus]").change(function () {
Check Box set True (attr – before JQuery 1.6 / prop – after JQuery 1.6)	$("INPUT[id*=SelectCheck]").prop("checked", true);
Set (true|false to set disabled | enabled)	$("INPUT[id*= txtname]").removeAttr("disabled"); $("INPUT[id*=txtname]").attr("disabled", true);
Dropdown Select Index	$("SELECT[id*=ddlCountry]")[0].selectedIndex = 0;
Find and get Value	var app = $(this).find(INPUT [type=hidden][id*=App]').val();
Get value Get Checkbox / radio value	$(this).val(); $("INPUT[id*=rbEffective]:checked").val();
Set Value	$(this).val("Inactive");
hide / show	$('#countryFieldSet').hide();   / .show();
Link URL	location.href = Country.aspx';
Get  Table Column	var getNameCol = $("TABLE[id*=gvPeople] tr").find('th:nth-child(2)').text();
DropDown or Text Change	$("INPUT[id*=txtName],SELECT[id*=ddlGender]").change(function () {
Parse Float (sometimes + is for string, u need to convert to numeric 1st)	var price = parseFloat($("INPUT[id*=txtPrice]").val()); | parseint
Change Image	$('#Image1').attr('src', x);
Modal Popup	$('#myModal').modal('show');
Function with Param	function modalup(x, y) { } onclick='modalup("<%# Eval("ImageURL","studentImage/{0}") %>","<%# Eval("Age")%>");'>
Date Format	<script src="scripts/jquery.dateFormat-1.0.js"></script> $.format.date(new Date, 'dd/M/yy hh:mm:ss'));
Pass self and target to function ($this must at onclick)	<input type="checkbox" name="search_rule" onclick="ControlList($(this),'ListTransMatchedRule')" /> function ControlList(checkbox, list) {     if (checkbox.is(':checked')) {        $("#" + list).attr("disabled", true);        $("#" + list)[0].selectedIndex = -1;     }     else {        $("#" + list).attr("disabled", false);     } }
Foreach Tr with specific Class	$("Table[id=tblCust] tr[class='content']").each(function (tr)
Get Attribute (Id, name, rowspan)	$(this).attr('id');
Split string	var rowArray = rowID.split("_");
Hide & Show	$(this).hide(); | show();
Hide Checking	if (tdDataType.is(':hidden'))
Insert | add td to tr (this is TR)	tdData.prependTo($(this)); | tdData.appendTo($(this));
Find (like) start from  | eq(0) is first item	$("Table[id=tblCust]").find("tr[id^='" + prow + "']").eq(0);