Creating a popup form as in linkedin

JavaScript
1

I want to create a popup form whenever I clicked on a line of text. This feature should be analogous to how Linkedin users change their profile information.

For example, if I set up an account on Linkedin and would like to change my first name, I clicked on my first name on the profile page, and an edit menu pops up to the right of mouse, allowing me to edit both first and last name and then save the settings.

How can I achieve this effect? Thanks!

2

Here’s a quick and dirty jQuery solution. This doesn’t actually save anywhere, you’ll need to do that part yourself.

html:

<div id="name-container"><span id="name">My Name</span></div>

js:

$(document).on('click', '#name', function(e) {
    var curName = $(this).text();
    $(this).remove();
    $('#name-container').html('<input type="text" id="name-input" value="'+ curName +'" />');
});

$(document).on('blur keyup', '#name-input', function(e) {
    if(e.keyCode === 13 || e.type === 'focusout') {
        var newName = $(this).val();
        $(this).remove();
        $('#name-container').html('<span id="name">'+ newName +'</span>');
        // you probably want to save it with ajax here
    }
});
3

Thanks! I will take a look :smile:

4

@mawburn, thanks for the code, this aligns with the ajax codes that i learned recently.

I have a related question that how should I implement this feature if I would like to create a button such that when I clicked on it, a slide menu appears (this slide menu looks like another php to me but I may be mistaken). On the slide menu I can have more options to submit changes by method POST.

I don’t understand how other websites do it: if they actually have another php that’s somehow inserted into the page, or it is a hidden element with “display: none” that had jQuery attached to make it visible.

5

Yeah, I actually went back and looked at linked in after I wrote this script and they changed it from the last time I messed with it. What you’re looking for is a click menu. PHP is not needed, since that’s serverside.

Basically, you’re looking for this probably… just with a left click instead of right.

6

Exactly! Thanks for the quick answer. I will grind through these codes…

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.