[RESOLVED] JS/JQuery script for mysql data editting

Hi,
I am looking for JQuery script that could help me to edit mysql table. I am sure something should be published, but I don't know where to search. I need something very simple to install and configure.

The idea is to have a form field on a page, where all columns of table would be placed. Every mysql column should be on separate line and there should be a save button next to it. So if I edit a column, then I would just press Save button, and the request to save actual value would be send to server. No page reload. I would continue editing and saving all columns and when I would be at bottom of page, then I would press the Next button, and next mysql row would be loaded to the form field.

Is any similar code on internet for this editing purposes?

your not going to find anything that does what you describe that is "easy". I found an awesome example though. this is about as easy as it gets.

http://tutorialzine.com/2010/03/ajax...php-mysql-css/

oh and im not a apache server guru but i think there are already solutions like this in place on most php installations.

Quote:

---

Originally Posted by DanInMA

your not going to find anything that does what you describe that is "easy". I found an awesome example though. this is about as easy as it gets.

http://tutorialzine.com/2010/03/ajax...php-mysql-css/

---

Thanx for reply. I watched but it is same as the inline editors I have seen, but worse. All the demos needs clicking. You cannot use keyboard to move between fields.

I think it would be better to do some code for it in JQuery. But I am not much good with this, I learned it two years ago.

Maybe somebody here could write a piece of code for us?

I write down what it should do.

Imagine you have such code:

Code:

---

<form name=inline_editor_form action=localhost/inline_editor/?action=save method=post>
<textarea name="info_25_desc">
<p>Lorem ipsum dolor sit amet consectetuer habitant et massa congue In. Nulla urna et quis Phasellus Nulla et libero felis dignissim pellentesque. Ac quis leo Vestibulum commodo penatibus fringilla aliquet habitant nibh porta. At eget pellentesque pellentesque risus ac tincidunt hac egestas et justo. Nam orci id dictumst malesuada wisi magna.
</p>
</textarea>
<input type=button value "save this column!"><br>
<textarea name="info_25_desc2">
        <p>Lorem ipsum dolor sit amet consectetuer habitant et massa congue In. Nulla urna et quis Phasellus Nulla et libero felis dignissim pellentesque. Ac quis leo Vestibulum commodo penatibus fringilla aliquet habitant nibh porta. At eget pellentesque pellentesque risus ac tincidunt hac egestas et justo. Nam orci id dictumst malesuada wisi magna.
        </p>
</textarea>
<input type=button value "save this column!" onpress="$.sendRequest($this);" onclick="$.sendRequest($this);"><br>

---

Name of elements stands for:
table name + id of row + name of column to edit

Would it be hard to make Jquery command that would send the data to save it?

Now, I am not sure if the syntax in submit button is OK. It was just example, that after pressing (by keyboard or mouse) it should run some Jquery function...

We need to get the id from previous element and parse it to get 3 values to make sql command in php.

you can use json_encode to send data or raw mysql result rows to javascript.
jquery can turn a form into json and use ajax to post it to php.
json_decode can turn the post data into a php assocArray.
you use the assocArray to populate a mysql insert or update string, and run it.

you can use a simple json>html converter to automatically generate the forms to edit the row data. or you can explicitly bind each property of the row-based json object to a certain form input.

Quote:

---

Originally Posted by rnd me

you can use json_encode to send data or raw mysql result rows to javascript.
jquery can turn a form into json and use ajax to post it to php.
json_decode can turn the post data into a php assocArray.
you use the assocArray to populate a mysql insert or update string, and run it.

you can use a simple json>html converter to automatically generate the forms to edit the row data. or you can explicitly bind each property of the row-based json object to a certain form input.

---

Thanks for replay. I have already found how to use .post() to post data in JQuery and obtain them on server to perform mysql action. In this phase I have problem data comes converted and some characters are in this format: í.<br>
Can you tell me how to convert them to original meanning that was written in textarea?

Also I want to ask you. How can .post() evaluate then request succeed? Must I echo some string to output from server? There is an example on

Code:

---

manual site:
$.post('ajax/test.html', function(data) {
  $('.result').html(data);
});

---

What does it mean? Have I to create some element when server is sending a reply? I don't understand it. I'd like to make some button or anchor that I will click onto and next row will be loaded to form elements. So I need server to replay and the script catch the reply and load data.

Next problem is that I need to prevent redirect after clicking on anchor:

Code:

---

<a class=no_redirect href='localhost' onclick='$.post("index.php?action=ax&save=1", { tname: "basic", rid: "3", col:"id", val:$(this).prev().val() } );'>Save!</a>

---

So I tryied this script:

Code:

---

<script type="text/javascript" src="jquery.inlineEdit_.js"></script>
          <script language=Javascript onload="$.no_redirect()">
          $.fn.no_redirect = function(){
            $("a.no_redirect").click(function(event) {
              event.preventDefault();
            });
          }
</script>

---

But doesn't work. It should be fired on page load and prevent redirect.

I found nice trick how to stop redirection after clicking anchor:

Code:

---

<a class=no_redirect href='localhost' onclick='$.post("index.php?action=ax&save=1", { tname: "basic", rid: "3", col:"id", val:$(this).prev().val() } );;return false;'>Save!</a>

---

Returning false prevents the default action. But I am still looking solution how to load data to my form, if I click "Next row" button

you can set the status on the post response.
i don't know how jQuery emits status number, but i would bet that a 4xx would fire the failure callback instead of the sucsess callback, if .post is like the normal ajax handler interface jQuery provides.

Quote:

---

Originally Posted by rnd me

you can set the status on the post response.
i don't know how jQuery emits status number, but i would bet that a 4xx would fire the failure callback instead of the sucsess callback, if .post is like the normal ajax handler interface jQuery provides.

---

I have problem to understand you what you mean, but here is my solution:

Code:

---

<a href='localhost' onclick='$.post("ax.php?action=post&save=1", { tabName: "basic", rid: "3", col:"id", val:$(this).prev().val() }, function(result) {if (result=="Data succesfuly updated.") $(this).next().val("Column \"id\" saved.");}, "html");;;return false;'>Save!</a><span></span>

---

That is:

Code:

---

$.post("ax.php?action=post&save=1",
  { tabName: "basic",
    rid: "3",
    col:"id",
    val:$(this).prev().val() },
    function(result) {
          if (result=="Data succesfuly updated.") $(this).next().val("Column \"id\" saved.");},
  "html");

---

Manual here: http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.post/ (I think these two fnc are identical)

When the replay comes from server, the output of ax.php comes as a string into result argument of anonymous function.

But now I have next problem. As you can see I call this script from anchor by onclick event. I need to pass reference on the anchor which is parent of the anonymous function. I'd like to use this in the anonymous function to access a tag. There for there is:

Code:

---

$(this).next().val("Column saved");

---

This code doesn't work because it links the function self, not her parent.

Some solution?

Here it is:

Code:

---

<textarea cols="80" rows="1" onfocus='$(this).next().next().text("").removeClass("on").addClass("off");'><p>Lorem ipsum dolor sit amet consectetuer porta turpis malesuada accumsan vel. Curabitur Pellentesque aliquam.</p></textarea>
<a href='localhost' onclick='$.post("ax.php?action=post&save=1", { tabName: "details", rid: "3", col:"pe11", val:$(this).prev().val() }, function(result) {if (result=="Data succesfuly updated.") $(this).next().val("Column \"pe11\" saved.");}, "html");$(this).next().text("Saved!").removeClass("off").addClass("on");return false;'>Save!</a><span></span><br>

---

The trick:

Code:

---

$(this).next().text("Saved!").removeClass("off").addClass("on");

---

removes resetting class and adds class to highlight the span

Code:

---

$(this).next().next().text("").removeClass("on").addClass("off");

---

This is reseting code that removes the highlighting.

And this is the reset:

Code:

---

<style type="text/css">
  span.on {background-color:lightgreen; margin:0px 5px;}
  span.off {background-color:transparent;}
</style>

---

Nevertheless there is still one problem opened.

When I want to confirm, that the save action was really done, then I want to use the "this" mechanism inside the anonymous function - and I don't know if this is possible to do. "this" have to access the anchor which is parent of anonymous function:

Code:

---

<a ... onclick='$.post("ax.php?... ", { ... }, function(result) {... $(this).next().val("Column \"pe11\" saved.");}, "html");... return false;'>...

---

So till now this is not working. Does this any solution? Any way how to pass "this" from anchor level into the function?

I have the code almost ready. Now I continue in different thread because this concerns more .delay() problem than editing/saving data (See the code on the link; that is more complex).