eldarion ajax with bootstrap

Question

Does anyone use eldarion ajax plugin? formerly known as bootstrap ajax...

I have it working where it sends the call to the other page and its successful, I just cant get the data back from that page.

 // this is ajax.php
 <form method="post"  action="ajax-here.php" class="ajax" data-append="#result">
 <input type="text" name="text" />
 <input type="submit" />  
 </form>
 <div id="result">  </div>

 // this is ajax-here.php
 $text = $_POST['text'];
 echo $text;

All I want is to have the result of the ajax-here.php to be displayed in the div with the ID result on the page where the ajax is happening. Any suggestions would be great. I like using this plugin because it works nicely, just don't know how to get the data to append to the div that I want. Thanks

Answer 1

I am not familiar with the Eldarion AJAX plugin. I've just read the README, and to be honest I don't like it. (Though it does win points for having a cool name.)

There's too much "magic" that goes on. You don't get to specify the format in which you send and receive data. If you want to change things, you have to do so with HTML data- attributes. To me, violates the principle of separation of concerns, i.e. that each part of the structure of the site should have one purpose. For instance, the HTML should define the structure of the page, the CSS the styling, and the Javascript the interactivity. To have HTML attributes defining AJAX activity seems absurd to me.

But no matter. Let's look at the specific question you have, which is how to return the data to Eldarion. Let's look at the README file again:

Easily extend support on the server side code for this by adding a top-level attribute to the JSON you are already returning called "html" that is the rendered content. Unlike a backbone.js approach to building a web app, eldarion-ajax leverages server side template rendering engines to render and return HTML fragments.

So Eldarion expects to receive a JSON structure, with a top-level property called html that contains the rendered content. So it expects a structure approximately like this:

{
    "html": "<p>The content that should be appended to #result.</p>"
}

So let's do that with your content. Let's not mess about trying to make the JSON ourselves. It's too difficult to do right and far too easy to make mistakes. Fortunately, PHP comes to our aid with the json_encode function, which encodes an array as a valid JSON structure for you.

$text = $_POST['text'];
$data = array(
    'html' => $text
);
echo json_encode($data); // output the data as JSON

I've set up a jsFiddle example that shows how this works. Obviously it's a bit different, because I had to use the jsFiddle API, but you can see approximately how it works.