1. Fabrik 3.9 has been released. If you have updated Joomla to 3.9, this is a required update.
    Dismiss Notice

Add Option In Front End - Custom URL for Add button

Discussion in 'Community' started by teoyh, Oct 9, 2019.

  1. teoyh

    teoyh Member

    Level: Community
    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
     
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    Hmmm.

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

    Code (Text):

    // 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
     
  3. teoyh

    teoyh Member

    Level: Community
    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: Oct 14, 2019
  4. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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 (Text):

    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 (Text):

    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
     
  5. teoyh

    teoyh Member

    Level: Community
    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
     

    Attached Files:

  6. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     
  7. teoyh

    teoyh Member

    Level: Community
    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
     
  8. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    var addLink = jQuery('.fb_el_sf_lna_employee_competency___course .toggle-addoption')[0];

    -- hugh
     
  9. teoyh

    teoyh Member

    Level: Community
    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;
     
  10. teoyh

    teoyh Member

    Level: Community
    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 ?
     
  11. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    As with any issue, you need to be able to replicate it. Have you been able to replicate it?
     
  12. teoyh

    teoyh Member

    Level: Community
    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
     

Share This Page