Page 1 of 1
Using ajax in admin side from module
Posted: Wed Feb 13, 2013 11:22 am
by ivanshum
Hi All, How I can use ajax(jquery) functions such as .load() .ajax() from admin side. I want to do next:
When user click button programm open window with 1 input field and some unactive buttons. When input is filled programm check respone from db... I now that i can use standart php functional for connecting to db but I want use a MadeSimple API. How I can provide this?
P.S.: Sorry for my English. (You can also say me where I can mistaken it is good for me and not so difficult for you)
Re: Using ajax in admin side from module
Posted: Wed Feb 13, 2013 4:25 pm
by calguy1000
1. In your php action, create a URL and give it to smarty
Code: Select all
$url = $this->create_url($id,'myaction');
$smarty->assign('ajax_url',$url);
2. In your smarty template that displays the admin page:
Code: Select all
<__script__ type="text/javascript">
$(document).ready(function(){
$('#mybutton').click(function(){
$('#mydiv').load('{$ajax_url}&showtemplate=false');
});
});
</__script>
<div>
<div id="mydiv"></div>
<input type="submit" id="mybutton" value="Click Me"/>
</div>
3. In your modules/MyModule/action.myaction.php file:
Code: Select all
if( !isset($gCms) ) exit;
echo "This was done via ajax";
exit; // exit is important.
Re: Using ajax in admin side from module
Posted: Thu Feb 14, 2013 7:55 am
by ivanshum
Don't work(
If I use admin's theme as "default" or "NCleanGrey" . This script loads admin login page. If I use "OneEleven" not loading anything but it if using .live() instead of .click() This script loads admin login page too.
full listing:
action.defaultadmin.php
Code: Select all
<?php
if (!isset($gCms)) exit;
if (! $this->CheckAccess())
{
return $this->DisplayErrorPage($id, $params, $returnid,$this->Lang('accessdenied'));
}
$url = $this->create_url($id,'test');
$smarty->assign('ajax_url',$url);
echo $this->ProcessTemplate('test.tpl');
?>
test.tpl
Code: Select all
<__script__ type="text/javascript">
$(document).ready(function(){
$('#mybutton').live('click',function(){
$('#mydiv').load('{$ajax_url}&showtemplate=false');
});
});
</__script>
<div>
<div id="mydiv">try {$ajax_url}</div>
<input type="submit" id="mybutton" value="Click Me"/>
</div>
action.test.php
Code: Select all
<?php
if( !isset($gCms) ) exit;
echo "This was done via ajax";
exit; // exit is important.
?>
if open a page with link that generated by {$ajax_url} it's working.
P.S.:Version CMS Made Simple: 1.11.4 “Fernandina”
Re: Using ajax in admin side from module
Posted: Fri Feb 15, 2013 6:23 am
by ivanshum
it was problem with symbol "&" in link it is transforming to "&". I think admins can do some changes in create_url(). I solved problem by html_entity_decode().
Re: Using ajax in admin side from module
Posted: Fri Feb 15, 2013 7:36 am
by psy
Try putting {/literal} and {literal} around the Smarty call in your javascript.
Re: Using ajax in admin side from module
Posted: Fri Feb 15, 2013 11:59 am
by ivanshum
By using {literal} doesn't solve this problem. And now it is not a problem, because DB API working fine. But some objects created by some functions (such as "CreateInputSubmit") not transformed by using jqueryui, which is why they do not look as should.
---
of course {literal} need but not in the exaple.
This bug with elements It is only for OneEleven theme. Fix for buttons:
Code: Select all
function refreshthis(){
$('body').off('cms_ajax_apply');
$('input[type="submit"], input[type="button"]').each(function() {
if($(this).attr('name') == 'apply' || $(this).attr('name') == 'm1_apply') {
var icon = 'ui-icon-disk';
} else if($(this).attr('name') == 'cancel' || $(this).attr('name') == 'm1_cancel') {
var icon = 'ui-icon-circle-close';
} else if($(this).attr('resettodefault') || $(this).attr('name') == 'm1_resettodefault' || $(this).attr('id') == 'refresh') {
var icon = 'ui-icon-refresh';
} else {
var icon = 'ui-icon-circle-check';
}
var btn = $('<button />');
// ADOPT ALL ATTRIBUTES
$(this.attributes).each(function(index, attribute){
btn.attr(attribute.name, attribute.value);
})
btn.button({
icons : {
primary : icon
},
label : $(this).val()
});
$(this).replaceWith(btn);
});
$('a.pageback').addClass('ui-state-default ui-corner-all')
.prepend('<span class="ui-icon ui-icon-arrowreturnthick-1-w">')
.hover(function() {
$(this).addClass('ui-state-hover');
}, function() {
$(this).removeClass('ui-state-hover');
});
// Handle ajax apply
$('body').on('cms_ajax_apply', function(e) {
// gotta get langified string here.
$('button[name=cancel], button[name=m1_cancel]').fadeOut();
$('button[name=cancel], button[name=m1_cancel]').button('option', 'label', e.close);
$('button[name=cancel], button[name=m1_cancel]').fadeIn();
var htmlShow = '';
if(e.response == 'Success') {
htmlShow = '<aside class="message pagemcontainer" role="status"><span class="close-warning">Close</span><p class="pagemessage">' + e.details + '<\/p><\/aside>';
} else {
htmlShow = '<aside class="message pageerrorcontainer" role="alert"><span class="close-warning">Close</span><ul class="pageerror">';
htmlShow += e.details;
htmlShow += '<\/ul><\/aside>';
}
$('#oe_mainarea').append(htmlShow).slideDown(1000, function() {
window.setTimeout(function() {
$('.message').slideUp();
}, 10000);
});
$('.message').click(function() {
$('.message').slideUp();
});
});
}
after load action use refreshthis();
code from refreshthis() is part of standart.js for OneEleven theme.