Replace a title with an input and update the title on the database

Question

Hi I'm trying to replace a title when clicking on it by a text input in order to modify the title and then submit the modification to the database, I'm using this code :

<div style="font-size: 70%;"><h2 class="outer"><?php echo $designation; ?> </h2></div>

this div is loaded using another script and therefore is not on the original page, so I think we must use the delegate method.

Here is the jquery script I'm using to turn its background color to pink:

<script src="jquery-1.10.2.min.js">
  $(document).ready(function(){
     $("#right").delegate("h2","click",function(){
       $("h2").css("background-color","pink");
     });
  });
 </script>

Any idea how to replace the title in this div by a text input tag ? and any idea how to submit the modification to the database once I click outside the input field ? thank you

For the first part, you might want to look into this: http://stackoverflow.com/questions/5033732/jquery-click-cell-to-change-into-text-box for updating it in the database, you will have to add code to construct an AJAX request that will update the information in the database. — Maximus2012, Oct 09 '13 at 14:45
Your javascript must be in separate `` tags to your linked jquery. If you're wanting to trigger it with a click, you need to add the `onclick` event to your code. — Ben Fortune, Oct 09 '13 at 14:45
Can you please point me to a cibled tutorial, all the Jquery tutorial I have checked are too general — Tarik Mokafih, Oct 09 '13 at 14:57
All of the code in your script tag is ignored, since you specified a src. — JAL, Oct 09 '13 at 15:05
'How to submit the information to the database' is a pretty big question. If you don't know anything about databases i would suggest finding a tutorial about php/MySQL. — JAL, Oct 09 '13 at 15:06
I pretty good with php/mysql my problem is with Jquery, I asked the second question only to check if there is a faster way to do it using maybe a script. — Tarik Mokafih, Oct 09 '13 at 15:12

Ram · Answer 1 · 2013-10-09T15:01:21.183

1

There is no click handler in you code, you can use .on() method
You should use another script tag for loading .js files, your markup is invalid

input element doesn't have closing tag, you should remove the </input>

<script src="jquery-1.10.2.min.js"></script>

<script>
   $(document).ready(function(){ // When the DOM is ready
      $(".outer").on('click', function() {
         if ( this.children.length ) return;
         var text = $.trim(this.innerHTML);
         $("<input>").val(text)
                     .appendTo($(this).empty())
                     .focus();
      }).on('blur', 'input', function() {
         // Listening to blur event 
         // for replacing the element with it's value
         $(this).replaceWith( $.trim(this.value) );
      })
   })
</script>

http://jsfiddle.net/3FKzH/

edited Oct 09 '13 at 15:01

answered Oct 09 '13 at 14:48

Ram

143,282
16
168
197

Unfortunately it's not working for me, could it be the Jquery source, I don't know much about Jquery I downloaded the compressed Jquery file and stored it in my project folder under the name : "jquery-1.10.2.min.js" – Tarik Mokafih Oct 09 '13 at 15:10
Maybe the problem is here : if ( this.children.length ) return; Because I have the feeling it returns without doing anything. – Tarik Mokafih Oct 09 '13 at 15:30
@TarikMokafih Have you checked the browser's JavaScript console? It works for me, have you checked the demo in my answer? – Ram Oct 09 '13 at 15:30
I have this error message on the consol : GET http://localhost/test/jquery-1.10.2.min.map But in separate small page I created it works even with the error message – Tarik Mokafih Oct 09 '13 at 15:38
@TarikMokafih That's a HTTP error, so this means the library is loaded, `map` files are loaded for debugging purposes. http://stackoverflow.com/questions/18365315/jquerys-jquery-1-10-2-min-map-is-triggering-a-404-not-found – Ram Oct 09 '13 at 15:42
I pretty sure now that it's working when the content of the html tag is simple text, but when the content is a php script ( ) it's not working – Tarik Mokafih Oct 09 '13 at 15:51
@TarikMokafih Well, my answer assumed that `h2` elements only have text content not element. – Ram Oct 09 '13 at 15:52
thank you anyway it helped me being more familiar with Jquery – Tarik Mokafih Oct 09 '13 at 15:55

Replace a title with an input and update the title on the database

1 Answers1