• 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.

Add Option In Front End - Custom URL for Add button

teoyh

Member
I have a training form which define the competency and course
addbuttonFrontEnd.JPG
If the user cannot find the course they want i allow them to click on the add button to add the courses

course.JPG
They will need to type the course title and description and select the competency which is similar to the name of the competency from the parent form. But if they select wrongly then it will not be shown in the parent form Course Assignment dropdown.

Anybody know where to change the url for the add button ,
upload_2019-10-9_14-55-0.png
if i can pass the value of the competency inside the url then i may be able to prevent the user from selecting wrongly in the SF_Course form
 
Hmmm.

You'd have to use a JS event on the "assignment" element, running on 'change' (or 'click'), which does something like this:

Code:
// get the add link in the competency element
var addLink = jQuery('#tablename___competency .add-option')[0];
if (addLink) {
   // add or modify a &tablename___assignment_raw query string value
   if (addLink.href.match(/tablename___assignment_raw/) {
      // we've already added one, so change it
      addLink.href.replace(/tablename___assignment_raw=\d+/, "tablename___assignment_raw=" + this.getValue();
   }
   else {
      // add new query string value
      addLink.href += "&tablename___assignment_raw=" + this.getValue();
   }
}

Change the "tablename___whatever" element names as required. Leave the _raw postfix.

-- hugh
 
Hi, thank you for replying ;

I tried getting the add link from sf_lna_employee_competency___course element,

var addlink = jQuery('#sf_lna_employee_competency___course .add-option')[0];
alert(addlink);
but it return undefined

Both the sf_lna_employee_competency___course and sf_lna_employee_competency___emp_competency are databasejoin element and the value is id[Recommended]

If i understand you correctly, you are doing an update to the href using a JS event, adding the competency value to the existing href.

What is the javascript to update the href for the sf_lna_employee_competency___course element add option
 
Last edited:
What is the javascript to update the href for the sf_lna_employee_competency___course element add option

That's the code I gave you, for the "Course Competency" join in the first image.

Best way to debug it is to put the code in a function ...

Code:
function addCompetency(el) {
   // get the add link in the competency element
   var addLink = jQuery('#tablename___competency .add-option')[0];
   if (addLink) {
      // add or modify a &tablename___assignment_raw query string value
      if (addLink.href.match(/tablename___assignment_raw/) {
         // we've already added one, so change it
         addLink.href.replace(/tablename___assignment_raw=\d+/, "tablename___assignment_raw=" + el.getValue();
      }
      else {
         // add new query string value
         addLink.href += "&tablename___assignment_raw=" + el.getValue();
      }
   }
}

... and put it in the (new) file ./components/com_fabrik/js/form_X.js (where X is your numeric form ID).

Then call that fro the JS event on the element ...

Code:
addCompetency(this);

THen you can use your browser developer tools to add a breakpoint in the first line of the function, and figure out what exact selector you need (or you can point me at the page and I can do it).

-- hugh
 
Thank you for your reply ;

The main form Competency is preloaded and it has a raw value of 21

I make a onload event to call the addCompetency(el) where el has a value of 21

I did test with the code below but it did not even reach the match section, i added a alert(addLink) the result was undefined

function addCompetency(el) {
// get the add link in the competency element
var addLink = jQuery('#sf_lna_employee_competency___emp_competency .add-option')[0];
alert(addLink);
if (addLink) {
// add or modify a &tablename___assignment_raw query string value
if (addLink.href.match(/sf_lna_employee_competency___course_raw/)) {
// we've already added one, so change it
addLink.href.replace(/sf_lna_employee_competency___course=\d+/, "sf_courses___compid_raw=" + el);
alert(addLink.href);
}
else {
alert('outside');
// add new query string value
addLink.href += "&sf_courses___compid_raw=" + el;
alert(addLink.href);
}
}
}

As i already know the value of the raw competency i want to pass to the popup add course form competency, I just need to do a check for the href if it contain sf_courses___compid_raw ,
if yes then i do a replace with the new raw value , if no then add sf_courses___compid_raw=+el to href

But i am stuck at the part which i do not know how to update the href of the add button in sf_lna_employee_competency___course


I re-illustrate what i want to achieve below, hope it will help

upload_2019-10-15_9-19-22.png

Sorry for the trouble , hope you can help , many thanks
 

Attachments

  • upload_2019-10-15_9-21-3.png
    upload_2019-10-15_9-21-3.png
    14.9 KB · Views: 91
The only way I can help at this point is if you point me at the page. I can't teach you Fabrik and Javascript through a forum exchange.

-- hugh
 
I wish to but its an intranet not reachable , i just need to know how to get the add button href and how to update it the rest i can manage myself , please help
 
Thank you for your reply , i managed to find this , i use the find by class name and assign it to x with that i simply update the href with my new value each time the form is loaded.
var x = document.getElementsByClassName("toggle-addoption btn");
newhrl = "index.php?option=com_fabrik&view=form&tmpl=component&ajax=1&formid=510&sf_courses___compid_raw="+el+"&sf_courses___linkedIn="+linkin+"&noredirect=1";
x[0].href= newhrl;
 
Hi i can i check why some of my user in my company when they use Chrome ,they cannot add the course from front end ? Seem like some Ajax issue ?
 
Thank you for your reply. I had tested in different laptop and all return different result ;
- Case 1 After adding record never show in drropdown at all
- Case 2 After adding record is in dropdown but not selected
- Case 3 After adding record is added to dropdown and selected

I use the developer tools but did not see any error , hope you can advise how to overcome or check the error

Thank you
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top