JSON Object variable declare, assign values and manage for ajax calling


Declare a json object variable:


  <script type='text/javascript'>
	var JSONArrayOptions = {};
  </script>  

Assign some values at variable:


 <script type='text/javascript'>
    JSONArrayOptions['first_name'] = 'Ziyed';
    JSONArrayOptions['last_name'] = 'Uddin';  
 </script> 

Preparation for ajax calling:


  <script type='text/javascript'>
     //converts a JavaScript value to a JSON string
     var JSONArrayOptionsSerialized = JSON.stringify(JSONArrayOptions); 
     jQuery.ajax({
	 type: "POST",
	 url: 'put_your_url_here',
	 data: { json_string: JSONArrayOptionsSerialized},
	 dataType: "html",
	 success: function(data) {            
	    //Write your code here after success            
	 }
      });
      return false;
  </script> 

Use the variable for operation at user end:


  <script type='text/javascript'>
    if (typeof (JSONArrayOptions['first_name']) != "undefined" && JSONArrayOptions['first_name'] !== null) {
        //Do your operation by getting the value 
	alert(JSONArrayOptions['first_name']);
     }	
  </script> 

Advertisements

Drag and Drop functionality using jQuery-ui


1. Need to load jQuery and jQuery-ui library


  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>

2. Now you need to initialize drag and drop features


  <script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            $("ul.sortable").sortable({opacity: 0.6, cursor: 'move', update: function() {},
                receive: function(e, ui) {
                     var Id = ui.sender.attr('id');                                         
                }
            });
        });

        $('ul.dragable li').live('mouseover', function() {
            $(this).draggable({
                revert: false,
                cursor: 'move',
                helper: 'clone',
                opacity: 0.75,
                connectToSortable: 'ul.sortable'
            });
        });
    });
  </script>

3. Now Inject drag and drop functionality to a list order


    <ul class="dragable">            
	<li>Drag This first content and drop to sortable list</li>
	<li>Drag This second content and drop to sortable list</li>
	<li>Drag This Third content and drop to sortable list</li>
   </ul>
   <ul class="sortable">  
	<li>Sortable list first item</li>
	<li>Sortable list second item</li>
	<li>Sortable list Third item</li>
   </ul>

How to developed Copy to Clipboard using ZeroClipboard


1. Download ZeroClipboard Flash file(ZeroClipboard.swf) and Javascript file(ZeroClipboard.js) from this link : http://zeroclipboard.org/

2. Now initialize ZeroClipboard scripts


 <script type="text/javascript" src="js/ZeroClipboard.js"></script>
 <script type="text/javascript">
    function initialize() {
        ZeroClipboard.setMoviePath('js/ZeroClipboard.swf');
        clip = new ZeroClipboard.Client();
        clip.setHandCursor(true);
        //event
        clip.addEventListener('mousedown', function() {
            clip.setText(document.getElementById('Link').value);
        });
        clip.addEventListener('complete', function(client, text) {
            alert('copied: ' + text);
        });
        //glue it to the button
        clip.glue('copy');
    }
    jQuery('document').ready(function() {
        var clip = null;
        initialize();
    });
 </script>


3. Now Active copy to clipboard functionality to a html anchor link


  <form>
     <input readonly="true" type="text" id="Link" value="https://ziyedbd.wordpress.com/"/>
  </form>
  <a id='copy' >Copy To Clipboard</a>	

Quick and easy sortable list using jquery-ui


1. Need to load jQuery and jQuery-ui library


  <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>

2. Now you need to initialize sorting flavour


  <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(function() {
            jQuery(".sortable").sortable({opacity: 0.6, cursor: 'move', update: function() { }});
        });
    });
  </script>

3. Now this is the time to play on sorting list, Inject sorting functionality to a list order


  <ul class="sortable">
        <li>This is first li</li>
	<li>This is second li</li>
	<li>This is third li</li>
  </ul>

Thats it. DONE

Center a div on the fly using jquery


    var topPos = ($(window).height() - $('.modal').outerHeight())/2;
    if( $(window).width() > 990 ){
        var leftPos = ( $(window).width() / 2 ) + ( $('.modal').outerWidth() / 2 ) + ( $('.modal').outerWidth() / 6 );
    }else{
        var leftPos = 0;
    }
    $('.modal').css({
        left: leftPos,
        top: topPos > 0 ? topPos : 0
    });
   

jQuery >> Move a section, by searching inner dom



(function($){
    var $val = id;
    var $hasInserted = false;
    $('#Saved .check-column input[type="checkbox"]').each(function(){
            if(parseInt($(this).val(), 10) <= $val && $hasInserted === false){
                     $hasInserted = true;
                      $(this).closest('tr').before($('#msg_new_id_'+id));
             }

      });
      if($hasInserted === false){
              $('#Saved table.table.table-hover tbody').append($('#msg_new_id_'+id));
      }
 })(jQuery);

Cross-Domain Ajax call with JSNOP in PhoneGap


Client side script:


	var url = base_url;  // you'll want to change

	$.ajax({
		type: 'GET',
		url: url,
		contentType: "application/json",
		dataType: 'jsonp',
		crossDomain: true,
		data: {
			username: $('#username').val(),
			password: $('#password').val()
		},		
		beforeSend: function ( xhr ) {
			//show your image loader here
			$('.loader-image').fadeIn(100);
		},
		success: function ( res ) {
		    //hide your image loader
			$('.loader-image').fadeOut(100);
			if( res.value === 2 ) {
				//unsuccessful code goes here
				return false;
			}
			if( res.value === 1 ){
				//success code goes here
			}
		}
	});

Server side code:


$email = $_GET['username'];
$pass = $_GET['password'];

$user = DO user query using $email and $pass checking.

if (!empty($user)) {
	$value = 1;
} else {
	$value = 2;
}
$theName->value = $value;
echo $_GET['callback'] . '(' . json_encode($theName) . ')';