CODEWITHSUNDEEP
javascriptjqueryhtmlcss
S Raihan
S Raihan

Reputation: 387

Need help about a function

I am new at Javascript and jQuery. I need help with something like:

<script type="text/javascript">
    $(window).load(function(){
        $('#createDiv').click(function (){
            $("<div/>").html("<span id='myInstance2' style='display: block;'>New Folder</span>").css("display", "none").appendTo("#results").fadeIn();
        });
    });
</script>

I have this function to click and create a new <span> tag with a text. You can see I have an ID myInstance2. So what I am trying to do is when I click and the span is created, I would like to make this span live-editable. Like I can rename this "New folder" into whatever I want.

If anyone can help it would be great. Thanks in advance and sorry for my bad English :)

Upvotes: 2

Views: 210

Answers (3)

UnPlan2ned
UnPlan2ned

Reputation: 183

This should work and is much simpler than other answers (imo):

<script type="text/javascript">
  $(window).load(function(){
      $('#createDiv').click(function (){
        $("<div />").html("<span onclick='$(this).html(prompt(\"Rename \"+$(this).html()))' id='myInstance2' style='display: block; cursor:pointer;'>New Folder</span>").css("display", "none").appendTo("#results").fadeIn();
      });
  });
</script>

When you click your span, you will be prompted for its new name. To visual represent that your created the span is clickable, I also added cursor:pointer to the style for the span.

Demo: http://jsfiddle.net/XJ6Cn/

Edit: P.S: Do you create more than one spanusing this method? If so, you should create the ids dynamically, because ids are meant to be unique. If you want a string to be the same for all spans, you can set it as a class instead.

Upvotes: 0

SpYk3HH
SpYk3HH

Reputation: 22570

If I catch what I think you're trying to do, it's not quite feasable the way you imagine. However, there are tricks. The following is one of them. The idea is to insert a "hidden" input where the span is, then create functions to show the input and hide span when needed (like when user clicks on span. Something like so:

jsFiddle

HTML

<button id="createDiv">Start</button>
<div id="results"></div>

CSS

#createDiv, #results span { cursor: pointer; }
#results div {
    background: #FFA;
    border: 1px solid;
    margin: 1em;
    padding: 1em 1em 2em;
}
#results input[type=text] {
    border: none;
    display: none;
    outline: none;
}

JavaScript

//  Call for document .onload event
$(function() {
    //  Normal Click event asignement, same as $("#createDiv").click(function
    $("#createDiv").on("click", function(e) {
        //  Simply creating the elements one by one to remove confusion
        var newDiv = $("<div />", { class: "new-folder" }),  //  Notice, each child variable is appended to parent
            newInp = $("<input />", { type: "text", value: "New Folder", class: "title-inp" }).appendTo(newDiv),
            newSpan = $("<span />", { id: "myInstance2", text: "New Folder", class: "title-span" }).appendTo(newDiv);
        //  Everything created and seated, let's append this new div to it's parent
        $("#results").append(newDiv);
    });

    //  the following use the ".delegate" side of .on
    //  This means that ALL future created elements with the same classname, 
    //    inside the same parent will have this same event function added
    $("#results").on("click", ".new-folder .title-span", function(e) {
        //  This hides our span as it was clicked on and shows our trick input, 
        //    also places focus on input
        $(this).hide().prev().show().focus();
    });
    $("#results").on("blur", ".new-folder .title-inp", function(e) {
        //  tells the browser, when user clicks away from input, hide input and show span
        //    also replaces text in span with new text in input
        $(this).hide().next().text($(this).val()).show();
    });
    //  The following sures we get the same functionality from blur on Enter key being pressed
    $("#results").on("keyup", ".new-folder .title-inp", function(e) {
        //  Here we grab the key code for the "Enter" key
        var eKey = e.which || e.keyCode;
        if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
            $(this).hide().next().text($(this).val()).show();
        }
    });
})

Upvotes: 2

gillyspy
gillyspy

Reputation: 1598

what you can do is put a delegated event handler on the enclosing, static element where span will reside #results. The handler will hide the span and reveal an input. I don't know your code well enough but you likely want the id on the input instead of the span. You did not say you wanted to go from editable back to "read-only" so I did not do that.

DEMO

    $('#createDiv').on('click', function () {
        var str = "Click here to edit it";  // New Folder
        $("<div/>").html("<span id='myInstance2' class='editToggler' style='display: block;'>" + str + "</span><input class='editToggler' style='display: none' value='" + str + "'/>").appendTo("#results").fadeIn();
        $(this).off('click');
    });



    $('#results').on('click', 'span', function () {
        $('.editToggler').toggle();
    });

Upvotes: 1

Related Questions