Ajax Change Div Content

Posted 8 months ago by Conixs

I have an ajax function that will be responsible to change the content of the divs <div class="col-sm-3 mail_list_column" id="mail_list"></div> and <div class="col-sm-9 mail_view tab-content" id="mail_view"></div>. However, the html is rendering wrong.

success: function(groupsdWidgets){
                    $('#mail_list').empty();
                    $('#mail_view').empty();
                    $.each(groupsdWidgets, function(key, groupWidgets) {
                        $('#mail_list').append('<a ' + key === 0 ? "class=active" : "" + ' href="#' + key + '" data-toggle="tab">');
                        $('#mail_view').append('<div class="inbox-body tab-pane ' + key === 0 ? "active" : "" + '" id="' + key + '">');
                        $.each(groupWidgets, function(key, widget) {
                            if(widget.type == "header") {
                                $('#mail_list').append('<div class="mail_list">' +
                                        '<div class="left">' +
                                            '<i class="fa fa-circle"></i>' +
                                        '</div>' +
                                        '<div class="right">' +
                                            '<h3>'+widget.description+'</h3>' +
                                        '</div>' +
                                    '</div>');
                                $('#mail_list').append('</a>');
                            } else {
                                $('#mail_view').append('<div class="mail_heading row">' +
                                        '<div class="col-md-12">' +
                                            '<h4>'+widget.description+'</h4>' +
                                        '</div>' +
                                        '<div class="col-md-8">' +
                                            '<div class="btn-group">' +
                                                '<input type="radio" class="answer answer-yes" id="answer-yes-'+widget.id+'" name="answer['+widget.id+']"><label class="btn btn-sm btn-default" for="answer-yes-'+widget.id+'"><i class="fa fa-thumbs-o-up"></i> Yes</label>' +
                                                '<input type="radio" class="answer answer-no" id="answer-no-'+widget.id+'" name="answer['+widget.id+']" checked><label class="btn btn-sm btn-default" for="answer-no-'+widget.id+'"><i class="fa fa-thumbs-o-down"></i> No</label>' +
                                                '<input type="file" style="display:none;" id="fileLoader" name="files"/>' +
                                                '<button class="btn btn-sm btn-default" type="button" onclick="browserFiles();" style="margin-left: 10px"><i class="fa fa-upload"></i> Attachment</button>' +
                                                + (widget.hint) ? '<button class="btn btn-sm btn-default btn-hint" data-description="'+widget.description+'" data-observation="'+widget.hint+'" data-pictures="'+widget.pictures+'" data-toggle="modal" data-target=".bs-example-modal-lg" type="button"><i class="fa fa-info"></i> Observation</button>' : '' +
                                            '</div>' +
                                        '</div>' +
                                    '</div>' +
                                    '<div class="view-mail" style="margin-top: 10px">' +
                                        '<textarea class="form-control" rows="3" id="observation" name="observation[]" placeholder="Observation"></textarea>' +
                                    '</div>' +
                                    '<div class="attachment">' +
                                        '<ul id="image_preview">' + '</ul>' +
                                    ' </div>');
                                $('#mail_list').append('</div>');
                            }
                        });
                    });

Any hint?

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.