Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2097
  • Last Modified:

jQuery - edit in place forms

I am trying to incorporate in place editor using jQuery and I am confused on the PHP end of it, the code you would use, i know you would use a SQL UPDATE statement but am confused on the rest. Here is an example:

http://davehauenstein.com/code/inplace.php - example
http://davehauenstein.com/blog/archives/28 - docs, info, about, etc.

Example code:


$(".editme1").editInPlace({
    url: "inplace.php",
    params: "ajax=yes"
  });

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 21
  • 10
  • 6
1 Solution
 
nizsmoDeveloperCommented:
so, what seems to be the confusion? basically the function you posted there is the most simple one which will only handle values passed through to the server. Are you confused on the usage?
0
 
catonthecouchproductionsAuthor Commented:
I know how to implement it client side wise, include the js files, change the class names to mine, other stuff accordingly, etc.

But I am confused on the PHP end of it.

Ryan
0
 
nizsmoDeveloperCommented:
do you have the inplace.php?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
catonthecouchproductionsAuthor Commented:
Thats just it, I dont have that and I dont know what to put in it, I cant see it anywhere on the site, can you?
0
 
hieloCommented:
url: "inplace.php"
should be changed to the path of your php script. Your php can do whatever you want it to do. Basically, forget that you are using AJAX. Code your php just as you would for a traditional form. If the client expects any results, then "register" a callback function (look at ex. 4 on the page).
0
 
catonthecouchproductionsAuthor Commented:
Thats what i was guessing as well, I was looking here: http://davehauenstein.com/blog/archives/28 - at the bottom of the page it talks about the server side part, i just noticed that any idea how i would set up that inplace.php to save my results to my DB?

0
 
nizsmoDeveloperCommented:
should be just a normal php file taking your textbox value and adding into your database (i am guessing based on hielo's post):
<?php
  $textboxval = $_REQUEST["text_box_name"];
 
  // CONNECT TO YOUR DATABASE
  $query = "UPDATE your_table SET field_name='$textboxval' WHERE ....";
  
  $result = mysql_query($query);
 
  //.. etc..
 
?>

Open in new window

0
 
hieloCommented:
Let me clarify. The idea behind that plugin is to convert just about any element into an editable element.
From example 4 on that page, you have:
<p class="editme4">Edit me now!</p>

Now click on "Edit me now!" and you will notice that it will be able to edit the "Edit me now" to whatever you want. Additionally, a "Save" button appears, which will send the data to the server, in this case "inplace".php. I am not sure if the field is always named "inplace_value" or if it the same as url but replacing the extention (.php) with "_value". From his example:
<?
$textboxval = $_REQUEST["inplace_value"];

//sql follows
?>
0
 
catonthecouchproductionsAuthor Commented:
Alrighty, so I put all my javascript/php accordingly and ill paste it below, here is what I want to edit in that format:

http://www.newspapersofamerica.com/new/index.php?p=papers&state=1

See how there is more than one column, how would i go about doing each one?

In my papers-edit.php code I gave my td class names for the javascript can identify. Where do i set up the text box name? Since if you view the code: http://davehauenstein.com/code/inplace.php

i dont see any input, i just see the p.editme1 for the class name.
MY JAVASCRIPT I HAVE - HEADER.PHP --------------------------------------
 
$(document).ready(function() { 
	$(".name").editInPlace({
	url: "save.php",
	params: "ajax=yes"
	});
);
 
SAVE.PHP ----------------------------------------------------------------
 
<?php
	include "config.php";
	$textboxval = $_REQUEST["text_box_name"];
	$query      = "UPDATE papers SET name='$textboxval'";
	$result     = mysql_query($query);
?>
 
PAPERS-EDIT.PHP ---------------------------------------------------------
 
		print "<td class=\"name\">".$row["name"]."</td>"; 
		print "<td class=\"city\">".$row["city"]."</td>"; 
		print "<td class=\"circulation\">".$row["circulation"]."</td> ";
		print "<td class=\"price\">".$row["price"]."</td> ";

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
>>I am not sure if the field is always named "inplace_value" or if it the same as url but replacing the extention (.php) with "_value".

I was wondering that same thing!

Ryan
0
 
hieloCommented:
The documentation is not clear on the field name, but you would have to try it. So change:
$textboxval = $_REQUEST["text_box_name"];
to
$textboxval = $_REQUEST["save_value"];
or
$textboxval = $_REQUEST["inplace_value"];

Also, if eithe of those two statements work, $textboxval would contain the value typed by the user. So If I were to type:
Hello World!

"UPDATE papers SET name='$textboxval'";
would "translate to:
"UPDATE papers SET name='Hello World!'";

So, if the table does not exist you will get a runtime error
0
 
catonthecouchproductionsAuthor Commented:
I tried both of those, and doesnt update, I made this test page for it, still need to make it secure and all that but:

http://www.newspapersofamerica.com/new/index.php?p=papers-edit&state=1


I have no js errors which is good, haha.

Any suggestions? Once i made one change to them it made it to them all. I think because they all have the same class name correct? Any idea how I would make each different?

Thanks,

Ryan
save.php
 
<?php
	include "config.php";
$textboxval = $_REQUEST["inplace_value"];
	$query      = "UPDATE papers SET name='$textboxval'";
	$result     = mysql_query($query);
?>
 
javascript:
 
// code for editing in place
$(document).ready(function() {
	$(".name").editInPlace({
    url: "save.php",
    params: "ajax=yes"
	}) 
}); 

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
I just checked my database and it made all of the entries in the table PAPERS blank, I have a backup so I dont care, 1600 rows, haha.

Any suggestions?
0
 
nizsmoDeveloperCommented:
ooo lucky u have backup sorry my bad.

this is because the update statement doesn't state WHICH one to update, so it updates ALL of them. Also it is not getting the textboxval properly so it is essentially assigning '' (blank) to all your names.

Sorry about that. But you will need to experiment on what to put in the $_REQUEST["name_here"] as "inplace_value" is obviously incorrect.
0
 
nizsmoDeveloperCommented:
to try it out how about:
print "<td class=\"name\">".$row["name"]."</td>";

adding an id:
print "<td class=\"name\" id=\"testing123\">".$row["name"]."</td>";

then in your php:

( we can get to the ID bit soon)...

<?php
        include "config.php";
$textboxval = $_REQUEST["testing123"];
        $query      = "UPDATE papers SET name='$textboxval'";
        $result     = mysql_query($query);
?>

Open in new window

0
 
hieloCommented:
YOu need a where clause. EXample:
"UPDATE papers SET name='$textboxval' WHERE id=3";

IF there is only one item with id 3, that is the only one. Alternaively you can use:
"UPDATE papers SET name='$textboxval' LIMIT 1";
should update only one record. The black is because $textbox is coming up blank, so I guess inplace_value is not the name of the field. Try "save_value" instead.
0
 
hieloCommented:
After looking at the uncompressed code, it turns out that the field name should be inplace_value:

var use_field_type = '<textarea name="inplace_value" rows="' + settings.textarea_rows +
 '" cols="' + settings.textarea_cols + '">' + jQuery(this).text().trim().escape_html() + '</textarea>';
0
 
catonthecouchproductionsAuthor Commented:
Thank you for that! So for this code:

>>UPDATE papers SET name='$textboxval' WHERE id=3

Would I need to use REQUEST/GET to call whatever ID it is under? Since right now it is only static? And yes each item there is only one so LIMIT 1 would be a good use for that as well.

>>After looking at the uncompressed code, it turns out that the field name should be inplace_value:

Nice to know, I wish they mentioned that in there docs, haha. Thanks for looking in to that for me!

Any suggestions?
Thanks,
Ryan

0
 
catonthecouchproductionsAuthor Commented:
Would it be something like this:


<?php
	include "config.php";
	$id         = $_REQUEST["id"];
	$textboxval = $_REQUEST["inplace_value"];
	$query      = "UPDATE papers SET name='$textboxval' WHERE id=$id";
	$result     = mysql_query($query);
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Looking at it some more and do you think I am on the right track? We need to capture the ID correct? The ID stored in the PAPERS table to select which ID is being updated?

Does this line work?
>>        $id         = $_REQUEST["id"];
0
 
catonthecouchproductionsAuthor Commented:
I tried making it by setting a value and it didnt work, didnt update, went back to the other default one:

>>      $query      = "UPDATE papers SET name='$textboxval' WHERE id=63";
0
 
nizsmoDeveloperCommented:
what is the value of $textboxval in your php script? did it capture it from the textbox properly?
0
 
catonthecouchproductionsAuthor Commented:
Am i printing this on the papers.php page or the save.php page, do you have any idea why if you go to - http://newspapersofamerica.com/new/index.php?p=papers&state=3 - you can't click anything, i don't know what happened, i am  looking at my code now and I get no JS errors either.

Ryan
0
 
hieloCommented:
First of all:
$_POST is only for post requests; $_GET is only for get requests;$_REQUEST is for either request type!
Basically the server looks for the named field in $_POST, if none found it looks in $_GET.

Second:
That utility sends POST requests.

Third, In regards to:
>Does this line work?
>>        $id         = $_REQUEST["id"];
I suspect not. Why? because something like:
<p class="editme4">Edit me now!</p>
gets converted dynamically into a form element like:
<textarea>Edit me now</textarea>

but the AJAX triggered when you click "Save" will only see the <textarea>. It does not know anything about any "id" field, even if you include a hidden one. You will need to pass via the params option:
// code for editing in place
$(document).ready(function() {
      $(".name").editInPlace({
    url: "save.php",
    params: "id=3"
      })
});

Lastly, before you attempt any SQL, make sure you are able to read the data you expect to receive.
0
 
catonthecouchproductionsAuthor Commented:
Ahh..I see now.

So for now, start by using data:

$(document).ready(function() {
      $(".name").editInPlace({
    url: "save.php",
    params: "id=3"
      })
});

How will this be called? When click any ID correct? Any idea why I cant select anything either, I am not sure what happened?

Thanks so much for your help!
0
 
hieloCommented:
HTML
<script type="text/javascript">
$(document).ready( function()
{
  $(".name").editInPlace({
    url: "save.php",
    params: "id=yes"
  });
);
</script>
<p class="name" id="ex1">Edit me now!</p>


PHP: save.php
<?php
// send back all the information sent by client. Client interface will be updated with everything sent back.
foreach( $_REQUEST as $k => $v)
      echo( $k . " = " . $v . "<br/>");
?>
0
 
hieloCommented:
"update_value" is the name of the field (that contains the updated information) sent by the AJAX request.
0
 
hieloCommented:
The following setup will send only the updated value of the paragraph you click on. However, the value specified in the params will be sent all the elements with class="name". So, if you replace Alpha with Gamma and click Save, the server will see:
updated_value=Gamma
id=3

The php is the samed as posted above.

HTML
<script type="text/javascript">
$(document).ready( function()
{
  $(".name").editInPlace({
    url: "save.php",
    params: "id=3"
  });
);
</script>

<p class="editme1" id="ex1a">Alpha</p>
<p class="editme1" id="ex1b">Beta</p>
0
 
catonthecouchproductionsAuthor Commented:
Hey, I can seem to figure out why I cant click the name value, Id ont know why. I dont get any errors either. If you go to the edit page I gave you a couple posts back it isnt working and im not sure why. Any suggestios?
0
 
catonthecouchproductionsAuthor Commented:
After using your code, I got this:


update_value = Edit me now!
element_id = ex1
id = 3
original_html = Edit me now!
 
And my save.php page is:
 
	foreach( $_REQUEST as $k => $v)
	echo( $k . " = " . $v . "<br/>");

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
And after using Alpha/Beta I get - http://newspapersofamerica.com/new/test-edit.php
0
 
catonthecouchproductionsAuthor Commented:
And you can check it out here: http://newspapersofamerica.com/new/index.php?p=papers-edit&state=8

In the save.php just using the for each not update.
0
 
hieloCommented:
C'mon Ryan. MY php file basically just sends back to the client what the client sends back to the server. The script automatically puts everything within the element that you are editing. YOUR php file should be something like:

<?php
      include "config.php";

//update your db
      $id         = $_REQUEST["id"];
      $textboxval = $_REQUEST["update_value"];
      $query      = "UPDATE papers SET name='$textboxval' WHERE id=$id LIMIT 1";
      $result     = mysql_query($query);

//send the info back to the client so it "remain" in the "original non-editable element"
echo($_REQUEST['update_value']);
?>

The client-side at http://newspapersofamerica.com/new/test-edit.php looks OK.

BTW: This post soooooo answers your question, so please close it already.
0
 
catonthecouchproductionsAuthor Commented:
Thank you so what you gave me, is that it will echo the new result correct? And I was right on the WHERE clause, finally getting the hang ofi t, thank you so much, I was clueless at first but I get how it is working now, thank you so much for your help.

Is having:

$(document).ready(function() {
    $(".name").editInPlace({
            url: "save.php",
            params: "id=3"
      });
});

Still okay? The id=3?
0
 
catonthecouchproductionsAuthor Commented:
i am going to attempt to do that for the others, but I will open another question, my goal is to have them all like that and am  not sure how to set that up for all values, but let me take a look on how it owuld work before jumping in on EE.

Thanks!
0
 
catonthecouchproductionsAuthor Commented:
Amazing help, was a huge huge help in this, went from knowing nothing to understanding this!

Great expert help!
0
 
catonthecouchproductionsAuthor Commented:
I posted this as well..thought abouit it and laid it out, does it make sense?

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22970236.html

Any idea on having id = 3? Does that effect it at all?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 21
  • 10
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now