selector de edición en línea jQuery

I have a functional inline editing script on client side, however I'd like to add a button like <input type="button" value="edit here"> when someone clicks the button it should be able to select the value just like my hover selector works and produce the form

In short I want to remove the hover status selector to the click button selector.

Check out the code to understand more:

<div id="pesa"><p>PERSONAL INFORMATION</p>
    <ul>
        EMAIL:<li class="editable"><?php echo $email;?></li><input type="button" value="edit here">
        NAME:<li class="editable"><?php echo $name;?></li><input type="button" value="edit here">
        TELLPHONE:<li class="editable"><?php echo $tel;?></li>
        COUNTRY:<li class="editable"><?php echo $country;?></li>
        CITY:<li class="editable"><?php echo $city;?></li>
    </ul>
</div>  

Thank you.ok sorry i wass having trouble ith puting code tags here isthe js

$(document).ready(function() 
{
var oldText, newText;
$(".editable").hover(
    function()
    {
        $(this).addClass("editHover");
    }, 
    function()
    {
        $(this).removeClass("editHover");
    }
);

$(".editable").bind("dblclick", replaceHTML);


$(".btnSave").live("click", 
                function()
                {
                    newText = $(this).siblings("form")
                                     .children(".editBox")
                                     .val().replace(/"/g, "&quot;");

                    $(this).parent()
                           .html(newText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

$(".btnDiscard").live("click", 
                function()
                {
                    $(this).parent()
                           .html(oldText)
                           .removeClass("noPad")
                           .bind("dblclick", replaceHTML);
                }
                ); 

function replaceHTML()
                {
                    oldText = $(this).html()
                                     .replace(/"/g, "&quot;");
                    $(this).addClass("noPad")
                           .html("")
                           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + oldText + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>")
                           .unbind('dblclick', replaceHTML);

                }
   }
 ); 

y el css

     #pesa a{
color: #000;
     }

    #pesa a:hover{
color: #;
     }


    #pesa a:hover{
text-decoration: none;
    }

    h1{
font-size: 30px;
padding: 0;
margin: 0;
    }

    h2{
font-size: 20px;
    }


    .editHover{
background-color: #E8F3FF;
   }

     .editBox{
width: 326px;
min-height: 20px;
padding: 10px 15px;
background-color: #fff;
border: 2px solid #E8F3FF;
    }

    #pesa ul{
list-style: none;
    }

    #pesa li{
width: 330px;
min-height: 20px;
padding: 10px 15px;
margin: 5px;
    }

   li.noPad{
padding: 0;
width: 360px;
   }

   #pesa form{
width: 100%;
  }

.btnSave, .btnCancel{
padding: 6px 30px 6px 75px;
}

.block{
float: left;
margin: 20px 0;
}

preguntado el 28 de agosto de 12 a las 12:08

And your hover selector is where ? -

which js you are using for inline editing, look into that. -

i have jst edited the js and the css bit ... -

Please clarify. You mention removing a hover selector, but it is not clear where that is? -

2 Respuestas

function replaceHTML()
{
    $(this).removeClass('editHover'); 
}

O usar toggleClass() if you're using the same method for adding as well as removing the inline editor.

Respondido 28 ago 12, 13:08

thanksfor your answer...but thats not it you see the <li class="editable"><?php echo $email;?></li> has a to be dblclicked to producethe formand populate the form with oldtext value however what i want is that clicking button sshould have the same effect as dblclickingthe <li></li> getme - Jimmy Obonyo Abor

EDITAR

So that I say in the comment I change the DOM and another things. The class given is so bad I think :)

HTML:

<div id="pesa"><p>PERSONAL INFORMATION</p>
    <div class="ul">
        <div>
            EMAIL:<div class="li editable">test</div>
            <input type="button" value="edit here" class="jim"><br>
        </div>
        <div>
            NAME:<div class="li editable">name</div>
            <input type="button" value="edit here" class="jim">
        </div>
        <div>
            TELLPHONE:<div class="li editable">000000000</div>
        </div>
        <div>
            COUNTRY:<div class="li editable">Tazmania</div>
        </div>
        <div>
            CITY:<div class="li editable">Fouilly les oies</div>
        </div>
    </div>
</div>  

JS:

$(document).ready(function(){

$(".editable").hover(
    function()
    {
        if(!$(this).hasClass("noPad")){
            $(this).addClass("editHover");
        }
    },
    function()
    {
        $(this).removeClass("editHover");
    }

);

$(".editable").bind("dblclick", function(){
    replaceHTML(this);
});

$(".jim").bind("click", function(){
    replaceHTML($(this).siblings(".li"));
});

$(".btnSave").live("click",
    function(){
        $(this).parent()
               .html($(this).parent().find("form input").val())
               .removeClass("noPad");
    });

$(".btnDiscard").live("click",
    function(){
        $(this).parent()
               .html( $(this).parent().find("form").data("oldText") )
               .removeClass("noPad");
    });

function replaceHTML(element){
    if( $(element).hasClass("noPad") ){
        return
    }
    var value = $(element).html().replace(/"/g, "&quot;");
    $(element).addClass("noPad")
           .html("<form><input type=\"text\" class=\"editBox\" value=\"" + value + "\" /> </form><a href=\"#\" class=\"btnSave\">Save changes</a> <a href=\"#\" class=\"btnDiscard\">Discard changes</a>");

    $(element).removeClass("editHover");
    $(element).find("form").data("oldText", value);
}

}); 

I hope this new version is good for you

You can find the new jsfiddle example aquí y anterior aquí

Respondido 30 ago 12, 13:08

thanks for pointing out jsfiddle ...realy helpfull however ...thats not what i was targeting...ihave upadated the code at js fiddle...however my worry is ..when i click the edit here button it selects all the list items and gives it the html value of the first list item...thats where the trouble comess ...i just want to select the value of that ist item ie the html and produce a a form with the value of the list item for easy editing of the user ..check out the code and demo <a href="jsfiddle.net/RWCkE/5/">here - Jimmy Obonyo Abor

Can I change your DOM ? Because it is not compliant :) (I'm a bad I know) and to have a structure easier to use. - Charles Jourdan

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.