Difference between jQwidgets and ExtJs

Good morning folks,

I have to work for a new project that works with jQwidgets. When i open that link, my mind walk through with old glance which i had earlier with ext js. Immediately i opened it. I felt ext js is more advanced and rich in interface. First question that flows in my mind is why not we shud use ext js instead of jQwidgets. I immediately posted this to my TL. He simply said its an mvc framework. Again question rose why we shud not use it? I thought to better look in web for the answers..Did that immediately..Result is shown below..

JQWIDGETS to be extremely easy and quick and the support provided on the Forum is excellent.

EXTJS on the other hand, is also a powerful product which boasts its architect EDI. But does also make simple tasks slightly difficult and the support/responses on their forums can be very slow or none existent…

Actually, JQuery etc are not frameworks but only libraries.So, that is the difference – solutions based on framework are faster to develop, but usually works slower… until app grows large – and then it becomes faster, because framework allows higher-level optimizations.

If your requirements are simple, publically accessible, and being done by web developers, then use jQuery.

If this is a more complex situation, you have more hard core engineers, behind a username/password, then I suggest ExtJS.

The most obvious difference is that jQuery uses GPL and MIT license, meaning you can use the library for free without much worries; On the other hand, Ext Js is developed by Sencha and is commercially licensed and it is not cheap.

jQuery, at its core (which is small and condense) is a library for DOM manipulation, outside of that, jQuery has a vast repertoire of plug-ins, all free yet with varying qualities; Ext Js provides a comprehensive framework that includes a rigorous class system, a set of utilities that deals with string, date, array etc.,., a complete set of UI controls, most impressive of them being Grid. With Ext JS 4, it also provides dynamic loading and MVC architecture.

jQuery is small; Sencha is heavy-set.

Finally we will leave the option to user plate..technology should be decide by the developer based on projects. Good Luck 🙂

 

For more:

http://thoughtsonscripts.blogspot.in/2013/03/ext-js-vs-jquery.html

Comparision of javascript frameworks

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

How to parse xml using jquery

Index.html:

<html>

<head>
	
</head>
<body>
<div id="content"></div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
 
 
function parse(document){
  $(document).find("book").each(function(){
    $("#content").append(
	'<p>ID: '+$(this).attr('id')+
	'<br /> Title: '+$(this).find('title').text()+
	'<br /> Author: '+$(this).find('author').text()+
	'</p>'
	);
  });
}
 
 
 
  $.ajax({
    url: 'read.xml', // name of file you want to parse
    dataType: "xml",
    success: parse,
	error: function(){alert("Error: Something went wrong");}
  });
});
</script>
</body>
</html>

read.xml:

<?xml version=”1.0″ encoding=”UTF-8″?>

<library>
	<book id="5412" num="19191919">
		<title>Java Script</title>
		<author fname="abc" lname="xyz">Abc Xyz</author>
		<publisher>Sky Publishers</publisher>
		<price>545 rupees</price>
	</book>
	<book id="2893" num="3636363">
		<title>HTML5</title>
		<author fname="indian" lname="john">Indian John</author>
		<publisher>Sky Publishers</publisher>
		<price>855 rupees</price>
	</book>
</library>

Crap data: Please not to look into this..i have been trying in different ways..the below code is just a crap. pls ignore.thanks

// $(document).find(“seat”).each(function () {
/* $(“#content”).append(
‘<p>Num: ‘+$(this).attr(‘num’)+
‘<br /> Game: ‘+$(this).find(‘game’).attr(‘no’)+
‘ Result: ‘+$(this).find(‘game’).attr(‘result’)+
‘</p>’
);*/
var $kids = $(obj).find(“BJ_BetBehindHistory”).children(“seat”);
// seat num and id is displayed here
for (i = 0; i < $kids.length; i++) {
var foo = $kids[i];
//for (var j = 0; j < foo.attributes.length; j++) {
var attr = foo.attributes[0];
console.log(attr.name + ” = ” + attr.value);
seatnum = attr.value;

if (seatnum == -1) {
var dealer = $kids[i];
// var test = dealer.children(“game”)
console.log($(obj).find((“seat”).attr(‘num’) == seatnum));
console.log(dealer);
}
// game no and result code is displayed
/* var $game = $(document).find(“seat”).children(“game”);
for (k = 0; k < $game.length; k++) {
var boom = $game[k];
for (var l = 0; l < boom.attributes.length; l++) {
var attr = boom.attributes[l];
console.log(attr.name + ” = ” + attr.value);
}

}*/

// end of game no and result displat
//}
//console.log(foo);
function parse(obj) {
console.log(obj);
console.log($(“seat[num=’0′]”,obj));

}

$(“seat[num=’0′]”, obj).each(function (ind, val) {
console.log(ind, val);

 

Rotate a div like circle onclick of a button

18-06-2014 16-24-29

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="Stylesheet.css">
        <title></title>
        <style>
            #mainDiv{
                margin: 200px;
            }
            #myDiv
            {
                 width:200px;
                 height:20px;
                 position: absolute; /* this position absolute will only help to keep origin in same point*/
             
                 transform-origin:100% 100%; /*The transform-origin property allows you to change the position on transformed elements.*/
                 -ms-transform-origin:100% 100%; /* IE 9 */
                 -webkit-transform-origin:100% 100%; /* Safari and Chrome */
                 -moz-transform-origin:100% 100%; /* Firefox */
                  -o-transform-origin:100% 100%; 
                /* Rotate div 
                    transform:rotate(1deg);
                    -ms-transform:rotate(1deg); /* IE 9 */*/
                    /*-webkit-transform:rotate(1deg); /* Opera, Chrome, and Safari */
            }
            
        </style>
    </head>
    <body>
        <button id="myButton" type="button">Add</button>
<div id="mainDiv">
 
    </div>
<script>
 
   /* generate random colors */ 
     var safeColors = ['00','33','66','99','cc','ff'];
    var rand = function() {
    return Math.floor(Math.random()*6);
    };
    var randomColor = function() {
    var r = safeColors[rand()];
    var g = safeColors[rand()];
    var b = safeColors[rand()];
    return "#"+r+g+b;
    };
 
    /* end of random color generator on click*/
    //alert(color);
    var incvalue = 0; //global variable which increments with 5 on each click
    $("#myButton").click(function () {
        var degree = 0;
        var $elie = $("<div id='myDiv'>Hello</div>");
        function rotate(degree) {
            degree = degree + 5; //incrementing degree with 5 for each rotation
            // For webkit browsers: e.g. Chrome
            $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)' });
            // For Mozilla browser: e.g. Firefox
            $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)' }); // rotating div with 5 degrees by using css
            $elie.css('background-color', randomColor());//applying random color on each click
            //$elie.css({ WebkitTransform: 'background-color(' + randomColor + ')' });
            //$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)' });
            console.log(degree);
            return degree;
        }
        incvalue = rotate(incvalue); //assigning degree(local) as incvalue(global) to global variable
        //return degree;
        console.log(degree);
        $("#mainDiv").append($elie) //assinging div tag to container named maindiv
    });
</script>   
       
    </body>
</html>

Stylesheet:
body {
}
#myDiv
{
width:200px;
height:20px;
background-color:red;
/* Rotate div 
transform:rotate(1deg);
-ms-transform:rotate(1deg); /* IE 9 */*/
/*-webkit-transform:rotate(1deg); /* Opera, Chrome, and Safari */
}

How to copy text from php file to clipboard using jquery

Hey Pal,

Worried about copying text/link to clipboard? No worries dude..its mere simple as switching a light on 😉

There are many ways to achieve this concept..how ever i followed zclip..

Download zclip.js from this link

Place <script src=”js/jquery.zclip.js”/></script> in head tag

HTML:

<a href=”” data-copy=”<?php echo $v;?>” class=”copy” class=”list-group-item”><?php
print “$v”; ?></a>

Script:

<script>
$(“a.copy”).on(‘click’, function (e) {
e.preventDefault();
}).each(function () {
$(this).zclip({
path: ‘http://www.steamdev.com/zclip/js/ZeroClipboard.swf&#8217;,
copy: function() {
return $(this).data(‘copy’);
}
});
});
</script>

Now execute your code..you can see an alert showing your copied text to clipboard. Enjoy 😉

Get complete zeroclipboard from github

References:

http://jsfiddle.net/Vr4Ky/180/

http://stackoverflow.com/questions/14235324/jquery-zclip-copy-to-clipboard-for-multiple-links-in-bootstrap-dropdown

How to post a jquery variable to php

Guys,

There are multiple methods to achieve this concept. For now, i am posting method1. Have a look.

Method1:

<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”&gt;
</script>
<script>
$(document).ready(function(){
var id = 23;
$(“#submit”).click(function(){
$(‘#id1’).val(id);
});
});
</script>
</head>
<body>
<form action=”b.php” method=”post” >
<input type=”submit” id=”submit” name=”submit”/>
<input type=”hidden” name=”id1″ id=”id1″ value=””/>
</form>
</body>

b.php

<?php
$a =isset($_POST[‘id1’])?$_POST[‘id1′]:’not yet’;
echo $a ;
?>

Method2: Using Ajax

Will post soon..

References:

http://www.danielmayor.com/jquery-php-an-easy-way-to-pass-variables-between-php-and-javascript-with-jsonp-ajax-like

http://stackoverflow.com/questions/19462649/trying-to-pass-variable-values-from-javascript-to-php-using-ajax