Extract parameters from url using javascript or jquery in html file.

 

Parsing url in jquery or javascript to extract parameter from url in html file

If you are using a html file and you have to receive some parameters from url , then
below is the method you are looking for.

Only this you have to do ... is to call getUrlVars with field name to extract as done in this statement  :

var first_name = getUrlVars()["first_name"];  

Jquery not loading properly on clicking links in mobile site.

 

Jquery not loading properly on clicking links in mobile site.

Today while working on a mobile site , i went through a strange problem. Everything works well on site when i refresh page but when i click on links then my jquery and css are not loading properly. Resulting in improper design. After searching about the problem i came to know that on mobile jquery loads only on first page on all other pages its use preloaded js and css.

More you can read at : http://demos.jquerymobile.com/1.2.1/docs/pages/page-scripting.html

Now to solve this problem . I added rel='external'  to every link . Now whenever i click on link my jquery and css are loading properly.

Highlight/Blink effect using jquery

We often use blink in html to get users attention but it makes our info unreadable and irritating. So today i am sharing a small jquery code which will produce same effect. And can be easily edit according to need.

 function blink(){
      $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
      }
 self.setInterval(function(){blink()},1000);

This is small code which can do the whole thing work. Self.setInterval() is function which will call itself after 1 sec and call blink function. 

For more details run the below example : 

Iteration through array with delay in jquery

What my problem is I have an array and i have to pass array element to some function with some delay between each call. Now if i iterate using loop the iteration has already been completed before calling function and i am only able to pass last value of my array to function. To deal with this i found a way using recursion such that there is delay between my each call to function.

Now in my example :
l is length of array
arr is array
k is index
tex is my function i am calling

Example:

 var k=0;
 var arr=[1,2,3,4,5,6,7,8];
 function tex(arr,k,l){
                    if(k<l){ 
                                 alert(arr[k]);
                                 setTimeout(function() { k++; tex(arr,k,l); },3000);
                               }
                }
  tex(arr,k,8);    

This is basic structure of code and it will call tex() after each 3 sec and tex will alert array elements one by one.

To understand more run below example:

Close button not showing on jquery ui dialog form

This problem might occur when you call jquery ui css file local system. The problem is your script is able to findat provided url given in css file. To fix the error you need to made change to two lines in css file.
Change the text with in red  at line number 823 and 840 with

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lhmuG3GfNdP1UeMC2iLdF67anzBF0q71xpd7WwTPkfthDDQJAKB6qOhSvUnfOFyEbXjmOYIL48MHvuiaWY15QcbPYHjFdLD-I8EcA-co_7t9QX0hC7FjBCnUxbMpdUqUfqP8INUh6KI/s1600/close.gif

Corrected statement will be :

background: #dadada url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2lhmuG3GfNdP1UeMC2iLdF67anzBF0q71xpd7WwTPkfthDDQJAKB6qOhSvUnfOFyEbXjmOYIL48MHvuiaWY15QcbPYHjFdLD-I8EcA-co_7t9QX0hC7FjBCnUxbMpdUqUfqP8INUh6KI/s1600/close.gif ) 50% 50% repeat-x;
1. At line number 823

.ui-widget-header .ui-state-default {

border: 1px solid #d3d3d3;

background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50%   50% repeat-x;

font-weight: normal;

color: #555555;

}

2. At line number number 840

.ui-widget-header .ui-state-focus {
    border: 1px solid #999999;
    background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; 

     font-weight: normal;
    color: #212121;
}

Multiple file upload with form submit using ajax

File upload  in ajax form is always a headache to newbie. Today i am sharing a simple tutorial to upload files in ajax. What you have to do is ,just copy two files one containing form and other receiving posted data and run them .I have tried it to keep it simple so please ignore the design.

form.php
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.36"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('form').ajaxForm({
    });
    $("#add_file").on("click",function(){
        var ranNum = Math.round(Math.random()*50);
        $("#fileone").append("<div id='file"+ranNum+"'><input type='file' name='file"+ranNum+"' /><button type='button' class='rem' id='rem_file"+ranNum+"'>X</button></div>");
        p_id=ranNum;
    });
    $(document).on("click",".rem",function(){
        var id=$(this).attr('id');
        var ret = id.split("_");
        $("#"+ret[1]).remove();
    });   
});
</script>

Assign a php array to a jquery variable

To assign php array to jquery variable use

var jArray= <?php echo json_encode($phpArray ); ?>;

jArray  is the jquery variable which hold array in jquery and
$phpArray contains my php array ...
----------------------------------------------------------------------------------------------
For more details run below example:

<html>
<head>
</head>
<body>
<b> Hello .. Today we are assigning a php array to jquery variable <b>
<?php $phpArray = array(
          0 => "Mon",
          1 => "Tue",
          2 => "Wed",
          3 => "Thu",
          4 => "Fri",
          5 => "Sat",
          6 => "Sun",

    )?>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
     var jArray= <?php echo json_encode($phpArray ); ?>;
     for(var i=0;i<6;i++){
     alert(jArray[i]);
    }
    alert("Refresh again to see Array-Data    ")
});
</script>
</html>

Send and receive data in ajax/jquery

How to send and receive data in ajax/jquery 

Sample Ajax tutorial in php



We will need two file for this tutorial ...
1. which send request and receive responce (test.php)
2. which receive request and send response (page.php)

On click of button ..the id of button will be send to page.php

And the response which we will get will replace html content of span id "val" .

test.php

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $( ".button" ).on("click",function(){

        $.ajax({
        type:"post",
url: "page.php",
data: {id:$(this).attr('id')},
success: function( data ) {
$( "#val" ).html( "<strong>" + data + "</strong> " );
}
});
        });
});
</script>
</head>
<body>
<button type="button" id="b1" class="button">Button-1</button>
<button type="button" id="b2" class="button">Button-2</button>
<button type="button" id="b3" class="button">Button-3</button>
</br></br></br>
<span id="val" style="background-color:#454282;">Which button is clicked ?<span>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------
page.php

<?php
$id=$_POST['id'];
if($id=="b1"){
echo "Button 1 is clicked ";
}
if($id=="b2"){
echo "Button 2 is clicked ";
}
if($id=="b3"){
echo "Button 3 is clicked ";
}

?>

Append some (text/img) after some html element using jquery

How to append some (text/img) after some html element using jquery 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" >
        $(document).ready(function(){
var i=0;
        $("#sub").on("click",function(){
     $( "#1" ).append("Test "+i+" ... ");
         i++;
         });      
         });
</script>
</head>
<body>
<div id="1">This is my test...</div>
<button type="button"  id="sub">Append</button>
</form>
</body>
</html>

Prepend some (text/img) before some html element using jquery

How to prepend some (text/img) before some html element using jquery 

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" >
        $(document).ready(function(){
var i=0;
            $("#sub").on("click",function(){
$( "#1" ).prepend("Test "+i+" ... ");
                 i++;
                 });      
            });
 
        </script>
        </head>
    <body>
<div id="1">This is my test...</div>
<button type="button"  id="sub">Prepend</button>
</form>
</body>

</html>

Join us ...

https://www.facebook.com/helpthecoder

Access html form field using their name in jquery

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" >
        $(document).ready(function(){
            $("#sub").on("click",function(){
                $('input[name="bio[]"]').each(function() {
                    console.log($(this).val());
            });return false;
        });
    });
        </script>
        </head>
    <body>
<form action="#">
First name: <input type="text" name="bio[]"><br>
Last name : <input type="text" name="bio[]"><br>
Phone     : <input type="text" name="bio[]"><br>
Address   : <input type="text" name="bio[]">
<input type="submit" value="submit" id="sub"><br>
</form>
</body>
</html>

How to convert a string to array in jquery ?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $( document ).on("click",function(){
        var data="hello bro ..  how are you ??";
        alert('This is string : '+ data);
        var array_data=data.split(" ");
        alert("This is converted array : "+jQuery.each(array_data, function(index, value) {}));
});
});
</script>
</head>
<body>
converting  string to array in jquery ... on mouse click ..
</body>
</html>

How to disable checkbox set using jquery ?

If you got two set of checkboxes and you have to use one at a time ... then using this code when you click on either of checkbox set .. the other will get disabled..



<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $( document ).on("click",function(){
        if($("input[name='test[]']:checked").val()){
        $('input:checkbox[name="test_2\[\]"]').attr('disabled', true);
        }
        if($("input[name='test_2[]']:checked").val()){
        $('input:checkbox[name="test\[\]"]').attr('disabled', true);
        }
        });
});
</script>
</head>
<body>


<form id="test_form">
    <b> Checkboxes1</b><br>
<input type="checkbox" name="test[]"   value="Test1">Test1<br>
<input type="checkbox" name="test[]"  value="Test2">Test2 <br>
<input type="checkbox" name="test[]"   value="Test3">Test3<br>
<input type="checkbox" name="test[]"  value="Test4">Test4 <br>
<b> Checkboxes2</b><br>
<input type="checkbox" name="test_2[]"   value="Test1">Test1<br>
<input type="checkbox" name="test_2[]"  value="Test2">Test2 <br>
<input type="checkbox" name="test_2[]"   value="Test3">Test3<br>
<input type="checkbox" name="test_2[]"  value="Test4">Test4 <br>
</form>

</body>
</html>

How to get value of clicked checkbox using name in jquery ?

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
    $( document ).on("click",function(){
        if($("input[name='test[]']:checked").val()){
        alert($("input[name='test[]']:checked").val());}
        });
});
</script>
</head>
<body>
<b> Checkboxes</b><br>

<form id="test_form">
<input type="checkbox" name="test[]"   value="Test1">Test1<br>
<input type="checkbox" name="test[]"  value="Test2">Test2 <br>
<input type="checkbox" name="test[]"   value="Test3">Test3<br>
<input type="checkbox" name="test[]"  value="Test4">Test4 <br>
</form>

</body>
</html>