vitalets / x-editable

In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
http://vitalets.github.io/x-editable
MIT License
6.51k stars 1.72k forks source link

How Am I Sending This Post Data Through AJAX? #39

Closed ncms-zz closed 11 years ago

ncms-zz commented 11 years ago

I see in the docs how you can make it all editable, but I don't understand how I'm sending my POST data through to a page?

$('#username').editable({ type: 'text', pk: 1, //I understand this is the ID in the database? Right? =/ url: '/post', //What is /post? Shouldn't this be /post.php for example? title: 'Enter username' });

I don't understand at all how I am transferring this POST data, lets say I want to take my table on my PHP page displaying my users, and edit one so I can change the username? If I'm using the PHP PDO Library, and using a foreach to echo all of my results, how can I change the pk: option every time? I'm sorry, I'm new to AJAX I don't quite understand, but this plugin would be so amazing to have with my project.

Thank you for all who help,

tolmalev commented 11 years ago

'/post' - is URL of page, that will process ajax query. It can be '/post.php', if you use PHP. But it also can be any other URL on your server.

You can use array $_POST to access data in you php script. For example: $_POST["pk"], $_POST["name"], $_POST["value"]

vitalets commented 11 years ago

@tolmalev thanks for answer!

@ncms you are right, pk is ID of record in database. When printing users in foreach you can set pk via data-pk attribute. Output should be:

<div id="users">
    <a href="#" data-name="username" data-pk="1">ncms</a>
    <a href="#" data-name="username" data-pk="2">tolmalev</a>
    <a href="#" data-name="username" data-pk="3">vitalets</a>
    ...
</div>

and then in jsvascript you make editable all these links together:

$("#users a").editable({
    type: "text",
    url: "post.php",
    ....
});

I will add some details to docs.

ncms-zz commented 11 years ago

@tolmalev Thank you, I honestly sat staring at the docs for a good hour until I figured out the process.

@vitalets Awesome, thank you for the example, makes a lot more sense now. But am I correct in saying that $_POST["pk"] is there to aid the script in figuring out the ID for the database user for example? If so then that was my only major question I have as of now after the explanation.

Thanks again you guys.

topless commented 11 years ago

@vitalets First of all Great job, I am also struggling with the ajax POST. I am using app engine for the back end so I have set up the handler for /post url. The problem is that the request is never fired, although I have tried either by JavaScript or data-url parameter. I have spend last weekend toying with http://jsfiddle.net/xBB5x/25/ you sample code with the ajax mock up but still didn't manage to fired that so much desired POST request.

I am using Chrome developer console to monitor all XHR but nothing shows up.

vitalets commented 11 years ago

@ncms didn't exactly catch your question, sorry. $_POST['pk'] contains ID of record which was updated via editable. So, in your server script you write something like:

mysql_query('update users set '.$_POST['name'].'="'.$_POST['value'].'" where user_id = "'.$_POST['pk'].'"');

dont forget to escape values in real code.

@topless,

  1. have you set data-pk for editable?
  2. please try following:
editable({
    ....
    url: function(params) {
        console.log(params);
    }
});

it submits to function instead ajax, you should see output in chrome console.

atrophic commented 11 years ago

@ncms Yes, the pk param stands for Primary Key and is used to figure out which object you need to modify.

One of the pages I'm using x-editable on edits attributes for the currently logged in user, so pk is unnecessary since I already know the object I'm modifying. You'd need it in nearly every other case though.

ncms-zz commented 11 years ago

@atrophic Yeah, if I only had one POST variable declaring content, how could I declare the ID? I get it now =] Thanks a bunch man.