In this tutorial I will tell you how to create layout in wpmvc. Layout is very important part of theming.
Below steps to follow to create ajax request. Below steps is describing how to create show ajax request.
Step 1: Create ajax layout under view/layouts/ajax_layout.php
1
<?php $this->render_main_view(); ?>
Step 2: define html link where you click to fire ajax req.
1 2 3 4 5 6 7 8 9 10 11 12 13
<a href="javascript:void(0)" id="target-anchor" target-div="#projectTableDiv" target-url="tbl_projects/show/1/">get result</a>
<strong>Step 3:</strong> Call through controller action.
function show() {
$this->render_view('tbl_projects/show', array('layout' => 'ajax_layout'));
exit(0);
}
Step 4: Create show.php file under view folder.
Step 5: Create js function in js file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
jQuery("#target-anchor").click(function(e) {
if (jQuery(this).attr('href') == null)
return;
var params = {
datatarget : jQuery(this).attr('target-div'),
url : jQuery(this).attr('target-url')
}
e.preventDefault();
that.getDetails(params);
});
that.getDetails = function(params) {
alert(siteurl + params['url']);
jQuery.ajax( {
url : siteurl + params['url'],
dataType : "html",
type : 'post',
success : function(response) {
alert(response);
jQuery(params['datatarget']).html(response);
// jQuery('#loader').hide();
},
error : function(xhr, ajaxOptions, thrownError) {
alert('status Code:' + xhr.status + 'Error Message :'
+ thrownError);
}
});
}
