Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts

Wednesday 6 September 2017

jQuery Autocomplete like Facebook With Demo

jQuery Autocomplete like Facebook With Demo

jQuery facebook autocomplete live demo

Following are the code snippet example for Autocomplete (similar the facebook autocomplete).

Code Example:
<link charset="utf-8" href="//www.emposha.com/demo/fcbkcomplete_2/style.css" media="screen" rel="stylesheet" type="text/css"></link>
        <script charset="utf-8" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js" type="text/javascript"></script>
        <script charset="utf-8" src="//www.emposha.com/demo/fcbkcomplete_2/jquery.fcbkcomplete.js" type="text/javascript"></script>

        <h1>
JQuery Autocomplete similar to facebook</h1>
<div id="text">
</div>
<form accept-charset="utf-8" action="submit.php" method="POST">
<select id="select3" name="select3">
                <option class="selected" value="sleep">sleep</option>
                <option value="sport">sport</option>
                <option value="freestyle">freestyle</option>
            </select>
            <br />
<input type="submit" value="Send" />
        </form>
<script type="text/javascript">
          /** json_url data **/
        var jsonData=[{"key": "hello world", "value": "hello world"}, {"key": "movies", "value": "movies"}, {"key": "ski", "value": "ski"}, {"key": "snowbord", "value": "snowbord"}, {"key": "computer", "value": "computer"}, {"key": "apple", "value": "apple"}, {"key": "pc", "value": "pc"}, {"key": "ipod", "value": "ipod"}, {"key": "ipad", "value": "ipad"}, {"key": "iphone", "value": "iphone"}, {"key": "iphon4", "value": "iphone4"}, {"key": "iphone5", "value": "iphone5"}, {"key": "samsung", "value": "samsung"}, {"key": "blackberry", "value": "blackberry"}]
        /** json_url data **/
        
            $(document).ready(function(){                
                $("#select3").fcbkcomplete({
                    json_url: "http://www.emposha.com/demo/fcbkcomplete_2/data.txt",// This must be in your server
                    addontab: true,                   
                    maxitems: 2,
                    height: 2,
                    cache: true
                });
            });
        </script>
        
        <div id="testme">
</div>



jQuery naming convention - jQuery tutorial for beginner

JQuery A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and AJAX and do lot of more things in very simple and quick way..


For all this, Just include the jquery.js file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


jQuery naming convention - jQuery tutorial for beginner



JQuery most useful and very common functions used in the development
1) jQuery(this);// Current object
2) jQuery("p");// Select all the P tag
3)jQuery("p.abc");//Select all the P tag having class abc

4) jQuery("ul li:first");//select the first li of ul

5)jQuery("p").hide();// Hide the p tag

6) jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("div.toggle").toggle();
});

});: 
/*When you click the button first time, it will hide the div having class toggle and when click again will show.*/

7)jQuery("div#intro .head"); // select the class having "head" under div having id "intro"

8)jQuery("[hrefjQuery='.jpg']"); //select all href having link ending with jpg

9)jQuery("p.abc").append("greatinformations");;// Add the text "greatinformations" end the div having class abc

10) jQuery("p.abc").after("greatinformations"); /*Add the text "greatinformations" after the ending the div having class abc Enter code here.
Please note: Although no board code and smiley buttons are shown, they are still usable.*/

11)jQuery("div").animate({height:300},"slow"); //change all the div height to 300px

12) jQuery(this).css("background-color"); //get the background color of current html object

13)jQuery(this).css("background-color", 'blue' ); //set the background-color to blue of current html object

14)jQuery("div").animate({left:"100px"},"slow"); // Move the div to 100px

15)/*jQuery Callback:A callback function is executed after the current work is done eg. */

jQuery("button").click(function(){
jQuery("div.class").show(300,function(){
alert("The div is display now ");
});.

16) jQuery("button.a").click(function(){
jQuery("div").load('abc.txt');
});  /* when click on button having class a will load the data from abc.text and upload to div */

17) jQuery("div").load('abc.txt','',function(){alert('hi')}); // after loading file abc.txt, alert the "hi" 





Friday 1 April 2016

Ajax Interview Questions and Answers for Fresher

Ajax Interview Questions and Answers for Fresher

Question: What are the advantages of AJAX?
  1. Quick Response.
  2. Quick Response without loading page.
  3. Save the Bandwidth
  4. Client Server Interaction what user letting know (User will not get disturb)



Question: What are the dis Advantages of AJAX?
  1. Dependency on JavaScript.
  2. An simple js error, Ajax will not called.
  3. Security issues Might comes, if not implemented securely.
  4. Difficult in Debugging for beginner
  5. Sometimes browser compatibility issues comes.



Question: What are top website, who uses Ajax?
  1. Youtube
  2. Google
  3. Bing
  4. Gmail
  5. Twitter
  6. Linkdin



Question: What are security issues in AJAX?
  1. Ajax is visible in browser console
  2. Request, Response, header and cookie are visiable in browser console.
  3. Every time called ajax is purely visiable in Ajax
  4. An Ajax request can be called by hackers OR unauthorized, It can damage the website if there are not properly security checks
  5. Attackers can try the ajax call with different request parameter.



Question: What are the technologies used by AJAX?
  1. Javascript
  2. XMLHttpRequest
  3. XML/JSON/HTML
  4. DOM
  5. You can also use third party libaraies like jQuery, mootools etc



Question: What are common AJAX Framework?
  1. jQuery
  2. MooTools
  3. Prototype
  4. YUI
  5. Dojo Toolkit
  6. Google Web Toolkit (GWT)



Question:What are Ajax applications?
The web applicable which use the more ajax calls are ajax application.


Question: What are different stage of XMLHttpRequest?
  1. 0: request not initialized
  2. 1: server connection established
  3. 2: request received
  4. 3: processing request
  5. 4: request finished and response is ready



Question: In Ajax call, which method is more secure GET/Post?
POST is more secure as compare to Get Method.


Question: Can anyone send ajax request with POST Method ?
Yes, can send using CURL.


Question: What is the difference between JavaScript and AJAX? JavaScript an object-oriented computer programming language used in web browsers.
Ajax is set of web development techniques using JavaScript to send/receive the data from server without loading page.


Question: What is Asynchronous in Ajax?
We can set the Asynchronous value as true OR false.
Async=true

Ajax request execute independently, Its response can come earlier than other request which is execute later .
Async=false
Ajax request does not execute independently, Its response can comes when earlier request finished.


Question: How to submit entire form data with Ajax?
//serialize ajax Data
var formData = $('form#formId').serialize();
$.ajax({ 
        url: '/my/site',
         data: formData,
         type: 'post',
         success: function(result) {
                      console.log(result);
          }
});



Question:Give a simple example of JSONP with Ajax?
$.getJSON("http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=?", function(result){
   //Now result have response of ajax call
   console.log(result);
});



Thursday 24 March 2016

How to Stop ajax requests in jQuery?

How to Stop ajax requests in jQuery

HTML Code



<!--- HTML Part --->
<form id="formId" method="POST" onsubmit="return saveData()">
<input name="formsubmit" type="hidden" value="1" />
    First Name:  <input name="first_name" type="text" />
    <br />
Last Name:  <input name="last_name" type="text" />
    <br />
Email: &nbsp;   &nbsp;  &nbsp;   &nbsp;<input name="email" type="text" /><br />
<input type="submit" value="Click to Submit" />
</form>
<!--- HTML Part --->



jQuery/JavaScript Code



<!--- Javascript Part --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
var request=0;
    function saveData() {
        if(request!=0){
   request.abort();
  }
         request=$.ajax({
            url: "ajax.php",
            method:"post",
            data: $('form#formId').serialize()+'&phone=789797522&city_id=1',
            cache: false,
            success: function(msg) {
                console.log(msg);
    request =0;
            }
        });
  
        return false;
    }

</script>
<!--- Javascript Part --->



PHP Code



if(!empty($_POST)){
    echo "<pre>";
    print_r($_POST);
 echo "</pre>
";
    /** You can write your code here **/    
    

/** You can write your code here **/        
    die;
}



PHP Output Code



Array
(
    [formsubmit] => 1
    [first_name] => Raj
    [last_name] => sinha
    [email] => raj@no-spam.ws
    [phone] => 789797522
    [city_id] => 1
)





Wednesday 23 March 2016

How to send ajax request in PHP?

How to send ajax request in PHP?

HTML Code



<!--- HTML Part --->
<form id="formId" method="POST" onsubmit="return saveData()">
<input name="formsubmit" type="hidden" value="1" />
    First Name:  <input name="first_name" type="text" />
    <br />
Last Name:  <input name="last_name" type="text" />
    <br />
Email: &nbsp;   &nbsp;  &nbsp;   &nbsp;<input name="email" type="text" /><br />
<input type="submit" value="Click to Submit" />
</form>
<!--- HTML Part --->



jQuery Code



<!--- Javascript Part --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
    function saveData() {
        
        $.ajax({
            url: "ajaxfile.php",
            method:"post",
            data: $('form#formId').serialize()+'&phone=789797522&city_id=1',
            cache: false,
            success: function(msg) {
                console.log(msg);
            }
        });
        return false;
    }

</script>
<!--- Javascript Part --->



PHP Code



if(!empty($_POST)){
    echo "<pre>";
    print_r($_POST);
 echo "</pre>";
    /** You can write your code here **/    
    

/** You can write your code here **/        
    die;
}



PHP Output Code



Array
(
    [formsubmit] => 1
    [first_name] => Raj
    [last_name] => sinha
    [email] => raj@no-spam.ws
    [phone] => 789797522
    [city_id] => 1
)