CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other
Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

10 March, 2023

DataTables date range filter

 Programing Coderfunda     March 10, 2023     Jquery, php     No comments   

 <div class="date-filter12">

                <div class="row">
                    <div class="col-md-12">
                        <h4 class="text text-primary">Search By Date:</h4>
                    </div>
                    <div class="col-md-2">
                        <label>From Date:</label>
                        <input type="text" id="min" name="min" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>To Date:</label>
                        <input type="text" id="max" name="max" class="form-control">
                    </div>
                </div>
            </div>


Data Table start here : id is very important check id okay

                    <table id="example" class="display" style="width:100%">
                        <thead class="table-light">
                          <tr>
                             <th>Referenc#</th>
                             <th>Pick Date</th>
                             <th>Origin</th>
                             <th>Drop</th>
                             <th>Truck</th>
                             <th>Load Type</th>
                             <th>Broker</th>
                             <th>Status</th>
                             <th>Date</th>
                             <th>Action</th>
                          </tr>
                        </thead>
                        <tbody id="lodetypeerStatus">
                        @php $i=1;
                        @endphp
                            @foreach($userdata as $loads_data)
                                <?php
                                    // $shipment_res = App\Models\Load::where('user_id',$loads_data['user_id'])->orderBy('id','desc')->get();
                                    //  dd($shipment_res);
                                    $shipment_res = App\Models\Load::where([['user_id',$loads_data['user_id']],['load_status', '=', '0'] ])->orderBy('id','desc')->get();
                                ?>
                                @foreach($shipment_res as $user_load)
                                    <tr class="odd">
                                        <td class="copy-text">{{ $user_load->ref_no }}</td>
                                        <td class="copy-text">{{ $user_load->post_date }}</td>
                                        <td class="copy-text">{{ $user_load->load_state_origin }}</td>
                                        <td class="copy-text">{{ $user_load->load_city_desti }}</td>
                                        <td class="copy-text">{{ $user_load->equipments }}</td>
                                        <td class="copy-text">{{ $user_load->full_partial_tl_ltl }}</td>
                                            @php
                                                $user =  App\Models\User::where('id',$user_load['user_id'])->first();
                                                $name= isset($user['name']) ? $user['name'] : null;
                                            @endphp
                                        <td>{{ucfirst($name)}}</td>
                                            <?php
                                                $status= $user_load->load_status;
                                                $date_pick= explode("T",$user_load->dat_pick_date);
                                                $date_pick1= strtotime($date_pick['0']);
                                                $today= strtotime(date('Y-m-d'));
                                                $lstatus= '';
                                                if($today > $date_pick1){
                                                    $lstatus = 'Expire';
                                                }else{
                                                    if($status == 1){
                                                            $lstatus = 'Delete';
                                                    }else{
                                                        $lstatus = 'Active';
                                                    }
                                                }
                                            ?>
                                        <td>{{ $lstatus }}</td>
                                        <!--<td>{{ date('d M, Y', strtotime($user_load->created_at) )}}</td>-->
                                        {{-- <td>{{ date('Y-m-d', strtotime($user_load->created_at) )}}</td> --}}

                                        <td>{{ date('m/d/Y', strtotime($user_load->created_at) )}}</td>

                                        <td style="width: 80px;" class="action_tooltip classToInclude"  >
                                            <input type="hidden" value="{{ $user_load->load_dat_id }}" id="load_dat_id">
                                           
                                            <button type="button" class="btn btn-outline-secondary btn-sm radius-30 px-4" id="load_update_form_btn"><i class="bx bx-edit"></i><span class="tooltip">Edit</span></button>
                                           
                                           
                                            <button type="button" class="btn btn-outline-danger btn-sm radius-30 px-4" id="load_delete_btn" ><i class="bx bx-trash"></i><span class="tooltip">Delete</span></button>
                                           
                                           
                                           
                                           
                                        </td>
                                    </tr>
                           
                                @endforeach
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Referenc#</th>
                                <th>Pick Date</th>
                                <th>Origin</th>
                                <th>Drop</th>
                                <th>Truck</th>
                                <th>Load Type</th>
                                <th>Broker</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Action</th>
                             </tr>
                        </tfoot>
                    </table>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.3.1/css/dataTables.dateTime.min.css">

 <script>

Note: *** 8 is number of date column 0 to 8 means 9 number column.

var startDate = new Date(data[8]);

endnote

    $(document).ready(function () {
            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {
                    var min = $('#min').datepicker('getDate');
                    var max = $('#max').datepicker('getDate');
                    var startDate = new Date(data[8]);
                    if (min == null && max == null) return true;
                    if (min == null && startDate <= max) return true;
                    if (max == null && startDate >= min) return true;
                    if (startDate <= max && startDate >= min) return true;
                    return false;
                }
            );
       
            $('#min').datepicker();
            $('#max').datepicker();
            var table = $('#example').DataTable();
       
            // Event listener to the two range filtering inputs to redraw on input
            $('#min, #max').change(function () {
                table.draw();
            });
        });
</script>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

31 March, 2022

jQuery Tutorial

 Programing Coderfunda     March 31, 2022     Jquery     No comments   

 


jQuery tutorial

jQuery tutorial for beginners and professionals provides deep knowledge of jQuery technology. Our jQuery tutorial will help you to learn jQuery fundamentals, example, selectors, events, effects, traversing, CSS and attributes.

What is jQuery

  • jQuery is a small and lightweight JavaScript library.
  • jQuery is cross-platform.
  • jQuery means "write less do more".
  • jQuery simplifies AJAX call and DOM manipulation.

jQuery Example

In this tutorial, you will get a lot of jQuery examples to understand the topic well. Let's see a simple jQuery example.

File: firstjquery.html
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.  <title>First jQuery Example</title>  
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">  
  6.  </script>  
  7.  <script type="text/javascript" language="javascript">  
  8.  $(document).ready(function() {  
  9.  $("p").css("background-color", "pink");  
  10.  });  
  11.  </script>  
  12.  </head>  
  13. <body>  
  14. <p>This is first paragraph.</p>  
  15. <p>This is second paragraph.</p>  
  16. <p>This is third paragraph.</p>  
  17. </body>  
  18. </html>  

Prerequisite

Before learning jQuery, you must have the basic knowledge of JavaScript.

Audience

Our jQuery tutorial is designed to help beginners and professionals.

Problem

We assure that you will not find any problem in this jQuery tutorial. But if there is any mistake, please post the problem in contact form.

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

10 November, 2020

Ajax LARAVEL 419 POST error

 Programing Coderfunda     November 10, 2020     Ajax, Jquery, Laravel, php     No comments   

 Question


I would really appreciate some help on this. I tried tons of solutions as posted in this forum, but I cannot get it to work.


My ajax call is something like


$(document).ready(function() {

    $("#company").click(function() {

        $.ajax({

            type: "POST",

            dataType:'html',

            url : "/company",

            success : function (data) {

                $("#result").html(data);

            }

        });

    });

});

I am calling the view through my route


Route::post('/company', 'Ajaxcontroller@loadContent');

And controller


public function loadContent()

    {

        return view('listing.company')->render();

    }

My company.blade.php is


    @foreach ($companies as $company)

            <div class="posting-description">

            <h5 class="header"><a href="#"></a>{{$company->name}}

            </h5>

            <h5 class="header"> {{$company->streetaddress}} {{$company->postalcode}}</h5>  

            <p class="header">

             <span class="red-text"> <?= $service; ?> </span> is available on <span class="green-text"><?php echo $date; ?></span>

           </p>

    @endforeach

I am getting this error


POST http://127.0.0.1:8234/company 419 (unknown status)


ANSWER 

Laravel 419 post error is usually related with api.php and token authorization

Laravel automatically generates a CSRF "token" for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application.


Add this to your ajax call


$.ajaxSetup({

    headers: {

        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    }

});

or you can exclude some URIs in VerifyCSRF token middleware


 protected $except = [

        '/route_you_want_to_ignore',

        '/route_group/*

    ];

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Ajax LARAVEL 419 POST error

 Programing Coderfunda     November 10, 2020     Ajax, Jquery, Laravel, php     No comments   

 Question


I would really appreciate some help on this. I tried tons of solutions as posted in this forum, but I cannot get it to work.


My ajax call is something like


$(document).ready(function() {

    $("#company").click(function() {

        $.ajax({

            type: "POST",

            dataType:'html',

            url : "/company",

            success : function (data) {

                $("#result").html(data);

            }

        });

    });

});

I am calling the view through my route


Route::post('/company', 'Ajaxcontroller@loadContent');

And controller


public function loadContent()

    {

        return view('listing.company')->render();

    }

My company.blade.php is


    @foreach ($companies as $company)

            <div class="posting-description">

            <h5 class="header"><a href="#"></a>{{$company->name}}

            </h5>

            <h5 class="header"> {{$company->streetaddress}} {{$company->postalcode}}</h5>  

            <p class="header">

             <span class="red-text"> <?= $service; ?> </span> is available on <span class="green-text"><?php echo $date; ?></span>

           </p>

    @endforeach

I am getting this error


POST http://127.0.0.1:8234/company 419 (unknown status)


ANSWER 

Laravel 419 post error is usually related with api.php and token authorization

Laravel automatically generates a CSRF "token" for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application.


Add this to your ajax call


$.ajaxSetup({

    headers: {

        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    }

});

or you can exclude some URIs in VerifyCSRF token middleware


 protected $except = [

        '/route_you_want_to_ignore',

        '/route_group/*

    ];

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

22 September, 2020

jQuery | Traversing

 Programing Coderfunda     September 22, 2020     Jquery     No comments   

 

In jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element.
Based on the traversing purposes following methods are Categorized as follows:

Tree Traversing:

Ancestors:

  • parent()
    it gives parent element of specified selector
    Syntax:
    $(selector).parent();
  • parents()
    it gives all ancestor elements of the specified selector.
    Syntax:
  •  
    • $(selector).parents();
    • parentsUntil()
      it gives all ancestor elements between specified selector and arguments.
      Syntax:
      $(selector).parentsUntil(selector, filter element)
      $(selector).parentsUntil(element, filter element)
    • offsetParent()
      it gives the first positioned parent element of specified selector.
      Syntax:
      $(selector).offsetParent();
    • closest()
      it gives the first ancestor of the specified selector.
      Syntax:
      $(selector).closest(selector);
      $(selector).closest(selector, context);
      $(selector).closest(selection);
      $(selector).closest(element);

    Descendants:

  • children()
    it gives the children of each selected elements, optionally filtered by a selector.
    Syntax:
    $(selector).children();
  • find()
    it gives descendant elements of specified elements, filtered by a selector, jQuery object, or element.
    Syntax:
    $(selector).find('selector to find');

Siblings:

siblings()
it gives all siblings of the specified selector.
Syntax:

  • $(selector).siblings();
  • next()
    it gives the next sibling element of the specified selector.
    Syntax:
    $(selector).next();
  • nextAll()
    it gives all next sibling elements of the specified selector.
    Syntax:
    $(selector).nextAll();
  • nextUntil()
    it gives all next sibling elements between specified selector and arguments.
    Syntax:
    $(selector).nextUntil();
  • prev()
    it gives the previous sibling element of the specified selector.
    Syntax:
    $(selector).prev(selector);
    $(selector).prev()
  • prevAll()
    it gives all previous sibling elements of the specified selector.
    Syntax:
    $(selector).prevAll(selector, filter element)
    $(selector).prevAll(element, filter element)
  • prevUntil()
    it gives all previous sibling elements between specified selector and arguments.
    Syntax:
    $(selector).prevUntil(selector, filter element)
    $(selector).prevUntil(element, filter element)

Filtering

  • first()
    it gives the first element of the specified selector.
    Syntax:
    $(selector).first();
  • last()
    it gives the last element of the specified selector.
    Syntax:
    $(selector).last();
  • eq()
    it gives an element with a specific index number of the specified selector.
    Syntax:
  •  
    • $(selector).eq(index);
      $(selector).eq( indexFromEnd );
    • filter()
      it remove/detect an elements that are matched with specified selector.
      Syntax:
      $(selector).is(selector)
      $(selector).is(function)
      $(selector).is(selection)
      $(selector).is(elements)
    • has()
      it gives all elements that have one or more elements within, that are matched with specified selector.
      Syntax:
      $(selector).has(selector);
    • is()
      it checks if one of the specified selector is matched with arguments.
      Syntax:
      .is( selector )
      .is( function )
      .is( selection )
      .is( elements )
    • map()
      Pass each element in the current matched set through a function, producing a new jQuery object containing the return values
      Syntax:
      .map( callback )
    • slice()
      it selects a subset of specified selector based on its argument index or by start and stop value.
      Syntax:
      $(selector).slice(start, end );
      $(selector).slice(start);

    Miscellaneous Traversing

  • add()
    it add all elements to set of matched elements to manipulate them at the same time.
    Syntax:
    $(selector).add(selector to add);
  • addBack()
    it add the previous set of elements on the stack to the current set, optionally filtered by a selector.
    Syntax:
    $(selector).addBack();
  • andSelf()
    Deprecated 1.8 which is alias of addBack().
    Syntax:
    $(selector).addSelf();
  • contents()
    it gives all direct children, including text and comment nodes, of the specified selector.
    Syntax:
  •  
  • $(selector).contents();
  • not()
    it gives all elements that do not match with specified selector.
    Syntax:
    $(selector).not(selector);
  • end()
    it is most recent filtering operation in the current chain and return the set of matched elements to its previous state and it doesn’t accept any arguments.
    Syntax:
    $(selector).each(callback function);

Collection Manipulation

  • each()
    it iterates over the DOM elements and execute call back function

Example 1:

     <!DOCTYPE html>
<html>

<head>
    <style>
        .siblings * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
    <script>
        $(document).ready(function() {
            $("h2").siblings().css({
                "color": "red",
                "border": "2px solid red"
            });
            $("h2").parent().css({
                "color": "green",
                "border": "2px solid blue"
            });
            $("p").first().css(
            "background-color", "yellow");
            $("p").has("span").css(
            "background-color", "indigo");

        });
    </script>
</head>

<body class="siblings">

    <div>GeeksforGeeks (parent)
        <p>GeeksforGeeks</p>
        <p><span>GeeksforGeeks</span></p>
        <h2>GeeksforGeeks</h2>
        <h3>GeeksforGeeks</h3>
        <p>GeeksforGeeks</p>
    </div>

</body>

</html> 

Example 2:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        p {
            color: grey;
            margin: 10px;
            padding: 10px;
        }
        
        form {
            margin: 10px;
            padding: 10px;
        }
        
        #article b {
            color: blue;
            font-weight: bold;
        }
        
        label {
            color: green;
            font-weight: bold;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
</head>

<body>

    <p><em>Hello</em>GeeksforGeeks</p>
    <p id="article"><b>Article Info: </b></p>
    <form>
        <label>Article Title:</label>
        <input type="text"
            name="article"
            value="jQuery |
                    Traversing Example 2" />
        <br>
        <br>
        <label>Author:</label>
        <input type="text"
            name="author"
            value="Vignesh" />
        <br>
        <br>
        <label>Author's Email id:</label>
        <input type="text"
            name="author"
            value="vignesh@gmail.com" />
        <br>
        <br>
        <label>Website:</label>
        <input type="text"
            name="url"
            value="https://www.geeksforgeeks.org/" />
        <br>
        <br>
    </form>

    <script>
        $("#article")
            .append($("input").map(function() {
                    return $(this).val();
                })
                .get()
                .join(", "));
    </script>
    <script>
        $("p")
            .find("em")
            .end()
            .css("border", "2px red solid");
    </script>

</body>

</html>
 
 

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

jQuery | Traversing

 Programing Coderfunda     September 22, 2020     Jquery     No comments   

 

In jQuery, traversing means moving through or over the HTML elements to find, filter or select a particular or entire element.
Based on the traversing purposes following methods are Categorized as follows:

Tree Traversing:

Ancestors:

  • parent()
    it gives parent element of specified selector
    Syntax:
    $(selector).parent();
  • parents()
    it gives all ancestor elements of the specified selector.
    Syntax:
  •  
    • $(selector).parents();
    • parentsUntil()
      it gives all ancestor elements between specified selector and arguments.
      Syntax:
      $(selector).parentsUntil(selector, filter element)
      
      $(selector).parentsUntil(element, filter element)
      
    • offsetParent()
      it gives the first positioned parent element of specified selector.
      Syntax:
      $(selector).offsetParent();
    • closest()
      it gives the first ancestor of the specified selector.
      Syntax:
      $(selector).closest(selector);
      $(selector).closest(selector, context);
      $(selector).closest(selection);
      $(selector).closest(element);

    Descendants:

  • children()
    it gives the children of each selected elements, optionally filtered by a selector.
    Syntax:
    $(selector).children();
    
  • find()
    it gives descendant elements of specified elements, filtered by a selector, jQuery object, or element.
    Syntax:
    $(selector).find('selector to find');

Siblings:

siblings()
it gives all siblings of the specified selector.
Syntax:

  • $(selector).siblings();
  • next()
    it gives the next sibling element of the specified selector.
    Syntax:
    $(selector).next();
    
  • nextAll()
    it gives all next sibling elements of the specified selector.
    Syntax:
    $(selector).nextAll();
    
  • nextUntil()
    it gives all next sibling elements between specified selector and arguments.
    Syntax:
    $(selector).nextUntil();
    
  • prev()
    it gives the previous sibling element of the specified selector.
    Syntax:
    $(selector).prev(selector);
    
    $(selector).prev()
    
  • prevAll()
    it gives all previous sibling elements of the specified selector.
    Syntax:
    $(selector).prevAll(selector, filter element)
    
    $(selector).prevAll(element, filter element)
    
  • prevUntil()
    it gives all previous sibling elements between specified selector and arguments.
    Syntax:
    $(selector).prevUntil(selector, filter element)
    
    $(selector).prevUntil(element, filter element)
    

Filtering

  • first()
    it gives the first element of the specified selector.
    Syntax:
    $(selector).first();
    
  • last()
    it gives the last element of the specified selector.
    Syntax:
    $(selector).last();
    
  • eq()
    it gives an element with a specific index number of the specified selector.
    Syntax:
  •  
    • $(selector).eq(index);
      
      $(selector).eq( indexFromEnd );
      
    • filter()
      it remove/detect an elements that are matched with specified selector.
      Syntax:
      $(selector).is(selector)
      $(selector).is(function)
      $(selector).is(selection)
      $(selector).is(elements)
    • has()
      it gives all elements that have one or more elements within, that are matched with specified selector.
      Syntax:
      $(selector).has(selector);
      
    • is()
      it checks if one of the specified selector is matched with arguments.
      Syntax:
      .is( selector )
      .is( function )
      .is( selection )
      .is( elements )
    • map()
      Pass each element in the current matched set through a function, producing a new jQuery object containing the return values
      Syntax:
      .map( callback )
    • slice()
      it selects a subset of specified selector based on its argument index or by start and stop value.
      Syntax:
      $(selector).slice(start, end );
      
      $(selector).slice(start);
      

    Miscellaneous Traversing

  • add()
    it add all elements to set of matched elements to manipulate them at the same time.
    Syntax:
    $(selector).add(selector to add);
  • addBack()
    it add the previous set of elements on the stack to the current set, optionally filtered by a selector.
    Syntax:
    $(selector).addBack();
  • andSelf()
    Deprecated 1.8 which is alias of addBack().
    Syntax:
    $(selector).addSelf();
  • contents()
    it gives all direct children, including text and comment nodes, of the specified selector.
    Syntax:
  •  
  • $(selector).contents();
  • not()
    it gives all elements that do not match with specified selector.
    Syntax:
    $(selector).not(selector);
  • end()
    it is most recent filtering operation in the current chain and return the set of matched elements to its previous state and it doesn’t accept any arguments.
    Syntax:
    $(selector).each(callback function);
    

Collection Manipulation

  • each()
    it iterates over the DOM elements and execute call back function

Example 1:

     <!DOCTYPE html>
<html>

<head>
    <style>
        .siblings * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
    <script>
        $(document).ready(function() {
            $("h2").siblings().css({
                "color": "red",
                "border": "2px solid red"
            });
            $("h2").parent().css({
                "color": "green",
                "border": "2px solid blue"
            });
            $("p").first().css(
            "background-color", "yellow");
            $("p").has("span").css(
            "background-color", "indigo");

        });
    </script>
</head>

<body class="siblings">

    <div>GeeksforGeeks (parent)
        <p>GeeksforGeeks</p>
        <p><span>GeeksforGeeks</span></p>
        <h2>GeeksforGeeks</h2>
        <h3>GeeksforGeeks</h3>
        <p>GeeksforGeeks</p>
    </div>

</body>

</html> 

Example 2:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        p {
            color: grey;
            margin: 10px;
            padding: 10px;
        }
        
        form {
            margin: 10px;
            padding: 10px;
        }
        
        #article b {
            color: blue;
            font-weight: bold;
        }
        
        label {
            color: green;
            font-weight: bold;
        }
    </style>
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
</head>

<body>

    <p><em>Hello</em>GeeksforGeeks</p>
    <p id="article"><b>Article Info: </b></p>
    <form>
        <label>Article Title:</label>
        <input type="text"
            name="article"
            value="jQuery |
                    Traversing Example 2" />
        <br>
        <br>
        <label>Author:</label>
        <input type="text"
            name="author"
            value="Vignesh" />
        <br>
        <br>
        <label>Author's Email id:</label>
        <input type="text"
            name="author"
            value="vignesh@gmail.com" />
        <br>
        <br>
        <label>Website:</label>
        <input type="text"
            name="url"
            value="https://www.geeksforgeeks.org/" />
        <br>
        <br>
    </form>

    <script>
        $("#article")
            .append($("input").map(function() {
                    return $(this).val();
                })
                .get()
                .join(", "));
    </script>
    <script>
        $("p")
            .find("em")
            .end()
            .css("border", "2px red solid");
    </script>

</body>

</html>
 
 

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

18 June, 2019

Jquery Checkbox check all

 Programing Coderfunda     June 18, 2019     Checkbox, Jquery     No comments   

<input type="checkbox" id="checkAll" > Check All
    <hr />
    <input type="checkbox" id="checkItem"> Item 1
    <input type="checkbox" id="checkItem"> Item 2
    <input type="checkbox" id="checkItem"> Item3


<script>
$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});
</script>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

Jquery Checkbox check all

 Programing Coderfunda     June 18, 2019     Checkbox, Jquery     No comments   

<input type="checkbox" id="checkAll" > Check All
    <hr />
    <input type="checkbox" id="checkItem"> Item 1
    <input type="checkbox" id="checkItem"> Item 2
    <input type="checkbox" id="checkItem"> Item3


<script>
$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});
</script>
Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg

15 January, 2019

JqueryUI - Dialog

 Programing Coderfunda     January 15, 2019     Jquery, JqueryUI - Dialog     No comments   

JqueryUI - Dialog

Dialog boxes are one of the nice ways of presenting information on an HTML page. A dialog box is a floating window with a title and content area. This window can be moved, resized, and of course, closed using "X" icon by default.
jQueryUI provides dialog() method that transforms the HTML code written on the page into HTML code to display a dialog box.

Syntax

The dialog() method can be used in two forms −
  • $(selector, context).dialog (options) Method
  • $(selector, context).dialog ("action", [params]) Method

$ (selector, context).dialog (options) Method

The dialog (options) method declares that an HTML element can be administered in the form of a dialog box. The options parameter is an object that specifies the appearance and behavior of that window.

Syntax

$(selector, context).dialog(options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).dialog({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
Sr.No.Option & Description
1appendTo If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is true.
2autoOpen This option unless set to false, the dialog box is opened upon creation. When false, the dialog box will be opened upon a call to dialog('open'). By default its value is true.
3buttons This option adds buttons in the dialog box. These are listed as objects, and each property is the text on the button. The value is a callback function called when the user clicks the button. By default its value is {}.
4closeOnEscape Unless this option set to false, the dialog box will be closed when the user presses the Escape key while the dialog box has focus. By default its value is true.
5closeText This option contains text to replace the default of Close for the close button. By default its value is "close".
6dialogClass If this option is set to false, it will prevent the ui-draggable class from being added in the list of selected DOM elements. By default its value is "".
7draggable Unless you this option to false, dialog box will be draggable by clicking and dragging the title bar. By default its value is true.
8height This option sets the height of the dialog box. By default its value is "auto".
9hide This option is used to set the effect to be used when the dialog box is closed. By default its value is null.
11maxHeight This option sets maximum height, in pixels, to which the dialog box can be resized. By default its value is false.
12maxWidth This option sets the maximum width to which the dialog can be resized, in pixels. By default its value is false.
13minHeight This option is the minimum height, in pixels, to which the dialog box can be resized. By default its value is 150.
14minWidth This option is the minimum width, in pixels, to which the dialog box can be resized. By default its value is 150.
15modal If this option is set to true, the dialog will have modal behavior; other items on the page will be disabled, i.e., cannot be interacted with. Modal dialogs create an overlay below the dialog but above other page elements. By default its value is false.
16position This option specifies the initial position of the dialog box. Can be one of the predefined positions: center (the default), left, right, top, or bottom. Can also be a 2-element array with the left and top values (in pixels) as [left,top], or text positions such as ['right','top']. By default its value is { my: "center", at: "center", of: window }.
17resizable This option unless set to false, the dialog box is resizable in all directions. By default its value is true.
18show This option is an effect to be used when the dialog box is being opened. By default its value is null.
20title This option specifies the text to appear in the title bar of the dialog box. By default its value is null.
21width This option specifies the width of the dialog box in pixels. By default its value is 300.
The following section will show you a few working examples of dialog functionality.

Default functionality

The following example demonstrates a simple example of dialog functionality passing no parameters to the dialog() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background
:#b9cd6d;
border
: 1px solid #b9cd6d;
color
: #FFFFFF;
font
-weight: bold;
}
</style>

<!-- Javascript -->
<script>
$
(function() {
$
( "#dialog-1" ).dialog({
autoOpen
: false,
});
$
( "#opener" ).click(function() {
$
( "#dialog-1" ).dialog( "open" );
});
});
</script>
</head>

<body>
<!-- HTML -->
<div id = "dialog-1"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener">Open Dialog</button>
</body>
</html>
Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of buttons, title and position

The following example demonstrates the usage of three options buttons, title and position in the dialog widget of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background
:#b9cd6d;
border
: 1px solid #b9cd6d;
color
: #FFFFFF;
font
-weight: bold;
}
</style>

<!-- Javascript -->
<script>
$
(function() {
$
( "#dialog-2" ).dialog({
autoOpen
: false,
buttons
: {
OK
: function() {$(this).dialog("close");}
},
title
: "Success",
position
: {
my
: "left center",
at
: "left center"
}
});
$
( "#opener-2" ).click(function() {
$
( "#dialog-2" ).dialog( "open" );
});
});
</script>
</head>

<body>
<!-- HTML -->
<div id = "dialog-2"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-2">Open Dialog</button>
</body>
</html>
Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of hide, show and height

The following example demonstrates the usage of three options hide, show and height in the dialog widget of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background
:#b9cd6d;
border
: 1px solid #b9cd6d;
color
: #FFFFFF;
font
-weight: bold;
}
</style>

<!-- Javascript -->
<script>
$
(function() {
$
( "#dialog-3" ).dialog({
autoOpen
: false,
hide
: "puff",
show
: "slide",
height
: 200
});
$
( "#opener-3" ).click(function() {
$
( "#dialog-3" ).dialog( "open" );
});
});
</script>
</head>

<body>
<!-- HTML -->
<div id = "dialog-3"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-3">Open Dialog</button>
</body>
</html>
Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

Use of Modal

The following example demonstrates the usage of three options buttons, title and position in the dialog widget of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background
:#b9cd6d;
border
: 1px solid #b9cd6d;
color
: #FFFFFF;
font
-weight: bold;
}
</style>

<!-- Javascript -->
<script>
$
(function() {
$
( "#dialog-4" ).dialog({
autoOpen
: false,
modal
: true,
buttons
: {
OK
: function() {$(this).dialog("close");}
},
});
$
( "#opener-4" ).click(function() {
$
( "#dialog-4" ).dialog( "open" );
});
});
</script>
</head>

<body>
<!-- HTML -->
<div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-4">Open Dialog</button>
<p>
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.
</p>
<label for = "textbox">Enter Name: </label>
<input type = "text">
</body>
</html>
Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

$ (selector, context).dialog ("action", [params]) Method

The dialog (action, params) method can perform an action on the dialog box, such as closing the box. The action is specified as a string in the first argument and optionally, one or more params can be provided based on the given action.
Basically, here actions are nothing but they are jQuery methods which we can use in the form of string.

Syntax

$(selector, context).dialog ("action", [params]);
The following table lists the actions for this method −
Sr.No.Action & Description
1close() This action closes the dialog box. This method does not accept any arguments.
2destroy() This action removes the dialog box competely. This will return the element back to its pre-init state. This method does not accept any arguments.
3isOpen() This action checks if the dialog box is open. This method does not accept any arguments.
4moveToTop() This action positions the corresponding dialog boxes to the foreground (on top of the others). This method does not accept any arguments.
5open() This action opens the dialog box. This method does not accept any arguments.
6option( optionName ) This action gets the value currently associated with the specified optionName. Where optionName is the name of the option to get.
7option() This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any arguments.
8option( optionName, value ) This action sets the value of the dialog option associated with the specified optionName.
9option( options ) This action sets one or more options for the dialog.
10widget() This action returns the dialog box’s widget element; the element annotated with the ui-dialog class name. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of isOpen(), open() and close() methods.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background
:#b9cd6d;
border
: 1px solid #b9cd6d;
color
: #FFFFFF;
font
-weight: bold;
}
</style>

<!-- Javascript -->
<script type = "text/javascript">
$
(function() {
$
("#toggle").click(function() {
($("#dialog-5").dialog("isOpen") == false) ? $(
"#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
});
$
("#dialog-5").dialog({autoOpen: false});
});
</script>
</head>

<body>
<button id = "toggle">Toggle dialog!</button>
<div id = "dialog-5" title = "Dialog Title!">
Click on the Toggle button to open and close this dialog box.
</div>
</body>
</html>
Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Event Management on Dialog Box

In addition to the dialog (options) method which we saw in the previous sections, JqueryUI provides event methods as which gets triggered for a particular event. These event methods are listed below −
Sr.No.Event Method & Description
1beforeClose(event, ui) This event is triggered when the dialog box is about to close. Returning false prevents the dialog box from closing. It is handy for dialog boxes with forms that fail validation. Where event is of type Event, and ui is of type Object.
2close(event, ui) This event is triggered when the dialog box is closed. Where event is of type Event, and ui is of type Object.
3create(event, ui) This event is triggered when the dialog box is created. Where event is of type Event, and ui is of type Object.
4drag(event, ui) This event is triggered repeatedly as a dialog box is moved about during a drag. Where event is of type Event, and ui is of type Object.
5dragStart(event, ui) This event is triggered when a repositioning of the dialog box commences by dragging its title bar. Where event is of type Event, and ui is of type Object.
6dragStop(event, ui) This event is triggered when a drag operation terminates. Where event is of type Event, and ui is of type Object.
7focus(event, ui) This event is triggered when the dialog gains focus. Where event is of type Event, and ui is of type Object.
8open(event, ui) This event is triggered when the dialog box is opened. Where event is of type Event, and ui is of type Object.
9resize(event, ui) This event is triggered repeatedly as a dialog box is resized. Where event is of type Event, and ui is of type Object.
10resizeStart(event, ui) This event is triggered when a resize of the dialog box commences. Where event is of type Event, and ui is of type Object.
11resizeStop(event, ui) This event is triggered when a resize of the dialog box terminates. Where event is of type Event, and ui is of type Object.
The following examples demonstrate the use of the events listed in the above table.

Use of beforeClose Event method

The following example demonstrates the use of beforeClose event method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background
:#b9cd6d;
border
: 1px solid #b9cd6d;
color
: #FFFFFF;
font
-weight: bold;
}
.invalid { color: red; }
textarea
{
display
: inline-block;
width
: 100%;
margin
-bottom: 10px;
}
</style>

<!-- Javascript -->
<script type = "text/javascript">
$
(function() {
$
( "#dialog-6" ).dialog({
autoOpen
: false,
buttons
: {
OK
: function() {
$
( this ).dialog( "close" );
}
},
beforeClose
: function( event, ui ) {
if ( !$( "#terms" ).prop( "checked" ) ) {
event
.preventDefault();
$
( "[for = terms]" ).addClass( "invalid" );
}
},
width
: 600
});
$
( "#opener-5" ).click(function() {
$
( "#dialog-6" ).dialog( "open" );
});
});
</script>
</head>

<body>
<div id = "dialog-6">
<p>You must accept these terms before continuing.</p>
<textarea>This Agreement and the Request constitute the entire agreement of the
parties with respect to the subject matter of the Request. This Agreement shall be
governed by and construed in accordance with the laws of the State, without giving
effect to principles of conflicts of law.
</textarea>
<div>
<label for = "terms">I accept the terms</label>
<input type = "checkbox" id = "terms">
</div>
</div>
<button id = "opener-5">Open Dialog</button>
</body>
</html>
Let us save the above code in an HTML file dialogexample.htm and open it in a standard browser which supports javascript,

 

Read More
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Older Posts Home

Meta

Popular Posts

  • Write API Integrations in Laravel and PHP Projects with Saloon
    Write API Integrations in Laravel and PHP Projects with Saloon Saloon  is a Laravel/PHP package that allows you to write your API integratio...
  • Credit card validation in laravel
      Validation rules for credit card using laravel-validation-rules/credit-card package in laravel Install package laravel-validation-rules/cr...
  • Fast Excel Package for Laravel
      Fast Excel is a Laravel package for importing and exporting spreadsheets. It provides an elegant wrapper around Spout —a PHP package to ...
  • iOS 17 Force Screen Rotation not working on iPAD only
    I have followed all the links on Google and StackOverFlow, unfortunately, I could not find any reliable solution Specifically for iPad devic...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda