How to pop up a select list, and update the site with the selection?

Question

I have some text in a DIV container. When the user clicks that text, i would like to have a selection list poppup. When the user chooses a value from the selection list, and clicks a save button, the DIV container should be updated with the text from the selection list.

How should i approach this? Im not sure how to make the selection list pop up. If i make it pop up in a new tab, how can i save it on the previous site?

Thanks

Answer 1

Check this demo on jsFiddle.net.

HTML

<div id="baseDiv">Click Me</div>
<div id="popUpDiv">
  <select id="popupSelect">
      <option value="First">First</option>
      <option value="Second">Second</option>
      <option value="Third">Third</option>
  </select>
</div>​

JavaScript

 $("#baseDiv").click(function(e) {
    $("#popUpDiv").show();
 });
 $("#popupSelect").change(function(e) {
    $("#baseDiv").html($("#popupSelect").val() + ' clicked. Click again to change.');
    $("#popUpDiv").hide();
 });​

CSS

#popUpDiv{
   z-index: 100;
   position: absolute;
   background-color: rgba(123, 123,123, 0.8);
   display: none;
   top: 0;
   left: 0;
   width: 200px;
   height: 300px;
}
#popupSelect{
   z-index: 1000;
   position: absolute;
   top: 130px;
   left: 50px;
}​

Hope this works out for you.

Answer 2

If you are familiar with jQuery you can use a plugin, which is called Jeditable, it is powerful and you can make amazing things with it.

Here is some example code:

<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.</div>

There is only one mandatory parameter. URL where browser posts edited content.

$(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php');
 });

Code above does several things: Elements with class .edit become editable. Editing starts with single mouse click. Form input element is text. Width and height of input element matches the original element. If users clicks outside form changes are discarded. Same thing happens if users hits ESC. When user hits ENTER browser submits text to save.php at www.example.com.

When submitting change, following data will be POST:ed to server: id=elements_id&value=user_edited_content