0

I've this HTML code:

<fieldset class="rpni-border">
    <legend class="rpni-border">Model</legend>
    <table id="contenedorModelos" style="" class="table table-condensed">
        <tbody id="modeloBody">
            <tr>
                <td>
                    <input type="radio" value="1" id="selModelo1" name="selModelos">
                </td>
                <td>Harum.</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" value="4" id="selModelo4" name="selModelos">
                </td>
                <td>Pariatur ut.</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" value="6" id="selModelo6" name="selModelos">
                </td>
                <td>Tempore animi.</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" value="8" id="selModelo8" name="selModelos">
                </td>
                <td>Voluptatem.</td>
            </tr>
        </tbody>
    </table>
</fieldset>
<fieldset class="rpni-border">
    <legend class="rpni-border">Branch</legend>
    <table id="contenedorMarcas" style="" class="table table-condensed">
        <tbody id="marcaBody">
            <tr>
                <td>
                    <input type="radio" value="3" id="selMarca3" name="selMarcas">
                </td>
                <td>Ea in sequi.</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" value="7" id="selMarca7" name="selMarcas">
                </td>
                <td>Exercitationem.</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" value="11" id="selMarca11" name="selMarcas">
                </td>
                <td>Sit alias sit.</td>
            </tr>
        </tbody>
    </table>
</fieldset>
<fieldset class="rpni-border">
    <legend class="rpni-border">Manufacturer</legend>
    <table id="contenedorFabricante" style="" class="table table-condensed">
        <tbody id="fabricanteBody">
            <tr>
                <td>
                    <input type="checkbox" value="3">
                </td>
                <td>Ea in sequi.</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" value="7">
                </td>
                <td>Exercitationem.</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" value="11">
                </td>
                <td>Sit alias sit.</td>
            </tr>
        </tbody>
    </table>
</fieldset>
<button id="create" type="button">Create</button>
<div id="ModelBranch"></div>
<button id="createM" type="button">Join Model-Branch with Manufacturer</button>
<div id="ModelBranchManufacturer"></div>

And then there is this jQuery:

$(document).ready(function () {
    function modelBranchManufacturerObject(config) {
        var instance = this;

        // initialize class vars
        instance.modelKey = config.modelKey;
        instance.branchKey = config.branchKey;
        instance.manufacturerKeyCollection = [];

        instance.globalKey;

        // globalKey = modelKey + branchKey
        instance.getGlobalKey = function () {
            if (!instance.globalKey) {
                instance.globalKey = instance.modelKey + '-' + instance.branchKey;
            }

            return instance.globalKey;
        }

        instance.addManufacturerKeyCollection = function (manufacturerArray) {
            instance.manufacturerKeyCollection = manufacturerArray;
        }
    }

    var modelBranchManufacturerCollection = {};

    function addNewRelationModelBranch(modelKey, branchKey) {
        var tempModelBranchManufacturerObjectInstance = new modelBranchManufacturerObject({
            modelKey: modelKey,
            branchKey: branchKey
        });

        var globalKey = tempModelBranchManufacturerObjectInstance.getGlobalKey();

        if (!modelBranchManufacturerCollection[globalKey]) {
            modelBranchManufacturerCollection[globalKey] = tempModelBranchManufacturerObjectInstance;
        } else {
            return false;
        }

        return tempModelBranchManufacturerObjectInstance;
    }

    function addNewRelationModelBranchManufacturer(globalKey, manufacturerArray) {
        if (modelBranchManufacturerCollection[globalKey]) {
            modelBranchManufacturerCollection[globalKey].manufacturerKeyCollection = manufacturerArray;
        } else {
            return false;
        }

        return modelBranchManufacturerCollection;
    }

    var html = '<table><tbody id="branchModel"></tbody></table>';
    $("#ModelBranch").html(html);

    $("#create").on("click", function () {
        var currModel = $("#modeloBody").find("input[type='radio']:checked").val(),
            currBranch = $("#marcaBody").find("input[type='radio']:checked").val(),
            ModelBranchObject, tr;

        if (currModel && currBranch) {
            ModelBranchObject = addNewRelationModelBranch(currModel, currBranch);

            if (ModelBranchObject) {
                tr = '<tr><td><input type="checkbox" value="' + ModelBranchObject.globalKey + '" /></td>';
                tr += '<td>' + ModelBranchObject.modelKey + '-' + ModelBranchObject.branchKey + '</td></tr>';

                $("#branchModel").append(tr);
            }
        }
    });

    var htmlManufacturer = '<table><tbody id="branchModelManufacturer"></tbody></table>';
    $("#ModelBranchManufacturer").html(htmlManufacturer);

    $("#createM").on("click", function () {
        var checkedModelBranch = $("#branchModelManufacturer").find("input[type='checkbox']:checked"),
            checkedManufacturers = $("#fabricanteBody").find("input[type='checkbox']:checked"),
            manufacturerColl = [],
            trManufacturer,
            ModelBranchManufacturerObject;


        for (var j = 0; j < checkedManufacturers.length; j++) {
            manufacturerColl.push(checkedManufacturers[j].value);
        }

        console.log(manufacturerColl);

        for (var i = 0; i < checkedModelBranch.length; i++) {
            ModelBranchManufacturerObject = addNewRelationModelBranchManufacturer(checkedModelBranch[i].value, manufacturerColl);
            console.log(ModelBranchManufacturerObject);
            if (ModelBranchManufacturerObject) {
                trManufacturer = '<tr><td><input type="checkbox" value="' + ModelBranchManufacturerObject.globalKey + '" /></td>';
                trManufacturer += '<td>' + ModelBranchObject.modelKey + '-' + ModelBranchObject.branchKey;

                for (var k = 0; k < ModelBranchObject.manufacturerKeyCollection.length; k++) {
                    trManufacturer += ModelBranchObject.manufacturerKeyCollection[k] + '<br/>';
                }

                trManufacturer += '</td></tr>';

                $("#branchModelManufacturer").append(trManufacturer);
            }

            console.log(trManufacturer);
        }

    });
});

What this code does is allow to pick a model and a branch and create a non repeated pairs between them and also show the results on #modelBranch div. Also allow, I think if I'm not doing something wrong, to pick one|many choices from the results in the previous step (those on #modelBranch) and one|many Manufacturers and again create a non repeated pairs between them but in this case I can not show the results on #ModelBranchManufacturer as I should do so something is not working on my code and I was not able to find where I'm failing so certainly I need some help or advice from you. For clear a bit how the process is take a look at the following example:

  1. Pick Model1/Branch1 and click on "Create Model/Branck Pair", this will generate a pair Model1-Branch1 as image below shows.
  2. Pick Model1/Branch2 and click on "Create Model/Branck Pair", this will generate a pair Model1-Branch2 as image below shows.
  3. Pick Model1/Branch1 and click on "Create Model/Branck Pair", nothing will happen since this pair was added on the (1) step and this is the right behavior to follow meaning do not allow repeated pairs

Now taking the example above you should have a table like this:

checkbox    Model1-Branch1
checkbox    Model1-Branch2

Following with the logic now:

  1. Pick Model1/Branch1 and Model1/Branch2 pairs and from the Manufacturers table pick Manufacturer1 and click on "Create Model/Branck-Manufacturer Pair", this should generate something like this below:

    Mark to Delete |  Model/Branch    |   Manufacturer
    ----------------------------------------------------
    checkbox       |  Model1-Branch1  |   Manufacturer1
    checkbox       |  Model1-Branch2  |   Manufacturer1
    
  2. Pick Model1/Branch1 and Model1/Branch2 pairs and from the Manufacturers table pick Manufacturer1 and Manufacturer2 and Manufacturer3 and click on "Create Model/Branck-Manufacturer Pair", this should generate something like this below:

    Mark to Delete |  Model/Branch    |   Manufacturer
    ----------------------------------------------------
    checkbox       |  Model1-Branch1  |   Manufacturer1
                   |                  |   Manufacturer2
                   |                  |   Manufacturer3
    ----------------------------------------------------
    checkbox       |  Model1-Branch2  |   Manufacturer1
                   |                  |   Manufacturer2
                   |                  |   Manufacturer3
    
  3. Pick Model1/Branch1 and Model1/Branch2 pairs and from the Manufacturers table pick Manufacturer1 and click on "Create Model/Branck-Manufacturer Pair", nothing should happen since this pair was added on the (1) step and this is the right behavior to follow meaning do not allow repeated pairs

So, why the results from #createM on click event are not show in #ModelBranchManufacturer? Where I'm making something wrong in my code? I made this Fiddle for testing purpose

enter image description here

1 Answer 1

0

Ok, after some hours of coffee and a lot of headaches I got the solution and it's working. Maybe this code is a bit different from the main on the post since I made some changes but the idea still:

function modelBranchManufacturerObject(config) {
        var instance = this;

        // initialize class vars
        instance.modelKey = config.modelKey;
        instance.branchKey = config.branchKey;
        instance.manufacturerCollection = [];
        instance.modelName = config.modelName || 'Sin nombre asignado';
        instance.branchName = config.branchName || 'Sin nombre asignado';

        instance.globalKey;

        // globalKey = modelKey + branchKey
        instance.getGlobalKey = function () {
            if (!instance.globalKey) {
                instance.globalKey = instance.modelKey + '-' + instance.branchKey;
            }

            return instance.globalKey;
        }
    }

    var modelBranchManufacturerCollection = {};

    function addNewRelationModelBranch(modelKey, branchKey, modelName, branchName) {
        var tempModelBranchManufacturerObjectInstance = new modelBranchManufacturerObject({
            modelKey: modelKey,
            branchKey: branchKey,
            modelName: modelName,
            branchName: branchName
        });

        var globalKey = tempModelBranchManufacturerObjectInstance.getGlobalKey();

        if (!modelBranchManufacturerCollection[globalKey]) {
            modelBranchManufacturerCollection[globalKey] = tempModelBranchManufacturerObjectInstance;
        } else {
            return false;
        }

        return tempModelBranchManufacturerObjectInstance;
    }

    function addNewRelationModelBranchManufacturer(globalKey, manufacturerArray) {
        var manufacturerCollection = modelBranchManufacturerObject.manufacturerCollection;

        if (modelBranchManufacturerCollection[globalKey]) {
            if (manufacturerCollection !== manufacturerArray) {
                modelBranchManufacturerCollection[globalKey].manufacturerKeyCollection = manufacturerArray;
                return modelBranchManufacturerCollection[globalKey];
            }
        } else {
            return false;
        }
    }

    $("#btnCrearParMarcaModelo").on("click", function () {
        var currModel = $("#modeloBody").find("input[type='radio']:checked").val(),
                currBranch = $("#marcaBody").find("input[type='radio']:checked").val(),
                currModelName = $("#modeloBody").find("input[type='radio']:checked").parent().next('td').text(),
                currBranchName = $("#marcaBody").find("input[type='radio']:checked").parent().next('td').text(),
                ModelBranchObject, tr;

        if (currModel && currBranch) {
            ModelBranchObject = addNewRelationModelBranch(currModel, currBranch, currModelName, currBranchName);
            if (ModelBranchObject) {
                tr = '<tr><td><input type="checkbox" value="' + ModelBranchObject.globalKey + '" /></td>';
                tr += '<td>' + ModelBranchObject.modelName + '-' + ModelBranchObject.branchName + '</td><td id="' + ModelBranchObject.globalKey + '"></td></tr>';
                $("#parMarcaModeloFabricanteBody").append(tr);
            }
        }

        $("#parMarcaModeloFabricante").show();
    });

    $("#btnAgregarSelFabricante").on("click", function () {
        console.log("d");
        var checkedModelBranch = $("#parMarcaModeloFabricanteBody").find("input[type='checkbox']:checked"),
                checkedManufacturers = $("#selFabricanteBody").find("input[type='checkbox']:checked"),
                manufacturerColl = [],
                modelBranchManufacturerCollection;

        var j = checkedManufacturers.length, item;
        while (j--) {
            item = checkedManufacturers[j];
            if (item.type && item.type == 'checkbox' && item.checked) {
                manufacturerColl.push({
                    id: item.value,
                    name: item.parentNode.nextSibling.innerHTML
                });
            }
        }

        for (var i = 0; i < checkedModelBranch.length; i++) {
            modelBranchManufacturerCollection = addNewRelationModelBranchManufacturer(checkedModelBranch[i].value, manufacturerColl);
            if (modelBranchManufacturerCollection) {
                //$("#parMarcaModeloFabricanteBody td#" + checkedModelBranch[i].value).siblings().attr("rowspan", modelBranchManufacturerCollection.manufacturerKeyCollection.length);

                for (var k = 0; k < modelBranchManufacturerCollection.manufacturerKeyCollection.length; k++) {
                    $("#parMarcaModeloFabricanteBody td#" + checkedModelBranch[i].value).append((modelBranchManufacturerCollection.manufacturerKeyCollection)[k].name + '<br/>');
                }
            }
        }
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.