Using ajax in admin side from module

[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)

[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.

[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”

[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().

[psy]

Try putting {/literal} and {literal} around the Smarty call in your javascript.

[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.