带有引导程序的eldarion ajax

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

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.

Disclaimer: I have not used this framework, and this is the first time I've even heard about it.

Nevertheless, looking at the documentation, it specifies a number of times that your server response should be in JSON format.

What you want to do is supposedly possible if you include a property html in your response.

// ajax-here.php
$response['html'] = $_POST['text'];
return json_encode($response);

This is the response generated:

{
    "html": "The text sent to the server"
}

Why don't you rely on a button which submits only a call to an AJAX function?

Inside that function you tell AJAX to get the data from your PHP file and return it in the previous document using;

document.getElementById("result").innerHTML=xmlhttp.responseText;

Seems to make a whole lot more sense than what you're using... But hey, could just be me.

EDIT:

Example:

somePHPFile.php

   <input type="text" name="text" id="text" />
   <button type="button" onclick='ajaxCALL();'>SomeTEXT</button>
<div id="result">  </div>

Or you can do something like:

<input type="text" onblur='ajaxCALL();' name="text" id="text" />
    <div id="result">  </div>

On Blur triggers when the textbox loses focus. Use "onkeyup" if you want immediate response via AJAX, i.e: whilst you're typing.

The script before the closing body tag in somePHPFile.php

<script>
function ajaxCALL()
{
var val=document.getElementById("text").innerHTML;
if (val.length==0){
  document.getElementById("result").innerHTML="";
  return;
  }

if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }

else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

xmlhttp.onreadystatechange=function()
  {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
  document.getElementById("result").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("POST","ajax-here.php",true);

   xmlhttp.send("text="+val);
}
</script>