CODEWITHSUNDEEP
javascriptjqueryinlineeditingjeditable
i need help
i need help

Reputation: 2386

jquery- jeditable not working

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.

Upvotes: 0

Views: 6154

Answers (3)

Mika Tuupola
Mika Tuupola

Reputation: 20387

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]);
    }
});

Upvotes: 1

CalebHC
CalebHC

Reputation: 5042

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!

Upvotes: 0

jrharshath
jrharshath

Reputation: 26583

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

Upvotes: 0

Related Questions