views:

1045

answers:

3

basically what I want is simple, when people onclick, the field become editable.

After they change the value, press Esc at keyboard/ or click outside , to save the record.

I'm not sure why it's not working. Documentation seems not complete... Anyone got idea on how this work? The documentation page: http://www.appelsiini.net/projects/jeditable

Here I post my existing code here for guys to review.

testing.html

<head>

<title></title>

<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">

$(function() {

  $(".click").editable("jeditabletest.php", { 
      indicator : "<img src='indicator.gif'>",
      tooltip   : "Click to edit...",
      style  : "inherit"
  });

});

</script>

<style type="text/css">
#sidebar {
  width: 0px;
}

#content {
  width: 770px;
}

.editable input[type=submit] {
  color: #F00;
  font-weight: bold;
}
.editable input[type=button] {
  color: #0F0;
  font-weight: bold;
}

</style>

</head>



<body>      
      <b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should        

</body>
</html>


jeditabletest.php

<?php
echo "hehehe"
?>

does anyone know what's wrong? I tried so many times, it just not working at all. All related library files are already put in.

A: 

yeap: i recommend http://valums.com/edit-in-place/

It uses div's contentEditable property. You may want to look into that before you start using it.

jrh

Here Be Wolves
A: 

Hello,

I ran your code and it seemed to work fine. I think the reason why it's not working for you is that this .html page needs to be run from a web server like http://localhost/mypage.html. The jeditable plugin is making an AJAX call to the server whenever you try to save the edited text and for the AJAX call to work you need to run the page from a server.

Hope this helps!

CalebHC
+1  A: 

To enable submitting the form when user clicks outside do the following:

 $(".editable").editable("http://www.example.com/save.php", {
     onblur : "submit"
 });

Submitting when pressing ESC is generally a bad idea since ESC is universally reserved for canceling. If you really really want to do this you need to edit Jeditable code. Search and edit the following in jquery.jeditable.js:

/* discard changes if pressing esc */
input.keydown(function(e) {
    if (e.keyCode == 27) {
        e.preventDefault();
        reset.apply(form, [settings, self]);
    }
});
Mika Tuupola
I found a funny issue from jeditable. Example- in firefoxWhen I click to edit, the "word" center aligned... Then I click elsewhere to save data from textbox into db by using firefox, the front and back of the particular word will have extra white space (even after I trim the string received at ajax page). Eg: I want to save "word", but the final data saved into db is " word " In IE no such problem.Do you have any idea what's happening along the process?
i need help
oops, i found the issue already. In Firefox, if you put <td> word </td> it will get the whitespace that can't be trim. In IE, it will pre-ignore whitespace from normal html tag.
i need help