jQuery AJAX call with JSON

Make AJAX call with jQuery and then receive and parse JSON string.

<html>
<head>
    <title>Making AJAX call with jQuery 3+</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        makeAJAX();

        function makeAJAX() {
            var request = $.ajax({
                url: '/ajax.php',
                method: "GET",
                data: {
                    id: 21,
                    minprice: 10,
                    maxprice: 1000
                },
                beforeSend: function(xhr) {
                    // set security token in AJAX request header
                    // xhr.setRequestHeader('X-Sec-Header','<?php echo $_SESSION["sectok"]; ?>');

                    // show loader
                    //$("#imgload").show();
                }
            });

            request.done(function(msg) {
                console.log(msg.films[0]);
                alert("name " + msg.films[0].name);
            });

            request.fail(function(jqXHR, textStatus) {
                alert("Request failed: " + textStatus);
            });

            request.always(function() {
                // hide loader
                //$("#imgload").hide();
            });
        }
    </script>
</head>
<body>
    <h1>Making AJAX call with jQuery 3+</h1>
    <div id="response"></div>
</body>
</html>

and here's the ajax.php:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH');
header("Access-Control-Allow-Headers: X-Requested-With");
header('Content-Type: application/json');

$data = array(
 array("id"=>1,"name"=>"Brendan","year"=>1992),
 array("id"=>2,"name"=>"Thane","year"=>1997),
 array("id"=>3,"name"=>"Hoyt","year"=>1994),
 array("id"=>4,"name"=>"Xanthus","year"=>1991),
 array("id"=>5,"name"=>"Francis","year"=>1991),
 array("id"=>6,"name"=>"Plato","year"=>1998),
 array("id"=>7,"name"=>"Sylvester","year"=>1998)
);

 $rarray = array(); 
 $rarray['films'] = $data;
 echo json_encode($rarray);

jQuery Advanced Event Handling

Event handler remove, attach and event stop propagation.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Working with events</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
   $(document).ready(function() {
    var myHandleFunc = function(e) {
     alert('Before `stopPropagation()`');
     e.stopPropagation();
     alert('After `stopPropagation()`');     
    };
    
    $('p').click(myHandleFunc);
  
    $('div.chapter').click(function() {
     alert('I\'m not executed unless you click on yellow or remove event handler for p element');
    });
    
    $('#remove').click(function() {
     $('p').off('click');
    });  
    
    $('#attach').click(function() {
     $('p').on('click', myHandleFunc);
    });              
   });
  </script>
 </head>
 <body>
  <div id="container">
   <div>
    <h2>Click on paragraph <button id="remove">Remove event</button> <button id="attach">Attach event</button></h2>
   </div>
   <div style="padding: 50px;background: yellow;"  class="chapter">
    <p style="background: white;">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
   </div>
  </div>
 </body>
</html>

jQuery animate and queue

Simple HTML with two div elements that shows jQuery's animate and queue effects.

Yellow paragraph simultaneously changes height and width.
Grey paragraph first changes height and then width.

PHP debugging with JavaScript Console, Error and Access Log

You can use JavaScript console to output global and other variables from your PHP file. That way you can use JS console to track what is is going on in PHP backed files that are called by $.ajax. Also you should be familiar with PHP's functions utf8_encode and utf8_decode

Raw outuput of JSON string and Base64 encoded JSON string

JSONP Tutorial

This is an advanced tutorial with working example you must know jQuery and JSONP foundations. JSONP bypass browser's "same origin" policy.

Parse JSON generated by PHP

This tutorial shows how to parse a JSON string generated by PHP. Place job.php and index.html in same folder.

Selecting HTML elements with similar ID

You want to select only certain HTML elements that have id starting with some string? This is the right tutorial for you.
Look at first highlighted portion of code - it's jQuery selector that selects all elements starting with 'q'.
That means that only they will be transformed.

Delete row with jQuery and PHP

Do you want to delete a row in HTML and MySQL table with fancy fade out effect? This is the right tutorial for you assuming that you are familiar with basics of jQuery and PHP.
You make an asynchronous call to PHP script called delete.php so end user doesn't leave page when a row is deleted, instead he gets an alert box that confirms that row is deleted and the row gradually disappears.

jQuery shopping cart

Your manager told you to put shopping cart into an existing site? And told you to use jQuery and AJAX in order to prevent page reload as customer click on products in catalog? And add a couple of effects?

Create Web Widget in iFrame

Do you want to create widgets that can deliver different content based on visitor's browser and location? It is not that difficult. In this tutorial I'll assume that you have a basic knowledge of JSON, XML and jQuery.
This tutorial assumes that you have cURL and simpleXML functions enabled on your web server.

jQuery's on function tutorial

This tutorial show how to work with table element. It uses jQuery function on() to highlight both tables. The one that will be inserted in page DOM after AJAX call to file ajax.php and the other table that is part of initial DOM.

Parse XML using jQuery

In this tutorial I'll show you how to parse XML file using jQuery. PHP will generate a XML file and jQuery will parse it and create HTML code for web page.

jQuery and PHP generated form

Say you want to enable disable text fields in a form that is generated by PHP script. The script pulls data from a MySQL table, and you want to reduce source code you maintain to minimum. You want JavaScript to work regardless of number of fields in table only condition is that billing fields are enabled when shipping data is different from billing data. And vice versa.