Web Technology Experts Notes

Showing posts with label jquery. Show all posts

Wednesday 20 January 2016

jQuery UI Interview Questions and Answers

Question: What is jQuery UI? It is JavaScript Library which is collection of jQuery widgets like datepicker, tabs, autocomplete etc. We can also add effects, interactions (drag, drop, resize) on widgets.

Question: What widets are available in jQuery UI?

Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Progressbar
Selectmenu
Slider
Spinner
Tabs
Tooltip

Question: What are different effects available in jQuery UI

Add Class
Color Animation
Easing
Effect
Hide
Remove Class
Show
Switch Class
Toggle
Toggle Class

Question: In which language, JQuery UI is written?
JavaScript

Question: Is JQuery UI opensource?
Yes.
Question: What is current stable version of JQuery UI?
1.11.4 / dated 11 March 2015

Question: From where we can download the jQuery UI
https://jqueryui.com/

Question: Can we download custom widgets from jQuery UI
Yes, We can.
https://jqueryui.com/download/

Question: How to add CSS property on last div?

$('div:last').css({backgroundColor: 'green', fontWeight: 'bolder'});

Question: What is $.noConflict()?

<script src="https://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict()
</script>

When we call to $.noConflict(). Old references of $ are saved during jQuery initialization, noConflict() simply restores them.

Question: Can we use another variable instead of $ in jQuery? If yes, How?
Yes, we can.

var jQ = jQuery.noConflict();
/** Now use jQ instead of $ **/
jQ( "div#pid" ).hide();

Question: How to remove close button on the jQuery UI dialog using CSS?

.ui-dialog-titlebar-close {
  visibility: hidden;
}

Question: How to remove close button on the jQuery UI dialog using JavaScript?

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); }
});

Question: How to initialize a dialog without a title bar?

var dialogOpts=[]
$("#divId").dialog(dialogOpts);
//Remove the title bar
$(".ui-dialog-titlebar").hide();

Question: How to call Hook into dialog close event in jQuery UI?

$('div#contentId').on('dialogclose', function(event) {
     //console.log('closed event called');
 });

Question: How to Download jQuery UI CSS from Google's CDN?
Uncompressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js
Compressed: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

Question: How to "Change button text" in JQuery?
jQuery Version < 1.6

$("#elementId").attr('value', 'Save'); //versions older than 1.6

jQuery Version > 1.6

$("#elementId").prop('value', 'Save'); //versions newer than 1.6

Question: How can I disable a button in a jQuery ?

$('#divId').attr("disabled", true);

Question: How do I keep jQuery UI Accordion collapsed by default?

$("#divId").accordion({ header: "h4", collapsible: true, active: false });

Question: How to call a dragable widget?

// Make #draggable draggable
$(function () {
        $("#draggableDivId").draggable();
});

Question: How do I disable a jquery-ui draggable of widget?

//myObject is widget object.
myObject.draggable( 'disable' );

OR, you can set during the initalization

$("#yourDialogId").dialog({
    draggable: false
});

How to remove JQuery UI Autocomplete Helper text?

.ui-helper-hidden-accessible { display:none; }

Question: How to set year in DatePicker?

 $(".datepickerClass").datepicker({
    yearRange: '1950:2013', 
   changeMonth: true,
   changeYear: true,
   showButtonPanel: true,
   
});

Question: How to set current Date in Date Picker?

$(".datepickerClass").datepicker('setDate', new Date());

Question: How to Change Date Format in jQuery UI DatePicker?

var date = $('#datepickerDivId').datepicker({ dateFormat: 'dd-mm-yy' }).val();

Friday 1 January 2016

jQuery Mobile interview questions and answers

jQuery Mobile is a UI framework which is written in javaScript language and used for creating mobile web applications. It works on all popular smartphones and tablets. jQuery Mobile uses HTML5 & CSS3.

What is Initial release of JQuery Mobile?
October 16, 2010

Question: What is Latest version of jQuery Mobile?
Version: 1.4.5
Dated: October 31, 2014

Question: In which language, jQuery mobile is written?
JavaScript

Question: Where it is used?
It is "Mobile application framework" which is used for creating mobile web applications.

Question: What is offical website of jQuery Mobile?
http://jquerymobile.com/

Question: What are Features of jQuery Mobile?

Compatible with all major desktop browsers as well as all major mobile platforms (Android, iOS, Windows Phone, Blackberry, WebOS, Symbian)
Built on top of jQuery core.
Lightweight to optimize speed.
The same underlying codebase will automatically scale to any screen.
HTML5-driven.
AJAX-powered navigation with animated page.
UI widgets

Question: Why Use jQuery Mobile?
1. Write Less, Do more
2. Its works on Android, Blackberry, iOS and Iphone
3. Its optimized

Question: Describe few HTML tags used in jQuery Mobile?
data-role="page": Page displayed in the browser.
data-role="header": Creates a toolbar at the top of the page.
data-role="main": Content of the page, like text, images, buttons and forms etc.
"ui-content": Adds extra padding and margin inside the page content
data-role="footer": creates a toolbar at the bottom of the page

Question: How to Add Back Button?

<a class="ui-btn" data-rel="back" href="https://www.blogger.com/blogger.g?blogID=5911253879674558037#">Go Back</a>

Question: What is jQuery Mobile Themeing?
jQuery Mobile provides a powerful theming that allows developers to customize color schemes & CSS aspects of UI features.

Wednesday 16 September 2015

jQuery Ajax Interview Questions and Answers for Experienced

Question: What is the difference between jQuery.get() and jQuery.ajax()?

$.get( "/ajax/add-user", { name: "Arun", company: "web-technology-experts-notes.in", gender:"Male" } );

$.get executes an Ajax request with using of GET Method.

$.ajax({
    type: "POST",
    url: "/ajax",
    data: "name=Arun&company=web-technology-experts-notes.in&gender=male",
    success: function(msg){
       console.log(msg); 
       
    }
});

$.ajax you full control over the Ajax request. In this you can use any method like GET or POST. I think you should use this only, if the other methods did not fulfill your requirement.
You can do lot of customization in this like caching and Ajax method etc

Question: What is the use of jQuery load method?
It is AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

Question:What are the security issues with AJAX?

Source code written in ajax easily visiable.
Attrackers can send the the data to same API Call
Attrackers can view the Request/Response in Ajax call.
Attacker can view the full response and can hit and trial.

Question: How many types of ready states in ajax?
0: Request not initialized
1: Server connection established
2: Request received
3: Processing request
4: Request finished and response is ready

Question: List Some Popular Ajax Frameworks?.

jQuery.
script.aculo.us
Prototype
MooTools
ExtJS
Qooxdoo
Yahoo! UI Library (YUI)
MochiKit
Midori
The Dojo Toolkit

Question: What exactly is the W3C DOM?
The W3C Document Object Model (DOM) is defined by the W3C.
The DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access/update the content of a document.

Question: What is the XMLHttpRequest object in AJAX?
It is way to update the web content from server without reloading the page.

Question: How can we abort the current XMLHttpRequest in AJAX?
use abort() function. For Example:

var xhr;    
xhr = $.ajax({
    url: 'ajax/get-user-details/user_id/3',
    success: function(data) {
        console.log(data);
    }
})
    
fn();

//Abort the Ajax call
if(xhr && xhr.readystate != 4){
  xhr.abort();  
}

Question: How to cancel all the active ajax call?
Every time you create an ajax request you should use a variable to store it, you can use array object to store multiple ajax.
Now you can use abort() function to abort each ajax call.

Question: How to debug Ajax call
You can use debug tools of browser.
like firebug in Mozilla.
Inspect element in Google Chrome

Question: How to convert an object to a string?
var javascriptObject = {name: "Web", "URL": "http://www.web-technology-experts-notes.in/"};

JSON.stringify(javascriptObject, null, 2);

Question: How to convert an string to a object?
var javascriptObject = '{name: "Web", "URL": "http://www.web-technology-experts-notes.in/"}';

JSON.parse(javascriptObject, null, 2);

Question: How can I add a custom HTTP header to ajax request with js or jQuery?

$.ajax({
    url: '/ajax/get-user-details/user_id/3',
    headers: { 'x-my-custom-header': 'some value' },
    success: function(data) {
        console.log(data);
    }
});

Question: How to determine if ajax timeout error comes?

$.ajax({
     url: '/ajax/get-user-details/user_id/3',
    type: "GET",
    dataType: "json",
    timeout: 1000,
    success: function(data) { 
        console.log(data);
     },
    error: function(x, t, m) {
        if(t==="timeout") {
            console.log("got timeout");
        } else {
            console.log(t);
        }
    }
});?

Question:How to send an https ajax call on http page?
Add the Access-Control-Allow-Origin header from the server

Access-Control-Allow-Origin: https://www.myexample.com

Friday 17 July 2015

Jquery Interview Questions and Answers for experienced

Question: What is jQuery?
jQuery is a fast, small and feature-rich JavaScript library.
jQuery makes things like HTML document traversal and manipulation, animation, event handling and Ajax much simpler with an easy-to-use API.
It works across a multitude of browsers.

Question: What is Ajax?
Ajax( Short form of Asynchronous JavaScript and XML) is a Web development techniques used on the client-side to create Synchronous OR asynchronous Web applications. It is used to get the data from server without refresh the page.

Question: What is Iframe?
Iframe is an HTML document embedded inside another HTML document on a website. We can embed one OR many iframe in one website.

Question: What is element in HTML?
An HTML element is an individual component of an HTML document or web page.
For example, p,div,span etc know as element.
when these surrounded by angle brackets know as HTML Tags.

Question: What is event in jQuery? Doing any thing, known as event.
For Example, Click event, mouseover event, blur event, double click event etc.

Question: What is jQuery event?
A jQuery object is array-like which means that it contains zero or more indexes.

Question: How to parse a JSON String?

var obj = jQuery.parseJSON( '{ "name": "John" }' );
console.log( obj.name);

Question: How to communicate between iframe and the parent site?
With same domain and same port/protocol
you can use window.opener to change in parent window from child window.
you can use document.getElemetById('#iframeId') to change in child window from parent window.
With different domain OR different port/protocol
You have to use cross-document messaging.

Question: How can I select an element by name or class or id with jQuery?
Select by name

console.log($('div[name=divname]'));

Select by class name

console.log($('div.className'));

Select by classId

console.log($('div#classId'));

Question: How to show the preview an image before it is uploaded to server?
To show the preview you need to use "FileReader" javascript function.
See Demo:http://jsfiddle.net/LvsYc/

Question: How to get html tags from string?

var re = /(<([^>]+)>)/ig; 
    var str = '
Hello!
';
    var m;
     
    while ((m = re.exec(str)) !== null) {
        if (m.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    console.log(re);

Question: What is use $.each? Give examples?
It is similar to foreach in jQuery.
you can use $.each for normal array OR list of elements. For Example:

$('a.myclass').each(function(index, value){
      console.log($(this).attr('href'));
});

var numberArray = [0,1,2,3,4,5];
jQuery.each(numberArray , function(index, value){
     console.log(index + ':' + value); 
});

Question: What's the difference between jquery.js and jquery.min.js?
Both are same.
only difference jquery.min.js is minified file which have no space, tab.

Question: How to add Email Validation in jQuery?

function IsValidEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
console.log(IsValidEmail('myvalidemail@domain.com'));
console.log(IsValidEmail('myInvalidemail@'));
console.log(IsValidEmail('myInvalidemail#domain.com'));

Question: How to get nth jQuery element?
use eq function.

console.log($("div.myclass:eq(2)"));

Question: How to remove a row from table?

$('tr#myTableRowId').remove();

$('tr.myTableRowClass').remove();

Question:How to bind shortcut-keys with jQuery?
To bind Ctrl+f to a functionName.

$(document).bind('keydown', 'ctrl+f', functionName);

You can check also: http://github.com/jeresig/jquery.hotkeys

Question: How to convert array to JSON?
You can use stringify.

var yourArray = Array('1','2','3','4');
var myJsonString = JSON.stringify(yourArray);

Question: How to check if a div exists with jquery?

if($("div#idName" + name).length > 0) {
  /** It is exist **/
}

Question: How to call a function after 3 seconds?

setTimeout(
  function(){
/** Do here **/

/** Do here **/    
  }, 3000);
}

Question: How to prevent caching in Ajax?
After loading of jQuery, add the below code at the top of all ajax call.

$.ajaxSetup({ cache: false });

Saturday 11 April 2015

How can I check DOM is ready in jQuery

Question: What is DOM?
The Document Object Model (DOM), is a model for representing and interacting with an XML, XHTML and HTML document.

Question: What is meaning of DOM is ready?
DOM is ready means html, images, css and java-Script are loaded fully.

Question: Why need to check if DOM is ready OR NOT?
Some times, we need to do the some modification in html tags like p,div and image etc.
We can change the DOM only after if DOM is loaded.

Following are 3 methods to check DOM() is fully loaded?
Method 1:

 jQuery(document).ready(function(){ 
      //consol.log('DOM IS FULLY loaded');

  });

Method 2:

$(function(){
  //consol.log('DOM IS FULLY loaded');
});

Method 3:

if ( jQuery.isReady ) {  
    //consol.log('DOM IS FULLY loaded');
}

Subscribe to: Posts ( Atom )

Wednesday 20 January 2016

jQuery UI Interview Questions and Answers

Best Related Posts are Following:

Friday 1 January 2016

jQuery Mobile interview questions and answers

Best Related Posts are Following:

Wednesday 16 September 2015

jQuery Ajax Interview Questions and Answers for Experienced

Best Related Posts are Following:

Friday 17 July 2015

Jquery Interview Questions and Answers for experienced

Hello!

Best Related Posts are Following:

Saturday 11 April 2015

How can I check DOM is ready in jQuery

Best Related Posts are Following: