Elgg Ajax call with JQuery Mobile
By dobbo
Hi there,
I'm trying to post a form using JQuery Mobile and Elgg. As you may know, JQM defaults to Ajax for page changes including form submission. The problem I have is that upon submission, I keep getting an 'undefined' back from the action. I have created a simple plugin to show the issue. This form submits perfectly with Ajax disabled, but for various reasons I want the Ajax enabled. I played around with elgg_register_ajax_view, but didn't have any luck.
Any help would be appreciated.
Thanks
Beginning Developers
This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking
- dobbo@dobson_c
dobbo - 0 likes
- dobbo@dobson_c
dobbo - 0 likes
- dobbo@dobson_c
dobbo - 0 likes
- dobbo@dobson_c
dobbo - 0 likes
- dobbo@dobson_c
dobbo - 0 likes
- DhrupDeScoop@Dhrup2000
DhrupDeScoop - 0 likes
You must log in to post replies.Not sure where to post the plugin, so am posting the code here:
Start.php
<?php
// register for the init, system event when our plugin start.php is loaded
elgg_register_event_handler('init', 'system', 'ajaxTester_init');
function ajaxTester_init() {
//setup URL page handling
elgg_register_page_handler('ajaxTester', 'ajax_page_handler');
$actions_base = elgg_get_plugins_path() . 'ajaxTester/actions';
elgg_register_action('ajaxTester', $actions_base. "/ajaxTester/ajaxTester.php");
}
function ajax_page_handler($urlArray) {
$strDirectory = dirname(dirname(__FILE__)). "/ajaxTester/";
include($strDirectory. "pages/ajaxTester.php");
};
?>
pages/ajaxTester.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind('pageinit', function(){
});
</script>
<body>
<div data-role="page">
<div data-role="header" data-position="inline">
<center>Jquery Mobile Elgg Tester</center>
</div><!-- /header -->
<div data-role="content">
<?php
$arrSystemMessages = $_SESSION['msg'];
$arrSystemMessages = $arrSystemMessages['success'];
$intSystemNumber = count($arrSystemMessages) - 1;
echo "<div class='ui-bar ui-bar-b'>".$arrSystemMessages[$intSystemNumber]."</div>";
system_messages(null, "");
?>
<?php echo elgg_view_form('ajaxTester'); ?>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
views/default/forms/ajaxTester.php
<h3>Ajax Tester</h3>
<div data-role="fieldcontain">
<label for="testInput"></label>
<?php echo elgg_view('input/text', array(
'name' => 'testInput',
'id' => 'testInput',
));
?>
</div>
<div data-role="fieldcontain" >
<label for="testSubmit"></label>
<?php echo elgg_view('input/submit', array(
'name' => 'testSubmit',
'value' => 'submit',
'data-icon' => 'plus',
'id' => 'testSubmit'
));
?>
</div>
actions/ajaxTester/ajaxTester.php
<?php
$strInput = get_input('testInput');
system_message("your input: ". $strInput);
forward(REFERRER);
?>
Just wanted a give this a little bump to see if there are any ideas on how to solve this issue.
you're using jqm;s pageinit() api. i don;t think you'll find many people here @elgg comm who have worked with that already or people wh have time to dive in to learn something.. so maybe that's why u r getting no 'answers'. but try explaining more details of the "'undefined' back from the action..." in elgg context and maybe someone will know what's going wrong.. ;-)