corelogicimpl: 2016

Saturday, January 30, 2016

Object as a key value as map

<!DOCTYPE html>
<html>
<body>

<p>Creating a JavaScript Variable.</p>

<p id="demo"></p>

<script>
var car ={};
car["key"]="ab";
car["key"]="ab1";
car["key2"]="ab2";
car["key3"]="ab3";
car["key4"]="ab4";
alert(car["key"]);
delete car["key"];
alert(car["key"]);
</script>

</body>
</html>
data = {};
    jQuery.each(jQuery(form).serializeArray(), function() {
        data[this.name] = this.value;
    });

Jquery selector for table manipulation

table.itemtable > tbody > tr
tr.rowclicked
rowclicked is class name

div > p and selecting all selected rows

div > p selects only the <p> elements that are immediate children of a <div>.

div > p

will select this paragraph:

<div>
    <p>This is a paragraph</p>
</div>

but will not select this paragraph:

<div>
    <table>
        <tr>
            <td>
                
            </td>
        </tr>
    </table>
</div>

All selected rows at a time can be returned using this

.serializeArray



<form>



  <div><input type="text" name="a" value="1" id="a"></div>



  <div><input type="text" name="b" value="2" id="b"></div>



  <div><input type="hidden" name="c" value="3" id="c"></div>



  <div>



    <textarea name="d" rows="8" cols="40">4</textarea>



  </div>



  <div><select name="e">



    <option value="5" selected="selected">5</option>



    <option value="6">6</option>



    <option value="7">7</option>



  </select></div>



  <div>



    <input type="checkbox" name="f" value="8" id="f">



  </div>



  <div>



    <input type="submit" name="g" value="Submit" id="g">



  </div>



</form>

 

 

$( document ).ready( function( ) {
 
 
 
 $( "form" ).submit(function( event ) {
    console.log( $( this ).serializeArray() );
    event.preventDefault();
  });

Saturday, January 23, 2016

.find

find with selectors

.find('tbody tr')
.find('tr th')
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var content = jQuery( '#b');
    content.find("#a").html("<p> Hello </p>")
content.css('display','block');
});
</script>
</head>

<body class="ancestors">body (great-grandparent)
<div id="b" style="width:500px;">div (grandparent)
    <ul>ul (direct parent)
      <li>li (child)
        <span>span (grandchild)</span>
      </li>
    </ul>
<div id="a"> </div>
</div>
</body>

</html>

.delegate()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").delegate("p", "click",function(){
        $("p").css("background-color", "pink");
    });

$("#a").delegate("p", "click",function(){
        $("p").css("background-color", "red");
    });
});
</script>
</head>
<body>

<div style="background-color:yellow;">
<p>This is a paragraph inside a div element.</p>
</div>

<div id="a">
<p>mm</p>
</div>

<p>This is a paragraph.</p>

</body>
</html>

for multiple column .page classes
jQuery(document).delegate('.column .page', 'click', function(event) {

});

.closest

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $( "li.item-a" )
.closest( "ul" )
.css( "background-color", "red" );
});
</script>
</head>
<body>

<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
</li>
<li class="item-iii">III</li>
</ul>

</body>
</html>

Adding Tab

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
    color: blue;
}
span {
    color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div id="tabs">
<ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>

<div id="container">
    <img src="notification.png" alt="" />

    <div id="containera">

</div>
</div>
<script>
$( "#tabs" ).tabs();

$( "#containera").text( 1);

loadTab();
tabClose();

function loadTab(){
    var tabs = jQuery( "#tabs" ).tabs({    heightStyle: 'fill'});
}

function tabClose() {
    tabs.delegate("span.ui-icon-close", "click", function() {



      var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );



      $( "#" + panelId ).remove();



      tabs.tabs( "refresh" );

});
}
</script>

</body>
</html>

.load

@RequestMapping("/notification")
    @ResponseBody
    public String countNotification(HttpServletRequest request) throws Exception {
        Notify not = Notify.get();
        int notification = 4;
        not.put("size", notification);
        return not.toString();
    }

var notificationCount = function() {
    jQuery('.js-countnot').load('notification', function(response, status, xhr) {

        var resp = JSON.parse(response);
        $( "#containera").text( resp.size);
    }
    });
}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
    color: blue;
}
span {
    color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="container">
    <img src="notification.png" alt="" />

    <div id="containera">

</div>
</div>
<script>

notificationCount();
</script>

</body>
</html>

.data()

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.data demo</title>
<style>
div {
    color: blue;
}
span {
    color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div>
The values stored were
<span></span>
and
<span></span>
</div>
<div style="background:notification.png no-repeat;height:imageheight px;width:imagewidth px">
</div>
<div id="container">
    <img src="notification.png" alt="" />

    <div id="containera">

</div>
</div>
<script>
var div = $( "div" )[ 0 ];
jQuery.data( div, "test", {
first: 16,
last: "pizza!"
});
$( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last );
$( "span:last" ).attr('data-count', 1);
$( "#containera").text( 1);
</script>

</body>
</html>

Friday, January 22, 2016

prop()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){

if($('#chkRemember').prop('checked')){
$("#hide").hide();

}
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<input type="checkbox" checked id="chkRemember"/><label for="chkRemember" class="chkRemember"> Remember me </label>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

insertAfter,append(),appendTo()

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>insertAfter demo</title>
<style>

</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p id =""mainview> Main view </p>
<div id="foo">Login Page </div>

<script>
$( "p" ).insertAfter( "#mainview" );
$( "#foo" ).append( "<p>Framework View Appended By user defined view </p>" );
</script>

</body>
</html>

Hide() and Show()

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").hide();
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
         $("#show").hide();
$("#hide").show();
    });
});
</script>
</head>
<body>

<button id="hide">Welcome to login screen </button>
<button id="show">Welcome to Registration Screen</button>

</body>
</html>

Wednesday, January 20, 2016

.next()



<!doctype html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>next demo</title>



  <style>



  span {



    color: blue;



    font-weight: bold;



  }



  button {



    width: 100px;



  }



  </style>



  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>



</head>



<body>



 



<div><button disabled="disabled">First</button> - <span></span></div>



<div><button>Second</button> - <span></span></div>



<div><button disabled="disabled">Third</button> - <span></span></div>



 



<script>



$( "button[disabled]" ).next().text( "this button is disabled" );



</script>



 



</body>



</html>

.prev()



<!doctype html>



<html lang="en">



<head>



  <meta charset="utf-8">



  <title>prev demo</title>



  <style>



  div {



    width: 40px;



    height: 40px;



    margin: 10px;



    float: left;



    border: 2px blue solid;



    padding: 2px;



  }



  span {



    font-size: 14px;



  }



  p {



    clear: left;



    margin: 10px;



  }



  </style>



  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>



</head>



<body>



 



<div></div>



<div></div>



<div><span>has child</span></div>



<div></div>



<div></div>



<div></div>



<div id="start"></div>



<div></div>



<p><button>Go to Prev</button></p>



 



<script>



var $curr = $( "#start" );



$curr.css( "background", "#f99" );



$( "button" ).click(function() {



  $curr = $curr.prev();



  $( "div" ).css( "background", "" );



  $curr.css( "background", "#f99" );



});



</script>



 



</body>



</html>

.children



<ul class="level-1">



  <li class="item-i">I</li>



  <li class="item-ii">II



    <ul class="level-2">



      <li class="item-a">A</li>



      <li class="item-b">B



        <ul class="level-3">



          <li class="item-1">1</li>



          <li class="item-2">2</li>



          <li class="item-3">3</li>



        </ul>



      </li>



      <li class="item-c">C</li>



    </ul>



  </li>



  <li class="item-iii">III</li>



</ul>

 

$( "ul.level-2" ).children().css( "background-color", "red" );

$.map

.html(),.attr()

$('.id').html("id="1");
$('#img').attr('src',image);

$.each

// call to server
$.get(index.action,function(res){

if result list of object from server
result = $.parseJSON(res);

eachobj is sinlge object that is contained in list
$.each(result,function(i,eachobj){

id=eachobj.id;

});

});

parseJSON

// call to server
$.get(index.action,function(res){

if result list of object from server
result = $.parseJSON(res);

data = result[0];
showid(data.id);

});

$.get

// call to server
$.get(index.action,function(res){

if result list of object from server
result = $.parseJSON(res);
if the size of list return from server is 3then
data = result[0];
data1 = result[1];
data2 = result[2];
data3 = result[3];
showid(data.id);
showid(data1.id);
showid(data2.id);
showid(data3.id);

});

Friday, January 15, 2016

Array Inside array

<p style="line-height: 18px; font-size: 18px; font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<script>

var secure = {
                slot : "",
                Secret : "",
               Token : "",
                access: "",
                service : {
                    Method : ""
                }
            };

keyvaluecoll = [];
            keyvaluecoll.push(['key1', 'value1']);
            keyvaluecoll.push(['key2','value2']);
            keyvaluecoll.push(['key3', 'value2']);
            keyvaluecoll.push(['key4', 'value2']);
            keyvaluecoll.push(['key5',secure.slot]);
            var d=keyvaluecoll[0];
            s=d[0];
            window.alert(s);

</script>
</p>

Access Control list in javascript

<p style="line-height: 18px; font-size: 18px; font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<div id="a"></div>
<script>
var users=[];
var user={name:"abishkar",email:"abishkar"};
users=[user];
users.push(user);
window.alert(users[0]);
var c=document.getElementById("a");
j=document.getElementById("a")
j.innerHTML = "New text!";

app = {
    location : 'abc',
   api : 'abc',
   owner :null,
   users:[],
   groups:[],
   roles:[],
   documents:{},
   customer:null
}
function loadgroups(data){
var c=data.groups;
var objgr=new groups("","","","","","","unauthorized");
var objgr1=new groups("","","","","","","authorized");
c.push(objgr);
c.push(objgr1);
loadingroups(c);

}
today = new groups().setAcl(null);
// load groups from data object
loadgroups(app);
function loadingroups(data){

    for(i=0; i<data.length; i++){

        data[i].setAcl(null);
         window.alert("acl value"+data[i].acl);
    }
}
position();
function position(){
       getCurrentPosition(function(position){
        window.alert("first callback"+position);
       },function(){
        window.alert("second callback");

       });
}
function getCurrentPosition(callback,callback1){
callback();
callback1();
}

function Data(position,map,clickable,title,animation,icon){
this.position=position;
this.map=map;
this.clickable=clickable;
this.title=title;
this.animation=animation;
this.icon=icon;

}

function groups(position,map,clickable,title,animation,icon,acl){
this.position=position;
this.map=map;
this.clickable=clickable;
this.title=title;
this.animation=animation;
this.icon=icon;
this.acl=acl;
this.setAcl = function (name) {
        this.acl = acl;
    };
}

</script>
</p>

Objects and Callback

<p style="line-height: 18px; font-size: 18px; font-family: times;">
Click "<i>Load samples</i>" to view and edit more JS samples.<br>
<br>
Labyrinth generated with JavaScript:<br><br>
<div id="a"></div>
<script>
var users=[];
var user={name:"abishkar",email:"abishkar"};
users=[user];
users.push(user);
window.alert(users[0]);
var c=document.getElementById("a");
j=document.getElementById("a")
j.innerHTML = "New text!";

app = {
    location : 'abc',
    api : 'abc',
    owner :null,
    users:[],
    groups:[],
    roles:[],
    documents:{},
    customer:null
}
position();
function position(){
        getCurrentPosition(function(position){
        window.alert("first callback"+position);
        },function(){
        window.alert("second callback");

        });
}
function getCurrentPosition(callback,callback1){
callback();
callback1();
}

function Data(position,map,clickable,title,animation,icon){
this.position=position;
this.map=map;
this.clickable=clickable;
this.title=title;
this.animation=animation;
this.icon=icon;

}

var minidata = new Data({
                position: "userLocation",
                map: "s",
                clickable: false,
                title:"This is your location.",
                animation : "paint",
                icon: 'image'
            });

var minidata1 = new Data(
            "userLocation",
            "s",
            false,
                "This is your location.",
        "paint",
                'image'
            );

</script>
</p>