Web Code Logics

Improve your skills

Showing posts with label JQuery UI. Show all posts
Showing posts with label JQuery UI. Show all posts

December 20, 2016

Show Bootstrap Modal Popup on Button Click in jQuery with Example

, , , , No comments

In this article, we will discuss about how to  show bootstrap modal popup on button click using jQuery with example and live demo.

Write the code as shown below-

 HTML:
<body style="background: #E0EDFA; margin-top: 100px;">

    <div style="text-align: center; width: 100%;">
        <!--Button to Show Basic modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicModalPopup">Basic Modal</button>
        <!--Button to Show Large modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#largeModalPopup">Large Modal</button>
        <!--Button to Show Small modal -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallModalPopup">Small Modal</button>
    </div>

    <!-- Basic Bootstrap Modal Popup -->
    <div id="basicModalPopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="basicModalLabel">Basic Modal Title</h4>
                </div>
                <div class="modal-body">
                    Welcome to <a href="http://webcodelogics.com" target="_blank">webcodelogics.com</a><br/>
                    
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Large Bootstrap Modal Popup -->
    <div id="largeModalPopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="largeModalLabel">Large Modal Title</h4>
                </div>
                <div class="modal-body">
                    Welcome to <a href="http://webcodelogics.com" target="_blank">webcodelogics.com</a><br/>
                    We can make bootstrap modal larger by adding an extra class '.modal-lg' with class '.modal-dialog'.<br/>
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Small Bootstrap Modal Popup -->
    <div id="smallModalPopup" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="smallModalLabel">Small Modal Title</h4>
                </div>
                <div class="modal-body">
                    Welcome to <a href="http://webcodelogics.com" target="_blank">webcodelogics.com</a><br/>
                     We can make bootstrap modal smaller by adding an extra class '.modal-sm' with class '.modal-dialog'.<br/>
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

</body>

After that, attach the jquery library link, bootstrap jquery link and bootstrap css link in head part as shown below-

JS:
<head>
    <title>Show Bootstrap Modal Popup on Button Click in jQuery with Example</title> 
    <!-- jQuery Library Link -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <!-- Bootstrap compiled and minified CSS Link -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <!-- Bootstrap compiled and minified JavaScript Link -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
Now save the file and run on browser to view the bootstrap modal popup result.

Preview:
show-hide-bootstrap-modal-popup-on-button-click-in-jquery-with-example-and-live-demo


 Live Demo:








Read More

September 14, 2016

Add Simple Auto Complete Search to Input Box like Google using JQuery UI

, , , , , No comments

In this tutorial, we learn how to implement auto-complete search textbox like google using jQuery UI. We can easily display a list of suggestions from the beginning of the word typed in a text box. Auto-complete prevents the user from having to enter an entire word or a set of words.

Here we have implemented a basic autocomplete with a local array as its data source. The source option is mandatory to which we are specifying a local array of strings. Once the user starting to enter country name, the auto suggested countries would be listed under the textbox. These auto suggested countries would be fetched from the list of the countries defined in our array.

First, we declare a input text box in <body> element as show in below-

HTML:
<body>
    <form>
        <input id="txtSearch" type="text" placeholder="Search Country" /><br/>
        <span id="lblMsg" style="color:green;"></span>
    </form>
</body>

After that, attach the jQuery library and jQuery UI link on your <head> part of page and write the below javascript code in head part shown as below-

JS:
<head>
<title>Add Simple Autocomplete Search to input box using jQuery UI</title>

 <!-- Load jQuery, jQuery UI and jQuery ui styles from jQuery website -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <script type="text/javascript">

 /* list of array of countries as its local data source*/
var data = ["Afghanistan", "Australia", "Bangladesh", "Canada", "China", "France", "Germany", "India", "Indonesia", "Iran", "Italy", "Japan", "Nepal", "New Zealand", "Pakistan", "Russia", "Saudi Arabia", "Sri Lanka", "United Arab Emirates", "United Kingdom", "Zimbabwe"];

 $(document).ready( function () {
/* binding the text box with the jQuery Auto complete function. */
$("#txtSearch").autocomplete({
/*source refers to the list of countries that are available in the auto complete list. */
source:data,
autoFocus:true,
/*call this function after select value from autocomplete suggestions */
select: function (event, ui) {
$("#lblMsg").html("You selected: " + ui.item.label);
},
/*minLength defines, minimum character in textbox to show suggestions */
minLength: 0,
/*show autocomplete suggestions list on textbox focus.  */
}).focus(function () {
$(this).autocomplete("search", "");
});
});

 </script>
</head>

Now, save and run the file in browser and when we start typing the first alphabet, it is matched against a list of the countries defined in our array and the matches get displayed in a drop-down menu attached to the textbox.

Result:


Live Demo (Try it):





 If you like this, please share with your friends...



Read More
Subscribe to: Posts (Atom)

Subscribe for Latest Update

Popular Posts