paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Jquery, creating a JSON data during to type into a input element

This Jquery function allows to create a JSON data, and insert it in a hidden input element, with this structure

    {
    "es": "Hola mundo",
    "en": "Hello world",
    "it": "Ciao mondo"
    }
    
where the number of the elements is variable, depending on the languages that are configured into the database (it will show in a select html element).
The JSON data could be created during the user will type the data and/or clicking the save button.

The comments into the code will be enough to explain the funcion.
Note, that I'm using stringify native function, to convert to JSON element the use of : to get the child inputs of a div element _container, how explain in this Stackoverflow post
var transtextarea = new function() {
    this.loadTranslateTextarea = function(componentId){
        $('#' + componentId + '_locale').click(function(){
            $('#' + componentId + '_extra').show();
        });

        
        jsonObj = [];
        item = {}
        
        $("#" + componentId + "_container :input").each(function( index, element) {
            if($(element).attr('name').match(componentId + "_message_")){
                if($(element).val()){
                    var language = $(element).attr('name').split("_");
                    var languageFinal = language.pop();
                    item [languageFinal] = $(element).val();
                }
            }
            
            $('#' + componentId).val(JSON.stringify(item));
        });        

        // Save JSON data on blur for every fields
        // Note, the use of : to get the child inputs of a div element _container

        $("#" + componentId + "_container :input").each(function( index, element) {
            if($(element).attr('name').match(componentId + "_message_")){
                $(element).blur(function(){
                    if($(this).val()){
                        $("#" + componentId + "_container :input").each(function( index, element) {
                               if($(element).attr('name').match(componentId + "_message_")){
                                    if($(element).val()){
                                        var language = $(element).attr('name').split("_");
                                        var languageFinal = language.pop();
                                        item [languageFinal] = $(element).val();
                                    }
                                }

                                $('#' + componentId).val(JSON.stringify(item));
                        });                  
                    }           
                });
            }
        });
        
        // Save all JSON data when click on close button       
        $('#' + componentId + '_closeandsave').click(function(){
            jsonObj = [];
            item = {}

            $("#" + componentId + "_container :input").each(function( index, element) {
                if($(element).attr('name').match(componentId + "_message_")){
                    if($(element).val()){
                        var language = $(element).attr('name').split("_");
                        var languageFinal = language.pop();
                        item [languageFinal] = $(element).val();
                    }
                }
            });
            
            $('#' + componentId).val(JSON.stringify(item));
            $('#' + componentId + '_extra').hide();
        });
    };
}