Jeditable plugin extension using Wymeditor and JqueryUI.datepicker as an example

Faced the task when it was necessary to make the site the ability to edit content in the public part by clicking on the block. And I decided that this is a good reason to learn jQuery. Download jquery, jQuery UI (datepicker plugin), wymeditor and Jeditable plugin.

With jeditable integration, everything was simple. The plugin is very pleased, it turned out to be much more convenient Editable plugin. But with the integration with jQueryUI.datepicker and wymeditor, I had to tinker a bit.
The problem I encountered was that very little was written about the extension of the jeditable plugin, or rather only the page with examples, I hadn’t had anything to do with jQuery and therefore I had to suffer. Results with an explanation below, maybe someone will help.
ps it turned out that the documentation is there but I was looking for it badly.


Let's start with datepicker'a.
')
Here is the result:

1. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
2. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
3. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
4. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
5. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
6. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
7. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
8. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
9. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
10. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
11. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
12. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
13. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
14. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
15. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;
16. $. editable . addInputType ( 'datepicker' , {
element : function ( settings , original ) {
var input = $ ( '<input />' ) . datepicker ( settings. datepicker ) ;
$ ( this ) . append ( input ) ;
return ( input ) ;
} , plugin : function ( settings , original ) {
/* Workaround for missing parentNode in IE */
var form = this ;
$ ( 'input' , this )
. trigger ( 'change' )
. bind ( 'change' , function ( ) {
$ ( form ) . submit ( ) ;
} )
. click ( ) ;
}
} ) ;

First, we add a new Input type to the Jeditable object. There are two parameters (maybe there are more, but I did not encounter, if someone enlightens be glad) element and plugin. Element creates an element that will replace the editable text, in our case it is input. The code in the plugin is executed immediately after creating a new element. Since the datepicker plugin appears on the click, the click event had to be triggered by itself. first calling the change event for the jeditable plugin. As a result, our text was replaced first with input, and then a pop-up window for selecting the date appeared. But we needed to catch something like an edit completion event. Since there was no Internet at hand, I had to understand the minified version of jQueryUI. But in the end I realized that I had to hang up a change event.

Now go to Wymeditor

First the result:

1. $. editable . addInputType ( 'wymeditor' , {
   
2. element : function ( settings , original ) {
   
3. var text = $ ( '<textarea />' ) ;
   
4. var btn = $ ( '<input type = "submit" id = "upd" class = "wymupdate" value = "OK" />' ) ;
   
5. if ( settings. rows ) {
   
6. text. attr ( 'rows' , settings. rows ) ;
   
7. } else {
   
8. text. height ( settings. height ) ;
   
9. }
   
10. if ( settings. cols ) {
    
11. text. attr ( 'cols' , settings. cols ) ;
    
12. } else {
    
13. text. width ( settings. width ) ;
    
14. }
    
15. $ ( this ) . append ( text ) ;
    
16. $ ( this ) . append ( btn ) ;
    
17. return ( text ) ;
    
18. } , plugin : function ( settings , original ) {
    
19. 
    
20. var form = this ;
    
21. $ ( 'textarea' , this ) . wymeditor ( settings. wymeditor ) ;
    
22. 
    
23. }
    
24. } ) ;

The problem here was that in the Wymeditor'e there is no submit button and I had to add my own. I did not fully understand how it works, during the experiments I picked up the option when I created the textarea and the button separately.

It connects then it's all just

1. $ ( 'div.textarea' ) . editable ( 'http: //pim/save_elem.php' , { type : 'wymeditor' } ) ;
   
2. 
   
3. $ ( 'div.date' ) . editable ( 'http: //pim/save_elem.php' ,
   
4. {
   
5. type : 'datepicker' ,
   
6. datepicker : { dateFormat : 'yy-mm-dd' , changeYear : true }
   
7. } ) ;

where 'http://pim/save_elem.php' is the address of the handler.

PS for some reason I did not notice on the author's site. So everything described above is essentially an extra martyr for the tutorial was here

PPS uploaded a page with tests tkf.110mb.com with jWYSIWYG turned out as it was calculated.