Archive

Archive for the ‘Jquery’ Category

Ajax File Upload without iframe

February 10, 2015 Leave a comment

The Invisible I-frame File Upload method works in almost all browsers.

This post explains using FormData to submit forms that is supported by most new browsers.

<?
if( isset($_POST) && ! empty($_POST) ) {
 
     $file = $_FILES['myfile'];
 
     $output ="Response From the Server\n";
     $output .= "myInput = ".$_POST['myInput'];
     $output .= "\n".'File Name: '.$file['name'];
     $output .= "\n".'File Type: '.$file['type'];
     $output .= "\n".'File Size: '.$file['size'];
     $output .= "\n".'File Tmp Name: '.$file['tmp_name'];
 
     echo $output;
     exit;
}
?>

<html>
<head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
     <script type="text/javascript">
         jQuery(document).ready(function($){

         /**
          * when the file is selected 
          */ 
          $("#myfile").change(function() {

               var file = $('#myfile')[0].files[0];

               // new form data 
               var formData = new FormData();
               formData.append('myfile', file); // add the file details
               formData.append('myInput', "Hello World"); // add other data as required
 
               // make an ajax post request 
               $.ajax({
                   url: '/test/file.php',
                   type: 'POST',
                   data: formData,
                   processData: false, // this has to be set to false
                   contentType: false, // this has to be set to false
                   error: function(jqXHR, textStatus, errorThrown){
                       alert("Failed"); 
                   },
                   success: function(data) {
                       alert(data);
                   }
              });
         });
     });
 
 </script>
</head>
<body>
    <input type="file" name="myfile" id="myfile">
</body>
</html>
Categories: Jquery, LAMP, Web Development

Dynamically loading CSS and JS files using jQuery

June 26, 2013 25 comments

Simple tutorial on how we can use jquery to load CSS and JS files as and when we require them

We will create 4 files ( in the same directory of your web root – mine is /var/www/test )

  • index.html : the main html file
  • main.js : the main JS file which will be included in main.html along with the jquery library
  • style.css : this file will be dynamically loaded using main.js
  • one.js :¬†this file will be dynamically loaded using main.js

the files are here – rest of this is self explanatory ūüôā

index.html

<html>
 <head>
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="main.js"></script>
 </head>
 <body>
 <h3 class="red">This red color is from dynamically loaded css file</h3>
 </body>
</html>

main.js

jQuery(document).ready(function($){
 
 /**
  * function to load a given css file 
  */ 
 loadCSS = function(href) {
     var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
     $("head").append(cssLink); 
 };

/**
 * function to load a given js file 
 */ 
 loadJS = function(src) {
     var jsLink = $("<script type='text/javascript' src='"+src+"'>");
     $("head").append(jsLink); 
 }; 
  
 // load the css file 
 loadCSS("style.css");

 // load the js file 
 loadJS("one.js");

});

style.css

.red {
    color: red;
}

one.js

jQuery(document).ready(function($){

    alert("This alert is from dynamically loaded js file");

});

jQuery select lists

November 7, 2011 Leave a comment

Get the value of the selected item 

$("listBoxSelector :selected").val();

Get the text of the selected item 

$("listBoxSelector :selected").text();

Get multiple selected values ( or loop through all selected values )

$("listBoxSelector :selected").each(function(i, selected){
     var value = $(selected).val();
     var text = $(selected).text();
});

Empty a list 

$("listBoxSelector").empty();

Append Options to a list 

for(var i in options_list) {
  $("listBoxSelector").append(
     $('<option></option>').val(i).html(options_list[i])
  );
}

Un-select all items from a list 

$(listBoxSelector).find("option").attr("selected", false);
Categories: Jquery

Jquery Tips

November 3, 2010 Leave a comment

Contains common Jquery code

  • Display jQuery version
alert(jQuery.fn.jquery);
  • Find how many check boxes have been checked
var count = $('input[type=checkbox]:checked').length;
  • Get ID, class of an element
var element_id = $(this).attr('id');   or element_id = this.id;
var class = $(this).attr('class');   or class = this.class;
  • Set the attribute of an element
$(this).attr('class', 'new-class');
$(this).attr('title', 'new-title');
  • Set multiple attributes for an element
$('this').attr({
  class: 'new-class',
  title: 'new-title'
});
  • Checking and Un-checking a check-box
this.checked = false; //un-check
this.checked = true;  //check
  • Loop through all check-boxes and find if they are checked
$('input[type=checkbox]').each(function () {    
    var is_checked = (this.checked ? "1" : "0");
});
  • Loop through all radio buttons in a form
$("#form-id").find(':radio').each(function() {
   radio_id = $(this).attr('id');
   radio_name = $(this).attr('name');
});
  • Find all child radio elements
        $("parent").find('input:radio');
  • Find all child radio elements that are selected
        $("parent").find('input:radio:checked');
  • PHP like explode and implode functions in Javascript
//explode
var my_string = "abc-def-ghi-jkl";
var my_array = [];
my_array = my_string.split("-");

//implode
var my_array = new Array('abc', 'def', 'ghi', 'jkl');
var my_string = "";
my_string = my_array.join("-");
  • Disable all radios of a group
$('input:radio[name=radio-group-name]').attr('disabled', true);
  • Get the value of the selected radio button in a group
$('input:radio[name=radio-group-name]').val();
  • Disable all input elements in a form (input, textarea, select and button)
$("#form-id :input").attr("disabled", true);
  • Disable only input elements of a form
$("#form-id input").attr("disabled", true);
  • Get the current page url
var current_page_url = window.location.pathname;
  • jQuery Table parsing
Lets say you have a table like this 

<table id='table-1' border="1">
  <tr id='row-1'>
      <td id='td-1'>Value 1</td>
      <td id='td-2'></td>
  </tr>
  <tr id='row-2'>
      <td id='td-3'>Value 2</td>
      <td id='td-4'>Value 3</td>
      <td id='td-5'></td>
      <td id='td-6'></td>
  </tr>
</table>

$("#row-1").parent(); //references table-1
$("#row-2").parent(); //references table-1
$("#row-1").parent().attr('id'); //gets id=table-1
$("#row-1").next(); //references row-2
$("#row-2").prev(); //references row-1
$("#row-2").previous().attr('id'); //gets id=row-1
$("#td-1").next(); //references td-2
$("#td-2").prev(); //references td-1
$("#td-2").next(); //undefined
$("#td-3").next(); //references td-4
$("#td-4").prev(); //references td-3
$("#td-3").siblings(":eq(0)"); //references td-4
$("#td-3").siblings(":eq(1)"); //references td-5
$("#td-3").siblings(":eq(2)"); //references td-6
$("#td-3").siblings(":eq(0)").text(); //gets 'Value 3'
$("#td-4").siblings(":eq(0)"); //references td-5
$("#td-4").siblings(":eq(1)"); //references td-6
$("#td-4").siblings(":eq(-1)"); //undefined :eq() takes only +ve input
$("#td-4").siblings().eq(0); //references index[0] in all siblings: td-3
$("#td-4").siblings().eq(1); //references td-5
$("#td-4").siblings().eq(2); //references td-6
$("#td-4").siblings().eq(-1); //references td-6 : reverse index
Categories: Jquery