Bug (maybe): Element Javascript Disappearing on Save

[aijosh]

I created a search form. (Form B)
-> create new form
-> form doesn't have list
-> copy elements from form I want to search (Form A) to search form (Form B)
-> unlinked elements on form B
-> Unpublish date_time
-> Id refused to unpublished so I left it

Search form works perfectly

Bug:
I added some javascript to one of the element.
But after save the javascript disappears.
This happens randomly but surely. say after every 3 saves. (Save and Close)

 

[cheesegrits]

Hmmm, hard to replicate, I can't get that to happen.

When it does happen, are you saving very quickly after opening it for edit?

-- hugh

 

[aijosh]

Nope. the javascript code is 65 lines long & I have to retype it every time, well the first few times before I noticed it was repeating so I saved a copy outside somewhere else.

I'm guessing some fabrik javascript from the frontend of the website is messing with the websites backend or vice versa cos the first time I noticed it, I was in the frontend and the elements meant to be hidden were still visible so I went to check the backend code. Not really sure if it was there or missing the first time or not.

I'm sure the elements in the frontend still remain visible sometimes when I refresh the page or submit another form. Maybe due to the javascript not running completely or loading too slow. I cant say.

------------
Also, that reminds me. pls why is the search form so slow in loading. it adds like 3-5sec to the page load time. I normally disable the module when it gets very frustrating, slowing down the time to load and refresh the page while testing changes in the frontend.
But I need this form on all pages of the website.
Its elements are all cascading dropdown, 7 of them and I see this annoying loading icon (which is useful in some cases, like when validating but not here).
Is there a solution to this?

 

[aijosh]

Hmmm, hard to replicate, I can't get that to happen.

you can try adding more than one.

I had two.

.1 onload
Fabrik.getBlock('form_31').formElements.get('___state').hide();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();

.2 onchange
var office = document.getElementById('___office').getValue();

if (office =='1')
{
Fabrik.getBlock('form_31').formElements.get('___state').hide();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();
}
else if (office=='2')
{
Fabrik.getBlock('form_31').formElements.get('___state').show();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();
}
else if (office=='3')
{
Fabrik.getBlock('form_31').formElements.get('___state').show();
Fabrik.getBlock('form_31').formElements.get('___district').show();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();
}
else if (office=='4')
{
Fabrik.getBlock('form_31').formElements.get('___state').show();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').show();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();
}
else if (office=='5')
{
Fabrik.getBlock('form_31').formElements.get('___state').show();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').show();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();
}
else if (office=='6')
{
Fabrik.getBlock('form_31').formElements.get('___state').show();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').show();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').hide();
}
else if (office=='7')
{
Fabrik.getBlock('form_31').formElements.get('___state').show();
Fabrik.getBlock('form_31').formElements.get('___district').hide();
Fabrik.getBlock('form_31').formElements.get('___lga').hide();
Fabrik.getBlock('form_31').formElements.get('___federal_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___state_constituency').hide();
Fabrik.getBlock('form_31').formElements.get('___lcda').show();
}


sometimes one disappears other times both.

I've tried to avoid editing and saving it again. Just said to report it

 

[cheesegrits]

I have test element with 30 or more JS events, as a stress test. Can't get them to disappear.

My advice would be don't put all that code inline. Use a custom JS file, ./component/com_fabrik/js/form_31.js, which will get automatically laoded with the form. Put your code in a function in that file, and call the function from the element JS event ...

In element JS:

doMyLongCodeThing(this);

In form_32.js:

function doMyLongCodeThing(el) {
   // assuming 'office' is the element the event is on
    var office = el.getValue();

   // if it isn't you would do ...
   // var office = el.form.formElements.get('___office').getValue();

    if (office =='1')
    {
        el.formElements.get('___state').hide();
        el.formElements.get('___district').hide();
        el.formElements.get('___lga').hide();
        el.formElements.get('___federal_constituency').hide();
        el.formElements.get('___state_constituency').hide();
        el.formElements.get('___lcda').hide();
    }
    else if (office=='2')
    {
        el.formElements.get('___state').show();
        el.formElements.get('___district').hide();
        el.formElements.get('___lga').hide();
        el.formElements.get('___federal_constituency').hide();
        el.formElements.get('___state_constituency').hide();
        el.formElements.get('___lcda').hide();
    }
    else if (office=='3')
    {
        el.formElements.get('___state').show();
        el.formElements.get('___district').show();
        el.formElements.get('___lga').hide();
        el.formElements.get('___federal_constituency').hide();
        el.formElements.get('___state_constituency').hide();
        el.formElements.get('___lcda').hide();
    }
    else if (office=='4')
    {
        el.formElements.get('___state').show();
        el.formElements.get('___district').hide();
        el.formElements.get('___lga').hide();
        el.formElements.get('___federal_constituency').show();
        el.formElements.get('___state_constituency').hide();
        el.formElements.get('___lcda').hide();
    }
    else if (office=='5')
    {
        el.formElements.get('___state').show();
        el.formElements.get('___district').hide();
        el.formElements.get('___lga').hide();
        el.formElements.get('___federal_constituency').hide();
        el.formElements.get('___state_constituency').show();
        el.formElements.get('___lcda').hide();
    }
    else if (office=='6')
    {
        el.formElements.get('___state').show();
        el.formElements.get('___district').hide();
        el.formElements.get('___lga').show();
        el.formElements.get('___federal_constituency').hide();
        el.formElements.get('___state_constituency').hide();
        el.formElements.get('___lcda').hide();
    }
    else if (office=='7')
    {
        el.formElements.get('___state').show();
        el.formElements.get('___district').hide();
        el.formElements.get('___lga').hide();
        el.formElements.get('___federal_constituency').hide();
        el.formElements.get('___state_constituency').hide();
        el.formElements.get('___lcda').show();
    }
}

Couple of things to note. You pass 'this' (no quotes) into the function, which is a reference to the Fabrik element object. Which has a reference to the form object. So within the function, where we accept the arg as 'el', you can just use el.form instead of Fabrik.getBlock('form_31'), which makes it more portable (if you need to reuse the same code from a copy of the form). Also, if 'office' in that example is the element the event is on, you can get the value direct from the element object with el.getValue(), which calls the Fabrik element method, rather than the DOM function, which is usually better, as Fabrik elements "know" how to get their values - using the DOM function on (say) a date element won't work, as the date isn't in a field of that name.

The other big win with putting stuff in functions is you can then use your browser's dev tools to put in breakpoints and step through the code, which makes dev and debugging a lot easier.

-- hugh