Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Wednesday 25 March 2015

How to add new row in existing table using jQuery

How to add new row in existing table using jQuery

I have following existing table


<table id="myTestTable"> <tbody> <tr>.......</tr> <tr>.......</tr> <tr>.......</tr> <tr>.......</tr> </tbody> </table>

Currently, It have Total 4 Rows.
I want to add one more row, Just after the last table row. Which should look like below:


<table id="myTestTable"> <tbody> <tr>.......</tr> <tr>.......</tr> <tr>.......</tr> <tr>.......</tr> <tr>.......</tr> </tbody> </table>

Now, how can I add new table-row in existing table in single line?.

Soltion:
Step 1: Add jQuery file in webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>


Step 2: Just add following script when you want to add new table row in existing table.
$('table#myTestTable tr:last').after('...');
It will add one new row in exiting table @ the end each time you call this script.




Monday 23 March 2015

How to Include a JavaScript file in another JavaScript file?

How to Include a JavaScript file in another JavaScript file?

Including a javascript file in another javascript file is common in web development.
Because many times we include the javascript file at run time on the behalf of some conditions.

So, we can achieve this using javascript as well as using jQuery.


Method 1: Use JavaScript to include another JavaScript file.
Step 1: Add following function in web page.
function loadScript(url)
{    
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    head.appendChild(script);
}

Step 2:just call the below loadScript function, Where you want to include the js file.
 loadScript('/js/jquery-1.7.min.js');



Method 2: Use jQuery to include another javasScript file .
Step 1: Add jQuery File in your webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> Step 2: Just call the  getScript  function functions.
 jQuery(document).ready(function(){
    $.getScript('/js/jquery-1.7.min.js');
});




Saturday 21 March 2015

How can I get query string values in JavaScript and jQuery?

How can I get query string values in JavaScript and jQuery?

I want to get the values from the Query String (means from URL), values are dynamic but query string variable is constant.

Suppose, I have following URL:
http://www.example.com/country.php?id=10&c=country

Now, I want to get the value of following query string.
id //currently it is 10, but it is dynamic.
c //currently it is country, but it is dynamic.


Solution 1: Get the value of query string with JavaScript.
Step 1: Add following javaScript function in your page.
   
function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        result = regex.exec(location.search);
    return result === null ? "" : decodeURIComponent(result[1].replace(/\+/g, " "));
}

Step 2: Use getParam function to get the query string values. See below:
console.log(getParam('id'));
console.log(getParam('c'));



Solution 2: Get the value of query string with jQuery.
Step 1: Add jQuery File in your webpage.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

Step 2: Add following jQuery function in web page.
jQuery(document).ready(function(){
  $.getParamJquery = function(name, url) {
      if (!url) {
       url = window.location.href;
      }
      var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
      if (!results) { 
          return undefined;
      }
      return results[1] || undefined;
  }
  
});

Step 3: Use getParamJquery function to get the query String values. See below:
jQuery(document).ready(function(){
  console.log($.getParamJquery('id'));   
  console.log($.getParamJquery('c'));
}





Saturday 3 January 2015

How to Add attribute in A-Tag using jQuery

How to Add attribute in A-Tag using jQuery


Following is HTML:
<div class="links">
<a href="http://www.web-technology-experts-notes.in/2014/12/bootstrap-interview-questions-and-answers-for-experienced.html">link1</a>
<a href="http://www.web-technology-experts-notes.in/2014/12/seo-interview-questions-and-answers.html">link2</a>
</div>


Output Should be:
<div class="links">
<a href="http://www.web-technology-experts-notes.in/2014/12/bootstrap-interview-questions-and-answers-for-experienced.html" target="_blank">link1</a>
<a href="http://www.web-technology-experts-notes.in/2014/12/seo-interview-questions-and-answers.html" target="_blank">link2</a>
</div>



Following are Simple ways to do this Using jQuery.
$(document).ready(function() {
    $('div.links p a').attr('target', '_blank');
});

We can also add custom attribute in any html tag.





Monday 27 October 2014

Lightbox vs Fancybox

Lightbox vs Fancybox

Lightbox: It is a lightweight jQuery plugin  used for showing images in overlay on the website.

Following are feature of Lightbox plugin.
  1.     Show image in overlay.
  2.     Show the Title of image in Overlay.
  3.     Show image gallery in overlay with "Left", "Right" Button.
  4.     In Image gallery, It support image movement with "Left" & "Right" keys.
  5.     Open Iframe in overlay does not support.
Demo & Downloadhttp://lokeshdhakar.com/projects/lightbox2/ 




Fancybox: It is jQuery plugin used for displaying images, videos (like youtube) on  iframe and map etc in overlay on the website.

Following are feature of  Fancybox plugin.
  1.     Show image in overlay.
  2.     Show the Title of image in Overlay.
  3.     Show image gallery in overlay with "Left", "Right" Button.
  4.     In Image gallery, It support image movement with "Left" & "Right" keys.
  5.     Open Iframe in overlay - You can play youtube video in overlay.
  6.     Support Ajax Processing Data.
  7.     Play SWF Files in overlay.
  8.     Google Map in Iframe.
  9.     Support callback function when open pages in overlay.
  10.     Handling "Not existing URL/Image" by plugin itself.