Separate instances of mergely on different bootstrap tabs not displaying

[jesse...@gmail.com]

Let me start by saying I'm new to javascript. learning here :)

I'm breaking up an xml diff into nodes and comparing the nodes w/ mergely on different bootstrap tabs. So 5 different compares in one tab control. Problem I have is my default tab populates great. When I tab over it does not populate as I would expect. I tried creating an event on toggle and Updateing? I'm getting an error within mergely.js. I tried clearing the sides and re-diffing, It responds but now I have to click on the div for it to populate and the scroll doesn't seem to function right and the markup is incorrect.

Here's my script, my toggle function is just trying to get the first tab to work properly before I correctly. I'm using the diff file to set badge numbers at the top of the tab w/ difference counts. Thanks for your help.

var eleArray = []
eleArray[0] = { tab: "#home", div: "#HEADER", data: "headerData", num: 0 }
eleArray[1] = { tab: "#menu1", div: "#PWB", data: "pwbData", num: 0 }
eleArray[2] = { tab: "#menu2", div: "#PLACEMENT", data: "placementData", num: 0 }
eleArray[3] = { tab: "#menu3", div: "#COMPONENT", data: "componentData", num: 0 }
eleArray[4] = { tab: "#menu4", div: "#PICK", data: "pickData", num: 1 }
$(window).on('shown.bs.modal', function () {
$('#myModal').modal('show');
eleArray.forEach(function (row) {
$(row.div).mergely({
width: 'auto',
height: 575,
cmsettings: { mode: "text/xml", readOnly: true, lineWrapping: false, lineNumbers: true },
lhs: function (setvalue) {
setvalue($("#old_" + row.data).val());
},
rhs: function (setvalue) {
setvalue($("#new_" + row.data).val());
}
});
$('#dif_' + row.data).val($(row.div).mergely('diff'));
var bNum = $('#dif_' + row.data).val().split("---").length - 1
if (bNum > 0) { $('a[href="' + row.tab + '"]').find('.badge').text(bNum); };
});
});
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
console.log($(this).attr('href'));
if ($(this).attr('href') == "#menu1") {
$("#PWB").mergely('unmarkup');
$("#PWB").mergely('update');
console.log("itworked");
}
});

[Jamie Peabody]

I have seen CodeMirror not play well with bootstrap.  I think the problem might be that the bootstrap tabs are not initialized yet, or do not exist on screen.  This can cause problems for CodeMirror and Mergely as they rely on a properly visible and sized div.  You have the right idea - you need to kick it to refresh, however, the tabs look okay, but there is something odd when you call shown.bs.tab:

                $("#PWB").mergely('unmarkup');

                $("#PWB").mergely('update');

Not sure what your intention is there, but if you intend the instance of Mergely within the tab to update, then you need to reference the same div from the eleArray as you used to initialize the tab.  I'm guessing here - it's been about 6 years since I've done any jquery:

        $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (el) {

            if ($(this).attr('href') == "#menu1") {

                var id = $(el.target).attr('id'); // get the id from the tab, e.g. #HEADER

                $('#' + id).mergely('update');

                console.log("itworked");

            }

        });

Once you call the correct Mergely instance for the tab, if Mergely refresh does not work, you can try to get the underlying CodeMirror editor and manually call refresh on that:

http://www.mergely.com/doc#mergely-cm

http://codemirror.net/doc/manual.html#refresh

Alternatively, you can try to delay the binding of Mergely until after the tab is focused.  Similar approach to the shown.bs.tab, but you bind Mergely at that time.

--
You received this message because you are subscribed to the Google Groups "Mergely" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mergely+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.