Need some help with JS.

I need your help regarding JS. On my website (https://quick*****ing.ie/courses/community/add), you will notice that there is a field called "Course Categories". I have used JS similarly to auto-populate the selection from the title drop down to this field but the only text gets written and no category is actually selected. I mean the title user select category will be selected based on that. https://monosnap.com/file/kd9XUopErGN3MNwTzkOvu40p0Yi7Xx

Please help with the JS need for that.

Another issue is One this page: https://quick*****ing.ie/courses/community/add
You will notice a dark grey button saying "New Ticket" under the "Tickets" heading. If you click on it, you will see two different fields.

I want to hide the New Ticket button and show the two fields by default. I tried using JS to click() function for that button but it works and show the field but field value doesn't get saved then. If you can help on this also that would be great.

  • Adam Czajczyk

    Hello Qureshi,

    I hope you're well today and thank you for your question!

    As for categories selection.

    I'm not sure about the JS code that you're using but it seems that the code is currently actually setting the "value" attribute of that input field. A look into a browser console shows that for a category to be actually selected a "data-value" attribute must be also set. For example, for "Safe Pass" category this is the value (note: it's an array!) of the "data-value" attribute:

    data-value="[{"term_id":7,"name":"Safe Pass","slug":"safe-pass","term_group":0,"term_taxonomy_id":7,"taxonomy":"tribe_events_cat","description":"","parent":0,"count":1,"filter":"raw","id":7,"text":"Safe Pass","children":[]}]"

    That can be set with JS but you need to take these values from "somewhere" (the term_id, slug, term_group, term_taxonomy_id) so they must be available already in some variable or some field on the page.

    Would you mind sharing your current JS code with me? The best way would be to put it e.g. as a snippet on https://pastebin.com service and sharing the link with me. Alternatively, since you shared FTP credentials, tell me please where I can find the code in your site's files.

    As for the "new ticket" field.

    Have you tried to just hide the button and show fields with just CSS instead, without using any JS on it?

    Best regards,
    Adam

    • Qureshi

      Thanks Adam,

      I am copying and pasting the info I submitted while on live chat with Abdul Waheed.

      =========================== START ===========================

      === REQUEST # 1 ===

      Please visit this website. You would need to sign in so please use the following credentials:

      Username: (I believe you have it)
      Password: (I believe you have it)

      Once logged in, you would see a form with a few fields.

      I have (with the help of Nithin from WPMU DEV) edited that form.

      Previously it was something like this form.

      (Please use the same info to login here).

      You will notice that I have deleted a few fields and tweaked some fields.

      I have used custom JS to add a drop down for the title field.

      Then used CSS to hide the text field for the title. (using visibility:hidden:wink:

      Then used JS to auto-populate the selection from the drop down to the hidden text field.

      On my website (https://quicktraining.ie/courses/community/add), you will notice that there is a field called "Course Categories". I have used JS similarly to auto-populate the selection from the title drop down to this field but only text gets written and no category is actually selected. I would want to auto populate and auto select the category based on the title.

      === REQUEST # 2 ===

      On the same form you will notice a dark grey button saying "New Ticket" under the "Tickets" heading.

      If you click on it, you will see two different fields. I want to hide the Add Ticket button and show the two fields by default.

      I tried using JS to "auto-click" that button but it the details doesn't get saved then.

      Sure, here is the FTP info:

      FTP Username: (I believe you have it)
      FTP server: (I believe you have it)
      FTP & explicit FTPS port: (I believe you have it)
      FTP Password: (I believe you have it)

      =========================== END ===========================

      Now your questions.

      These are the codes I am using: JavaScript | CSS

      Regarding your second question, when I try to hide the button via CSS (and not use JS), there is no option to see see the ticket fields which are necessary.

      If you need any further info, let me know. :slight_smile:

      Thanks,
      Qureshi

  • Adam Czajczyk

    Hi Qureshi,

    Thanks for your reply!

    Let me start with the button. I checked the site again and I think you're right - a pure CSS won't be an answer here. However, I came up with a bit different way of handling that than an "on click" event so give it a go please:

    <script type="text/javascript">
     (function($) {
    	     $('#ticket_form_toggle').css("display", "none");
             $('#tribe_panel_edit').attr("aria-hidden", "false");
    
     })(jQuery);
     </script>

    This hides the button and shows the fields, just like actually clicking the button.

    As for the "title <-> category" script. The script indeed only rewrites selected option from the title to the category input field as its value, which basically means putting only the text there.

    $('#s2id_autogen3').val($(this).val()).trigger('change');

    However, the selection is not made because, I think, that additional "data-value" is not set (the same that I mentioned in my previous response) anywhere and it seems that it must be set because other scripts depend on it. That "data-value" attribute is used by another input field that's hidden. Now, that could probably be set using similar method to this line form my "button" code above

    $('#tribe_panel_edit').attr("aria-hidden", "false");

    Here, we set "aria-hidden" attribute value so for your category field you would want to set it like that

    $('input.tribe-dropdown[data-source="search_terms"] ').attr("data-value", "VALUE");

    where "VALUE" must be set the way explained in my previous post. But I'm not sure where to get relevant data from, since the title (that's later rewritten to category) is "hard coded" in your JS code. I think you should find a way to somehow fetch this from the database along with relevant ID and slug. That's a bit too complex for this support, I'm afraid, as it goes too far into custom coding.

    However, if you were able to find the way to fetch those require values first (see my first post and take a look into the page source), I think a JS line similar to the one above - added to your existing code - should actually do the trick.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Qureshi,

    I checked the site and, indeed, it doesn't seem to save anything while it does do it with the "default" setup (the "auto-click" code disabled).

    I noticed, however, that with that code enabled an ajax call is returning this response:

    {"success":false,"data":"Commerce Provider invalid"}

    This suggests that some data is actually missing when the form is submitted. So, I'd say that we're on a right way but we're clearly missing some additional action that must be taken or data that must be set.

    I'll look into it again but I got a question first, as I don't know your setup that well as you do:

    that "new ticket" that's submitted - where am I supposed to see it/where should it be added in back-end?

    Let me know please!

    Best regards,
    Adam

    • Qureshi

      Hi Adam,

      Thanks for replying.

      The answer to your question is that, you would not only have to submit the ticket details but also all the course details and then click "Submit Course". Then you can see the course in the WP dashboard by looking for "Course" in the left admin menu. Then click on "Pending" and you will see the course you submitted. :slight_smile:

      Looking forward to a solution.

      Thanks,
      Qureshi

  • Adam Czajczyk

    Hi Qureshi

    Thanks for explanation. So, I just enabled the "auto click" code, then filled in all the fields and submitted the course using the button at the very bottom of the page. I got a success message so it looks like it have been submitted (unless I missed something) - but in that case, I'm not sure how the "ticket" part is relevant. I mean, where I should see that?

    Maybe in such case that button up there for the ticket is simply unnecessary then?

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.