1

(3 replies, posted in Troubleshooting)

Hi Gui,

That is strange... Keep me posted.

Post the code?
Ed

2

(3 replies, posted in Troubleshooting)

Something has already been sent to the browser...

Ed

The Javascript can be in an included file - via a script tag - or it can be directly encoded in the page. The function just has to be available in the html page.

Ed

4

(3 replies, posted in General xajax Discussion)

I have doing a lot of looking since yesterday and now have a way to upload files using xajax.
The key is the FileReader object. I am surprised there has not been more about this...

<!doctype html>
<html>
<!--
    This is a sample of obtaining the file contents and it's name from
    file tag in html. These can then be used to send the file to xajax.
    
    
-->
<head>
</head>
<body>
<input type="file" class="fileuploader" style="display: none; accept="image/*"">  
<button class="fileuploader-btn">Upload</button><br>
<div id="imgdisplay"></div>
<div id="imgfilename"></div>
<button id="sendbtn" onclick="shipTheFile()" style="display: none;">Send the File</button>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
<script>
var filecontent;    //The base64 of the file's contents
var fname;          //The name of the uploaded file    
//This is how you capture the file using the Fileeader object
jQuery(document).ready(function($){

    // Click button to activate hidden file input
    $('.fileuploader-btn').on('click', function(){
        clearTheScreen();
        $('.fileuploader').click(); //Causes the file dialog to show
    });

    // Input change function
    $('.fileuploader').change(function(){

        // Create new FileReader
        var reader = new FileReader();
        // Onload Function to run after file loaded fully
        reader.onload = function(file){
           
            // Base64 Encoded Image Loaded
            fileContent = file.target.result;
            
            fname = file.name;
            $('#imgfilename').html('File Name: '+fname);

            // Output on Page
            $('#imgdisplay').html('<img src="' + fileContent + '">');
            $('#sendbtn').show();
        }
        reader.onabort = function(){}; //Do nothing when user cancels the load

        // Get the selected Item from Dialog
        reader.readAsDataURL(this.files[0]);
        var theFile = this.files[0];
        fname = theFile.name;

        
    });

});

function clearTheScreen()
{
    $('#imgdisplay').html('');
    $('#imgfilename').html('');
    
}

//This is how you get the file uploaded to the server
function shipTheFile()
{
    alert('Sending the file to Xajax on the server...');
    clearTheScreen();
    $('#sendbtn').hide();
    var args = {'fName':fname, 'fContent':filecontent};
    var stringy = JSON.stringify(args);
    xajax_saveTheImage(args);
}
</script>  

</body> 
</html>

When the items reach the server the file content must be decoded from base 64 using something like this:

    //Base64 conversion lifted from
    //http://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-file
    function base64_to_jpeg($base64_string) 
    {
        // split the string on commas
        // $data[ 0 ] == "data:image/png;base64"
        // $data[ 1 ] == <actual base64 string>
        $data = explode( ',', $base64_string );
        $image = base64_decode( $data[ 1 ] );
        return $image;
    }
    
     //Receive the file info from the browser and
     //save it as a file
     function saveTheImage($data)
    {
        $resp= new xajaxResponse();
        $args = json_decode($data);
        $fName = 'assets/images/'.$args->fName;
        $image = base64_to_jpeg($args->fileContents);
        if(!file_put_contents($fName,$image))
        {
            $resp->alert('Failed to save the image...');
        }
        else
        {
            $resp->alert('Image saved...');
        }
        return $resp;
     }

This may need some tweeking but so far it is working in my current project.

Ed

5

(3 replies, posted in General xajax Discussion)

Hi,

Images and the like are usually handled with the file tag in html. I am currently working on a small project that involves images and I have not come up with a way to get thee image file directly using xajax. If I come up with a solution, I'll post it...

Thinking about maybe drag and drop...

Ed

6

(1 replies, posted in Getting started with xajax)

Hello,
You can go here: http://www.xajax-project.org/ to start with. The info is somewhat dated but it will give you a starting point. After that you canlook at the mountain of examples on this site.

If you come up with specific questions later you can post them here.

Ed

Try here: http://www.xajax-project.org/

You might also try looking at the source code. It is very well commented. The forums also have loads of examples.

Ed

Hi,

Use the response call method.

$response->call('functionName', argument[,argument,...]);

You can alsouse the script method.

$response->script('myfunction(1)');

$response->script('myfunction(0)');

Hello,

There is not a lot of formal documentation for xajax. You will find a lot of help on this forum - lots of examples...

Also, look here http://www.xajax-project.org/en/docs-tu … /api-docs/

Hope this helps.

Ed

10

(4 replies, posted in Getting started with xajax)

Guilherme,

I haven't messed with the html data- attribute in the past. It took me a while to get it...

You can use the assign method. You assign to the name portion of the data attribute. i.e. If the attribute is "data-name"
you assign the name attribute only.

Example:

<?php
/*
    Setting the data-* properties of an element
    9/9/2016

        This script demonstrates using xajax to change a 
        data value of an element.

*/    
require 'xajax-master/xajax_core/xajax.inc.php';
$xajax = new Xajax();
$xajax->configure('javascript URI', 'xajax-master/xajax_js/');
$xajax->register(XAJAX_FUNCTION,'setData');
$xajax->processRequest();

function setData()
{
    $resp = new xajaxResponse();
    $resp->assign('mydiv','name', 'D. Jones'); //'name' references 'data-name' in the html
    $resp->assign('mydiv','age','45'); //'age' references data-age
    return $resp;
}
?>
<!doctype html>
<html>
<head>
<title>Xajax Data Property Manipulation</title>
<?php $xajax->printJavascript(); ?>
<script>
 function showdata()
 {
    elem = xajax.$('mydiv');
    data = elem.name;
    alert(data);
    data= elem.age;
    alert(data);
 }
</script>
</head>
<body>
<div id='mydiv' data-name='xx' '></div>
<input type="button" onclick="xajax_setData()" value="set Data"/> 
<input type="button" value="Show Data" onclick="showdata()"/>
</body>
</html>

Notice that the attributre does not need to be defined before hand - see the data-age assignment in the example.

Learn something new every day...

Ed

11

(4 replies, posted in Getting started with xajax)

Hi Guilherme,

I would like to help but I do not understand your question. Perhaps you could explain some more.

Ed

You are very welcome.
Thank you for the kind comments.
Ed

Here's the same functionallity as a class:

<?php
/*
    Dynamic dropwowns with xajax - oo form
    7/5/2016
    
    This script uses xajax 0.6 to handle 
    populating 2 dropdowns on the browser.
    The first contains states and the second 
    contains cities in the selected state.
*/    
require 'xajax-master/xajax_core/xajax.inc.php';

class xajaxDynamicDropdowns
{
    function setupDb()
    {
        include("dbsettings.php");
          
          $con = mysql_connect($dbhost,$dbuser,$dbpassword);
          if($con){
            mysql_select_db($dbdatabase,$con);
            return $con;
          }
          else{
            die("Could not connect to database");
          }    
    }

    //Populate the state select
    function getStates()
    {
        $con = $this->setupDb();
        $resp = new xajaxResponse();
        $sql = "select distinct state_name from zip_code order by state_name";
        $states = mysql_query($sql);
        if(!$states)
        {
            $resp->alert('SQL Query Failed. '.$sql);
            return $resp;
        }
        $s = '<select id="states" name="states" onchange="xajax_xajaxDynamicDropdowns.getCities(this.value)">';

        while($row = mysql_fetch_array($states))
        {
            $state = $row['state_name'];
            $s .= "<option value='$state'>$state</option>";
        }
        $s .= '</select>';
        
        
        $resp->assign('statesdiv','innerHTML',$s);
        return $resp;
    }

    //Populate city select
    function getCities($state)
    {
        $con = $this->setupDb();
        $resp = new xajaxResponse();
        
        $sql = "select distinct city from zip_code where state_name = '$state' order by city";
        $cities = mysql_query($sql);
        if(!$cities)
        {
            $resp->alert('SQL Query Failed. '.$sql);
            return $resp;
        }

        $s = '<select id="cities" name="cities">';

        while($row = mysql_fetch_array($cities))
        {
            $city = $row['city'];
            $s .= "<option value='$city'>$city</option>";
        }
        $s .= '</select>';
        
        $resp->assign('citydiv','innerHTML',$s);
        return $resp;
    }
}

    $xajax = new Xajax();
    $xajax->configure('javascript URI', 'xajax-master/xajax_js/');
    $drop = new xajaxDynamicDropdowns();
    $xajax->register(XAJAX_CALLABLE_OBJECT, $drop);
    $xajax->processRequest();
?>
<!doctype html>
<html>
<head>
<title>Xajax Dynamic Dropdowns</title>
<?php $xajax->printJavascript(); ?>
<style>
    div{
        display: inline-block;
        margin-top: 50px;
        width: 400px;
        height: 12px;
    }
</style>
</head>
<body onload="xajax_xajaxDynamicDropdowns.getStates();">

States:<div id="statesdiv"></div> Cities:<div id="citydiv"></div>
</body>
</html>    

Hello architekt_berlin,

I just wrote the following script to demonstrate the dynamic dropdown using xajax 0.6.

<?php
/*
    Dynamic dropwowns with xajax
    7/5/2016
    
    This script uses xajax 0.6 to handle 
    populating 2 dropdowns on the browser.
    The first contains states and the second 
    contains cities in the selected state.
*/    
require 'xajax-master/xajax_core/xajax.inc.php';
$xajax = new Xajax();
$xajax->configure('javascript URI', 'xajax-master/xajax_js/');
$xajax->register(XAJAX_FUNCTION,'getStates');
$xajax->register(XAJAX_FUNCTION,'getCities');
$xajax->processRequest();

function setupDb()
{
    include("dbsettings.php");
      
      $con = mysql_connect($dbhost,$dbuser,$dbpassword);
      if($con){
        mysql_select_db($dbdatabase,$con);
        return $con;
      }
      else{
        die("Could not connect to database");
      }    
}

//Populate the state select
function getStates()
{
    $con = setupDb();
    $resp = new xajaxResponse();
    $sql = "select distinct state_name from zip_code order by state_name";
    $states = mysql_query($sql);
    if(!$states)
    {
        $resp->alert('SQL Query Failed. '.$sql);
        return $resp;
    }
    $s = '<select id="states" name="states" onchange="xajax_getCities(this.value)">';

    while($row = mysql_fetch_array($states))
    {
        $state = $row['state_name'];
        $s .= "<option value='$state'>$state</option>";
    }
    $s .= '</select>';
    
    
    $resp->assign('statesdiv','innerHTML',$s);
    return $resp;
}

//Populate city select
function getCities($state)
{
    $con = setupDb();
    $resp = new xajaxResponse();
    
    $sql = "select distinct city from zip_code where state_name = '$state' order by city";
    $cities = mysql_query($sql);
    if(!$cities)
    {
        $resp->alert('SQL Query Failed. '.$sql);
        return $resp;
    }

    $s = '<select id="cities" name="cities">';

    while($row = mysql_fetch_array($cities))
    {
        $city = $row['city'];
        $s .= "<option value='$city'>$city</option>";
    }
    $s .= '</select>';
    
    $resp->assign('citydiv','innerHTML',$s);
    return $resp;
}
?>
<!doctype html>
<html>
<head>
<title>Xajax Dynamic Dropdowns</title>
<?php $xajax->printJavascript(); ?>
<style>
    div{
        display: inline-block;
        margin-top: 50px;
        width: 400px;
        height: 12px;
    }
</style>
</head>
<body onload="xajax_getStates();">

States:<div id="statesdiv"></div> Cities:<div id="citydiv"></div>
</body>
</html>    

15

(25 replies, posted in General xajax Discussion)

Hello,

You specify the location of the xajax Javascript with $xajax->configure('javascript URI', 'includes/xajax-6.0/';

The trailing slash is required.

As to the deprecated notices, just open the source and remove the ampersands.

Hope this helps you.

Ed

Hola,

Se especifica la ubicación de la xajax Javascript con $ xajax-> configure ('javascript URI', 'includes / xajax-6.0 /';

Se requiere que la barra final.

En cuanto a los avisos en desuso, basta con abrir la fuente y retirar los símbolos de unión.

Espero que esto ayude.

Ed

Hello and welcome.

Glad that worked for you. There is a new version of Xajax in the works that will also work with PHP 7. See announcement in the anouncements section of the forum.

http://community.xajax-project.org/topi … x-is-cool/

Ed

Well done, Thierry. Thanks for all of your efforts.

Do you have any suggestions for a tool producing documentation examples? I would like to help with it.

Ed

Thierry,

Is the new xajac php-7 compatible?

Thanks,
Ed

19

(3 replies, posted in Announcements)

Hello,

I think the newest version (0.7 alpha by Thierry FeuSeu) may be php7 compatable.

I'll post the question in thierry's thread and see what he says. Watch for it.

Ed

moo,

I posted my CI with xajax0.7 in the examples section. Let me know what you think.
Ed

21

(1 replies, posted in Examples)

I have been tryingto get a hold on the new Xajax by Thierry FeuZeu and I feel pretty good about it.

moo has been trying to integrate the new Xajax into CI and I would like to show my implementation...

MY_Controller:

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/*
    4/29/2016
    Author: Ed Robinson
    
    Demonstration of CodeIgniter MY_Controller extending the CI_Controller
    and adding xajax 0.7 alpha and Smarty templating engine.
    
    The order of things is important.
    Pay particular attention to the dispatch() method. It
    does away with xajax method registration.
*/
require (__DIR__ . '/../third_party/xajax/vendor/autoload.php');
require '/../third_party/smarty/libs/Smarty.class.php';

use Xajax\Xajax;
use Xajax\Response\Response;
use Xajax\Request\Factory as xr;


class MY_Controller extends CI_Controller{
    public $xajax; //Xajax instance
    public $resp;  //Response instance    
    public $smarty; //Templating engine
    public function __construct()
    {
        parent::__construct();
        //The following order is important
        $this->setupXajax();
        $this->setupSmarty();
        $this->xajax->processRequest();
        
    }
    
    private function setupXajax()
    {
        $this->xajax = Xajax::getInstance();
        $this->xajax->setOption('core.prefix.function', 'xajax_');
        $this->xajax->register(XAJAX_FUNCTION,array('dispatch',$this,'dispatch'));
        $this->resp = new Response();
        

    }

    //Setup the templating engine
    private function setupSmarty()
    {
        //Instance Smarty
        $this->smarty = new Smarty;
        //Set the Smarty directories.
        $this->smarty->setTemplateDir(__DIR__.'/../third_party/smarty/templates/');
        $this->smarty->setCompileDir(__DIR__.'/../third_party/smarty/templates_c/');
        $this->smarty->setConfigDir(__DIR__.'/../third_party/smarty/configs/');
        $this->smarty->setCacheDir(__DIR__.'/../third_party/smarty/cache/');
        
        //Assign the xajax client side javascript for this page
        $this->smarty->assign('xajaxjsinclude', $this->xajax->getJsInclude());
        $this->smarty->assign('xajaxjs',$this->xajax->getJavascript());
    }
        
    /*    
            Function: dispatch
            parameters:
                $method_name - name of the method to call
                $data - optional arguments to pass to the function
            
            Using this method you only have to register a single
            function for any xajax'ed class method.
            
            The method checks if the method exists in the object
            and if it is callable. If so, it is called passing the data
            to it.
            
            If not - not a method or is not public or protected - an error alert
            is issued.
            
            There may be more to do security wise.
    */    
    function dispatch($method_name, $data='')
    {
        //Call the method iif it can be called
        if(method_exists($this,$method_name) && is_callable(array($this,$method_name)))
        {
            return $this->$method_name($data);
        }
        else
        {
            //Oops!
            $this->resp->alert("Error: $method_name is not a valid or not a callable method");
            return $this->resp;
        }

    }
        
}

Note the dispatch function. It really cleans things up.

MY_Controller test:

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/*
    4/29/2016
    Test MY_Controller
*/

class MC_Test extends MY_Controller
{
    /*
        At page load index is called.
        We only load our view in this example...
        Use index to do any page setup you need.
        You can also add Smarty assigns here before displaying
        your template.
        See the hello_world.tpl template file.
    */
    public function index()
    {
        $this->smarty->assign('pagetitle','Hello World');
        $this->smarty->display('hello_world.tpl');
    }
        
    /*
        This is a callable method that
        is available through MY_Controller's
        dispatch method.
    */
    public function sayHello($name='')
    {
        $this->resp->alert("Hello $name...");
        return $this->resp;
    }
    
    
}

Test controller Smarty template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{$pagetitle}</title>
</head>
<body>
    
    <input type="button" value="Click" onclick="xajax_dispatch('sayHello','Joe')" />

{* Place the Xajax javascrpt *}
{$xajaxjsinclude}
{$xajaxjs}    
</body>
</html>

By extending the CI_Controller you have a quick and easy gateway to CI with Xajax and Smarty.

That works! Thanks Thierry.

Hello Thierry,

I have used CI in the past and integrated Xajax by extending the CI controller. I am trying to do the same with the new Xajax.

MY_Controller:

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/*
    4/29/2016
    
    Author: Ed Robinson
    
    Demonstration CodeIgniter MY_Controller for implementing a sample CI app
    with xajax 0.7 alpha
*/
require (__DIR__ . '/../third_party/xajax/vendor/autoload.php');

use Xajax\Xajax;
use Xajax\Response\Response;
use Xajax\Request\Factory as xr;


class MY_Controller extends CI_Controller{
    public $xajax; //Xajax instance
    public $resp;  //Xajax response instance
    
    public function __construct()
    {
        parent::__construct();
        $this->setupXajax();
    }
    
    public function setupXajax()
    {
        $this->xajax = Xajax::getInstance();
        //$this->resp = new Response();
        $this->xajax->setOption('core.prefix.function', 'xajax_');
    }
        
}

Testing MY_Controller - file MC_TEST:

<?php defined('BASEPATH') OR exit('No direct script access allowed');
/*
    4/29/2016
    Test MY_Controller
*/
use Xajax\Response\Response;
class MC_Test extends MY_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->xajax->register(XAJAX_FUNCTION,'sayHello');
    }

    //Default method of the CI controllers
    function index()
    {
        $this->load->view('hello_world');
        $this->xajax->processRequest();
        
    }
    
    function sayHello()
    {
        $resp = new Response();
        $resp->alert("Hello World...");
        return $resp;
    }
    
    
}

View file hello_world.php:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
    <input type="button" value="Click" onclick="xajax_sayHello()" />
<?php
    echo $this->xajax->getJsInclude();
    echo $this->xajax->getJavascript();
?>
</body>
</html>

I receive these errors:

<h4>A PHP Error was encountered</h4>

<p>Severity: Warning</p>
<p>Message:  call_user_func_array() expects parameter 1 to be a valid callback, function 'sayHello' not found or invalid function name</p>
<p>Filename: Support/UserFunction.php</p>
<p>Line Number: 242</p>

<p>Severity: 4096</p>
<p>Message:  Argument 1 passed to Xajax\Response\Manager::append() must be an instance of Xajax\Response\Response, null given, called in C:\wamp\www\ci-xajax0.7\application\third_party\xajax\src\Request\Support\UserFunction.php on line 242 and defined</p>
<p>Filename: Response/Manager.php</p>
<p>Line Number: 99</p>

I suspect the problem is in my not yet fully understandingthe new Xajax implementation...

Ed

Hello,

Sorry for not responding sooner...

Try turning on the Xajax debugger in your php ($xajax->configure('debug',true) . It may be of help.
ALso turn on the developer mode in Firefox or Chrome and look at the traffic.

Once before someone reported this error and it turned out they were sending the DOM object and not its value. Check for this...

Please post again if I can help.

Ed

I have created a github repository (Xajax-Docs) for our attempt at documentation.

I put on a brief readme and an overview file.

Guess we best decide on a format. Open to suggestions...

Ed