NodeJs simple web scraper using cheerio

NodeJs simple web scraper using cheerio package. Using web scraper we can get the special kind of information from another website. For example, If you want to get the quick news you can create the web scraper for getting the lists of news. Today, We learn NodeJs simple web scraper using cheerio

Continue reading NodeJs simple web scraper using cheerio

jQuery select2 get selected value using jQuery.

jQuery select 2 is the most popular javascript framework for the select dropdown. jQuery select 2 provide beautiful functionality for searching value from the dropdown option. jQuery select 2 is the best solution for the dropdown because We can easily render more than thousand of data on the dropdown.

Continue reading jQuery select2 get selected value using jQuery.

Google Map API set marker to current user location

How to get current user location using Google map API and set the google map marker to the current user location with Info window.  Yes, it is possible to get the current user location using Google map API.

Continue reading Google Map API set marker to current user location

Javascript validation to allow the only numeric value in the text field.

How to set the validation to allow only numeric value in the HTML text field using JAVASCRIPT. We can set the validation using window keycode event on JAVASCRIPT. Like we want to allow the user only able to enter the numeric value in the text field just we need to set JAVASCRIPT function called on KeyPress like below.

Continue reading Javascript validation to allow the only numeric value in the text field.

jQuery chosen select value using jQuery

jQuery chosen is the best library for maintaining the HTML select dropdown. jQuery select box is developer friendly and user-friendly library. The developer can easily customize the design as he/she want. You can get more detail from here.

Let’s how we can change the chosen dropdown value using jQuery. Normally we can change the Dropdown value like.

Continue reading jQuery chosen select value using jQuery

How to remove duplicate value from the array using JAVASCRIPT?

Many time we get the array with contains the duplicate value. how we can find that duplicate value form array and remove it easily. Let’s see how we can remove duplicate value from JAVASCRIPT array.

Continue reading How to remove duplicate value from the array using JAVASCRIPT?

VueJs add more

How to create field add more using VueJs. VueJs is the JAVASCRIPT fast and easy to use the framework. Let’s see how we can create field add more using VueJs step by step.

Let’s first create HTML for our field.

    
    <style type="text/css">
        .fieldAvailabilityContainer .fieldAvailability .form-group{
            width: 250px;
            display: inline-block;
        }
    </style>

    <div class="container fieldAvailabilityContainer">
        <div class="row">
            <div class="col-md-12">
                <section class="content-header clearfix">
                    <h1 class="pull-left">VueJs Add More</h1>
                </section>
                <div class="fieldAvailability">
                    <div id="addAvailability">
                        <div class="dateAvailability" v-for="(field, index) in fields">
                            <div class="form-group">
                                <input type="text" v-model='field.field' class="form-control field" placeholder="Text">
                            </div>
                            <a href="#" v-if="index == 0" class="btn btn-success" v-on:click="addNewField">
                                <i class="fa fa-plus"></i>
                            </a>
                            <a href="#" v-if="index > 0" class="btn btn-danger" v-on:click="removeThisField(index)">
                                <i class="fa fa-minus"></i>
                            </a>
                        </div>
                        <input type="submit" name="submit" class="btn btn-success" value="submit" v-on:click="submitForm">
                    </div>
                </div>
            </div>      
        </div>
    </div>

Now we can write the code of VueJs for add more field.

    <script type="text/javascript">

        var addAvailability = new Vue({
            el: '#addAvailability',
            data: {
                fields : [{
                    field : '',
                }],
            },
            methods: {
                addNewField: function () {
                    this.fields.push({
                        field: '',
                    });
                },
                removeThisField : function(index){
                    this.fields.splice(index, 1);
                },
                submitForm : function(){
                    console.log( this.fields );
                    return false;
                },
            }
        });

    </script>

So Let’s see it’s too easy to create add more field using VueJs. you can easily manage to add more fields to write some lines of code using VueJs like as above.

If you face any issue after using this code write the comment below.

AdminLte active current menu using JAVASCRIPT

AdminLte is the most popular and open source admin theme. many developers used AdminLte for developing admin panel. Many Developers use PHP if condition for active the current sidebar menu. It’s hard to manage with if condition when we have many sidebar menus.

I think we should use JAVASCRIPT for active the current menu for the sidebar. it’s too easy and simple js snippets.

$(document).ready(function(){

    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function() {
        return this.href == url;
    }).parent().addClass('active');
});

Just add above code into your javascript file. then checked the “active” class is add onto your current menu.