• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Bug (maybe): Element Javascript Disappearing on Save

aijosh

Member
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)
 
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
 
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?
 
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
 
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:

Code:
doMyLongCodeThing(this);

In form_32.js:

Code:
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
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top