Category / Section
How to use JQuery library in a JS2 application
1 min read
This KB article explains how to use EJ2 components in a jQuery application with minimal working code samples.
Introduction
jQuery is a popular JavaScript library, which is used to manipulate and traverse the HTML DOM tree, event handling, CSS animation, and Ajax. You can use EJ2 components in a jQuery application since most of the older applications are built completely using jQuery.
EJ2 in jQuery application
You can render an EJ2 button and invoke its click event using jQuery. In event handler, we have changed the type of that button using the APIs of jQuery library.
Referring dependencies
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
Initializing EJ2 Button
HTML
<body> <button id="primarybtn">Primary</button> </body>
jQuery
<script>
jQuery(document).ready(function(){
//Binding click event for EJ2 button using jQuery
$('#primarybtn').bind('click', function(){
//Changing style and text of EJ2 button using jQuery
if($('#primarybtn').hasClass( "e-primary" )){
$('#primarybtn').removeClass( "e-primary" );
$(this).text('Default');
}
else{
$('#primarybtn').addClass( "e-primary" );
$(this).text('Primary');
}
})
//Initializing EJ2 button
var button = new ej.buttons.Button({ isPrimary: true });
button.appendTo('#primarybtn');
});
</script>
You can find the demo sample.
