Solved

jQuery - edit in place forms

Posted on 2007-11-18
37
2,067 Views
Last Modified: 2013-12-13
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
Comment
  • 21
  • 10
  • 6
37 Comments
 
LVL 21

Expert Comment

by:nizsmo
ID: 20308466
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308477
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20308526
do you have the inplace.php?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308533
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
 
LVL 82

Expert Comment

by:hielo
ID: 20308534
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308546
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20308563
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
 
LVL 82

Expert Comment

by:hielo
ID: 20308615
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308628
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308632
>>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
 
LVL 82

Expert Comment

by:hielo
ID: 20308659
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308685
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20308697
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20308700
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20308708
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
 
LVL 82

Expert Comment

by:hielo
ID: 20308709
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
 
LVL 82

Expert Comment

by:hielo
ID: 20308839
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20309188
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20309224
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20309514
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20309531
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
 
LVL 21

Expert Comment

by:nizsmo
ID: 20309564
what is the value of $textboxval in your php script? did it capture it from the textbox properly?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20309588
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
 
LVL 82

Expert Comment

by:hielo
ID: 20309622
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20309630
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
 
LVL 82

Expert Comment

by:hielo
ID: 20310084
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
 
LVL 82

Expert Comment

by:hielo
ID: 20310086
"update_value" is the name of the field (that contains the updated information) sent by the AJAX request.
0
 
LVL 82

Expert Comment

by:hielo
ID: 20310102
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312110
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312169
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312189
And after using Alpha/Beta I get - http://newspapersofamerica.com/new/test-edit.php
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312203
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
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 20312693
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312726
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
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312741
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
 
LVL 1

Author Closing Comment

by:catonthecouchproductions
ID: 31409816
Amazing help, was a huge huge help in this, went from knowing nothing to understanding this!

Great expert help!
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 20312864
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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now