Guys, help deal with two questions. I started from this site Edit in place, but I had two problems. Visual display of the problem in pictures:

alt text

Links from where the script is made:

  1. Jeditable
  2. Jeditable - Edit In Place Plugin For jQuery

-

  • Mouseover does not work (when editing a phone number, the text is not saved, but the Click to edit informer appears) Figure 3.

  • I don’t know how to register in CSS so that the phone’s edit field itself would be like in Figure 1

Here is the listing itself

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js"></script> <script type="text/javascript" src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function () { $(".mouseover").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { indicator : "<img src='img/indicator.gif'>", tooltip : "to edit...", event : "mouseover", style : "inherit" }); $("input").live("focus",function(){$(this).mask("+99 99 9999999")}); }); </script> <style type="text/css"> html { background: #f7f7f7; } body { margin: 0px; font-size: 12px; line-height: 160%; font-family: "arial"; } input { color:#416796; font:23px/1.4em Arial; padding:0; font-weight:bold; width: 370px; border:1px solid #ccc; text-align:center } #wrap{ margin: 10px; padding: 0px; text-align:center; color:#416796; font:23px/1.4em Arial; } #inner { width: 620px; margin: 20px auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #ffffff; border: 1px solid #cccccc; padding: 10px; } .variant { width: 95%; margin: 1px auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 7px; color: #555555; font-weight: bold; } #text{ font-size: 13px; margin: 10px; color:#4e4e4e; } .grid { width: 100%; text-align:center; padding: 10px 14px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { background:#e4e7f1; padding: 0px 14px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .variant span { background: url("assets/icons.png") 2px -173px no-repeat; display: block; width: 25px; height: 15px; float: left; } .variant:hover span { background: url("assets/icons.png") 2px -205px no-repeat; } .variant:hover { background: #e4e7f1; cursor: pointer; } .checked, .checked:hover { background: #9eafc3; color: #FFF; } .checked span, .checked:hover span { background: url("assets/icons.png") 2px -189px no-repeat; } </style> </head> <body> <div id="wrapper"> <div id="inner"> <br><br><br><br> <div id="text"><b>Please, check if your phone number is correct</span></font></font></b></div> <hr size="1" width="100%"> <div class="container grid"> <div id="wrap"> <b title="to edit..." class="mouseover" style="display: inline">+00 00 0000000</b> <div id="text"> If it is wrong, please enter your phone number and then submit</div> </div> </div> <hr size="1" width="100%"> </div> </div> </body> </html>

    1 answer 1

    In order for the phone number to be like in the picture you need to connect the Masked Input Plugin . Perhaps because of this, and the problem with saving.

    Well, then in the script

    In the styles add:

     input { color:#416796; font:23px/1.4em Arial; padding:0; font-weight:bold; width: 370px; border:1px solid #ccc; text-align:center }

    JS script:

     <script type="text/javascript"> $(document).ready(function () { $(".mouseover").editable("http://www.appelsiini.net/projects/jeditable/php/echo.php", { indicator : "<img src='img/indicator.gif'>", tooltip : "to edit...", event : "mouseover", style : "inherit" }); $("input").live("focus",function(){$(this).mask("+99 99 9999999")}); }); </script>

    maskedinput naturally must be connected, i.e. in the head:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.maskedinput-1.3.min.js"></script> <script type="text/javascript" src="jquery.jeditable.js" charset="utf-8"></script>

    With jQuery version 1.3.2 it works fine, I tried 1.4.2, maskedinput is buggy

    • updated the answer - DemoS
    • DemoS, the script stopped working = (the reason is not known - Vitil
    • Second time $(".mouseover").editable("h... not needed - DemoS