How to perform an AJAX request in 6A72 CMS Theme
By Javad Rahmatzadeh
2019/07/11
THPR (Theme Post Result) is a front-end tool on 6A72 CMS that you can post something from theme and get the result.
To use THPR, you need to create thpr.php file inside your theme folder like this:
<?php
function jthpr(){
return 'Something';
}
To call jthpr() function, you need to post jmode with thpr value. In that case, core doesn’t load the normal page content anymore. Page content will be jthpr() function result instead.
Posting jmode with JavaScript is easy. To do that you can use jvJS.p() from front-end JS library.
Here, we create a very simple home page with a button. Create your home.php file like this:
<!doctype html>
<html>
<head>
<?php echo jv_theme_sands('js'); ?>
</head>
<body>
<script>
(function(){
document.addEventListener('DOMContentLoaded',function(){
let el = document.getElementById('jth_mybutton');
el.addEventListener('click',function(){
jvJS.p({jmode:'thpr'},function(x){alert(x);});
});
});
})();
</script>
<button id="jth_mybutton">Click On Me!</button>
</body>
</html>
As you can see, we used jvJS.p() to post and get the result.
First parameter is post object, second parameter is callback function. First parameter of callback function is string of jthpr() result.
We used jv_theme_sands(‘js’) in head. That function will load all js files (jvJS library, extensions js files and theme js files).
Now we want to create a .js file for our theme. In 6A72 CMS, sands referring to Scripts and Styles. To create a .js file you need to put it in sands folder.
Create a folder in your theme root folder named sands. Create a simple text file named sands.scf with this content:
+f javascript.js
+f means javascript.js file should be loaded on front-end.
Now create javascript.js file inside sands folder:
(function(){
document.addEventListener('DOMContentLoaded',function(){
let el = document.getElementById('jth_mybutton');
el.addEventListener('click',function(){
jvJS.p({jmode:'thpr'},function(x){alert(x);});
});
});
})();Folders and files in Theme root folder:
- sands
-- sands.scf
-- javascript.js
- home.php
- thpr.php
Now delete the script from home.php file that you created before. So home.php should be look like this:
<!doctype html>
<html>
<head>
<?php echo jv_theme_sands('js'); ?>
</head>
<body>
<button id="jth_mybutton">Click On Me!</button>
</body>
</html>
Now, everything should work as expected.
Note: The example in this article doesn’t have all theme files, because it is only about sending data and receiving the result. I recommend to practice this example in default 6A72 theme if you want to see it in action.