Jquery Archives | Codeexecute

Jquery mCustomScrollbar not working with ajax

mCustomScrollbar directly not working with ajax we have to initialize it again while using ajax. Please use following code


jQuery(document).ready(function(){
    jQuery(".your ajax content div").mCustomScrollbar();

    jQuery.ajax({
        url: "your ajax url",
        type: "post",
        data: "your post data",
        success: function(response) {
            jQuery(".your ajax content div").mCustomScrollbar("destroy"); //First we have to destroy
            jQuery(".your ajax content div").html(response);
        },
        complete: function () {
            jQuery(".your ajax content div").mCustomScrollbar();
        }
    });
});

 

Single Page Application vs Multi Page Application (SPA vs MPA)

In the era of cloud , every application has been / being migrated from desktop to web server. And companies  earlier having their older softwares on systems are creating the same  as web app for easy and global approach of clients. Now the webapp could be categorized into two types – One is traditional Multi Page Application and the other one is the latest and new approach as Single Page Application.What are SPA or MPA? Let’s figure out.

SPA (Single Page Application):

The latset approach towards creating the web app is Single Page application where all of the content from the server is rendered on single page html. It means:

  1. The routing is maintained on client side through Java Script
  2. Devlopement is easy and no need to learn different templating language for a front end devloper to develop the web pages like PHP, JSP or django templating
  3. Required data on page is served through JSON API from server not using context variables
  4. Switching into multiple URLs in the web page is easier and faster since routing is on clinet side
  5. Since all static content like CSS/JS has been loaded initially so redundancy of static variables minimizes the server load
  6. Using the same API the mobile application can be simultaneously build reducing the load of back end devloper.In this way a back end devloper can concentrate over business logic and code optimzation instead working on page rendering stuff of fron end.
  7. The devlopement would be fast as the front end and mobile developer can build their application using dummy api’s and later integrating them.

Example of SPAs : gmail, Facebook, Twitter

Multi Page Application(MPA)

The web app consists of multiple pages and all of these are rendered on server side.

  1. Rourting is maintained on server side
  2. Web app speed is slow as each routing requires a call towards server whihc may take additional round trip towrads server.
  3. SEO is better managed in MPA
  4. Backend devloper need to create mobile APIs to give JSON data to mobile devlopers(redundancy of logic).
  5. Tightly coupled front end /backend

As per the given approach it seems to be use SPA for a better user experience and fast devlopment process.

However the SPA also having their own cons. At the end the approch completely depends upon what is the business need.

So take a call and analyze which should be best for you..

 

Preview and Download Html2Canvas

Here is the code for converting html into canvas.

When we click on Preview button canvas will be show and click on Download canvas will be save in .png format.


<!DOCTYPE html>
<html>
<head>

<!-- include jquery.min.js and html2canvas.js -->
  <script src="jquery/3.1.1/jquery.min.js"></script>
  <script src="jquery/html2canvas.js"></script>

<style>
  #previewBody{
    background-color: #9E9E9E;
    color: #fff;
    padding: 5px 0px 27px 30px;
    width: 46%;
    margin-bottom: 15px;
}
input#PreviewImage {
    margin-bottom: 15px;
}
</style>

<script>
    $(document).ready(function(){
    var getCanvas;
    function callCanvas(){
    html2canvas($("#previewBody"), {
    onrendered: function(canvas) {
    $(".preview_Canvas").html(canvas);
    getCanvas = canvas;
    }
  });
}
   $("#PreviewImage").on('click', function () {
    callCanvas()
    });
   $("#downloadimage").on('click', function () {
      var imgageData = getCanvas.toDataURL("image/png");    
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#downloadimage").attr("download", "your_pic_name.png").attr("href", newData);
  });
});
</script>
</head>
<body>
<div id="previewBody">
  <h2>CANVAS Example</h2>
  <p>Click on preview will show canvas </p>
  <p>Click on download will download the canvas in .png format</p>
   </div>
    
        <input id="PreviewImage" type="button" value="Preview"/>
        <a id="downloadimage" href="#">Download</a>
        <div class="preview_Canvas">
        </div>
</body>
</html>

 

Populate Select box dynamically by ajax in Cakephp

To populate a select box by cakephp ajax functionality.
Step 1.
In the end of your view (.ctp)file.This is your javascript code in cake.

<?php
$this->Js->get('#select1')->event('click', 
$this->Js->request(array('controller'=>'ControllerName','action'=>'ajax_call'), array(
'update'=>'#select2',
'async' => true,
'method' => 'post',
'dataExpression'=>true,
'data'=> $this->Js->serializeForm(array(
'isForm' => true,
'inline' => true))
))
);
?>

Step 2.
In your controller file create function with that returns options string

public $helpers = array('Js'); //load Js helper
public function getBySubject(){
	
		$this->autoRender=false; //prevent to load default layout
$option;		
//your code
		printf($option);
		}

step 3.
In the end or your layout file after your loaded scripts

<?php
if (class_exists('JsHelper') && method_exists($this->Js, 'writeBuffer')) echo $this->Js->writeBuffer();
// will write your cached scripts
?>
 

Detect Mousewheel events by jQuery

$(function () {
   var isChrome = !!window.chrome && !!window.chrome.webstore; //use to resolve browser compatibilty issue.
   var functionname="mousewheel.focal";
   if(!isChrome)
	functionname="DOMMouseScroll";
   $('Selector').bind(functionname, function{
	var delta = (isChrome) ? e.delta || e.originalEvent.wheelDelta : e.originalEvent.detail;
        if(isChrome && delta < 0){
	     //scroll down in chrome
	 }
        elseif(isChrome && delta > 0){
            //scroll up in chrome
	}
        elseif(!isChrome && delta > 0){
            //scroll down in mozilla
	}
        else{
            //scroll up in mozilla
	}
	return false;
    });
});