Question

I have a case i hadn’t formerly, and really can’t figure it out, what is the problem. 🙁
I tried to make a controller class for my old, unsettled js code, tried to make it a bit more object oriented (aye, fail for me, but practicing also is the mother of knowledge).
So, here is my code:

A function calls Main function, which handle variables and pops a form, like:

function Main(com,  multiple, grid) {
    if (CheckTableFunctions(arguments) == true)
    {
        var partner = Partner.Factory(com);
        switch(com)
        {
            case "CreatePartners":
            ...
            break;

            case "GetPartners":
            $e = ShowModal(); // <- this makes a form visible
            Communicate(com, partner, function(data) <- ajax req. with callback
                {
                ... // <- manipulate data, fill form, etc.
                });
            Main("EditPartners", multiple, grid); // <- calling Main Editpartners case
            break;

In fact, the GetPartners case is before the EditPartners, but it is just for fill a form. The Edit, and the event binding goes to editpartners, as seems below:

            case "EditPartners":
            $e = GetModal(); // <- THE ERROR
            $e.find("a.submit").click(function(e){
                partner.fx_data.partner.data = getFormData($e)
                Communicate(com, partner, function(data) // <- return the modified values by ajax
                {
                    CloseModal();
                });
            });
        break;

So, when i run the fn GetModal it returns with an empty object, but the function works correctly GetModal = fn(){$e=$(".poppedModal");return $e;} after the Main(EditP) runned. I think it’s more logical or methodical error than anything else. And to tell the true, i called it with callback, which means i used ShowModal(callback) and when it was ready, i called Main(EditP), but did not work also.

Edit:

Sorry, i forgot the main problem (what i think is the main problem). So i don’t have the form exactly i just have a html prototype of it. Prototype, because i always clone it when it needy.

So here is the showmodal fn and i think this makes the modal unreachable:

function ShowModal()
{
    $container = $('#myModal');
    $clone = $container.clone();
    $clone.removeAttr("id").addClass("clonedModal");
    $clone.modal('show');
    return $clone;
}

function ShowModal()
{
    $container = $('#partnerModal');
    document.getElementById('partnerForm').reset();
    $container.modal('show');
    return $container;
}

Thanks for your help.

Répás

Answer 1

Several points:

1. Members within javascript functions are only localised if declared with var. Otherwise they are ‘outer’ members up to and including the global name space. Several of your vars need to be localised. Undeclared vars can result in nasty bugs.
2. .clone() will indeed create a clone of an DOM fragment but does not automatically inert it back into the DOM. You need to do that with jQuery instructions such as .append(), .prepend(), .before(), .after(). I strongly suspect that a large part of your problem is trying to do .modal() on an uninserted clone.
3. It’s not clear why the form needs to be cloned each time it is used. This sort of programming is likely to cause memory leaks. It would be cleaner and more normal to reuse a single form. It’s not hard to reset a form to clear out previously entered/selected values.

EDIT:

ShowModal with properly localised variable :

function ShowModal() {
    var $container = $('#partnerModal');
    document.getElementById('partnerForm').reset();
    $container.modal('show');
    return $container;
}

In fact, if .modal() is written to be chainable, as it should be, then ShowModal() can be simplified to avoid creating any named members, local or otherwise :

function ShowModal() {
    $('#partnerForm').get(0).reset();
    return $('#partnerModal').modal('show');
}

Also, please note that, by convention in javascript programming, only constructor functions should be named with an initial Capital. Constructor functions are those designed to be called with new Fn(). (It’s not important here but there has been much discussion on the subject of constructors and some choose to write their code to avoid the use of new).