Support

Home Forums Event Espresso Premium Add jquery to inline php script to hide questions for certain tickets

Add jquery to inline php script to hide questions for certain tickets

Posted: May 11, 2018 at 1:38 pm


radiusinvestigations

May 11, 2018 at 1:38 pm

So I am taking code from this topic on showing specific questions for certain ticket types. I took jxh’s code and placed it within the wp_add_inline_script sample that Tony posted. When I try to add it to the functions.php file for my child theme, I get the following error: syntax error, unexpected ‘}’, expecting ‘,’ or ‘)’

I’m still new to JQuery and PHP, so I am not sure where I’m going wrong on this:

function ee_custom_hide_question() {
    wp_add_inline_script( 
        'single_page_checkout',
        'jQuery( document ).ready( function( event ){
	function hideQuestion(item, index) {
		jQuery( '.spco-attendee-panel-dv.spco-attendee-ticket-' + item ).
		find( '#ee-reg-form-qstn-grp-veterans-pricing' ).hide();
	};
	['4', '5', '6', '9'].forEach(hideQuestion);
		});'
    );
}
add_action( 'wp_enqueue_scripts', 'ee_custom_hide_question', 11 );


radiusinvestigations

May 11, 2018 at 1:40 pm

I can’t seem to edit my post: I forgot to add that it the error stated it was on line 11, which is the line with the “};” symbols


Josh

  • Support Staff

May 11, 2018 at 1:57 pm

Hi there,

The first thing that stood out that needed fixing in the code was the single quotes were not escaped. In this case it’d be simpler to replace the single quotes within double quotes within the JavaScript part of the code, like this:

function ee_custom_hide_question() {
    wp_add_inline_script( 
        'single_page_checkout',
        'jQuery( document ).ready( function( event ){
    function hideQuestion(item, index) {
        jQuery( ".spco-attendee-panel-dv.spco-attendee-ticket-" + item ).
        find( "#ee-reg-form-qstn-grp-veterans-pricing" ).hide();
    };
    ["4", "5", "6", "9"].forEach(hideQuestion);
        });'
    );
}
add_action( 'wp_enqueue_scripts', 'ee_custom_hide_question', 11 );


radiusinvestigations

May 11, 2018 at 3:00 pm

Thanks! That helped to get the code saved, unfortunately it doesn’t seem to be hiding the particular ticket IDs as I hoped. Not sure what else I can do at this point.


Josh

  • Support Staff

May 11, 2018 at 8:22 pm

Here are a few troubleshooting steps:

1) Check the page source and verify the custom JavaScript code is present on the page.
2) Verify that the selector is correct, in this case the selector in the code is #ee-reg-form-qstn-grp-veterans-pricing
3) Verify the ticket IDs are 4, 5, 6, 9
4) Check the JavaScript error console on the web page using dev tools. An error on the web page can prevent later scripts on the same page from executing.


radiusinvestigations

May 14, 2018 at 8:05 am

Ok, so it appears that the #ee-reg changes with each checkout transaction but adding an id number at the end. If I change the find( line to the exact id number in that particular transaction, it does work, so the ticket ID is correct. I tried changing the find( to the following:

find( "[id^=["ee-reg-form-qstn-grp-veterans-pricing-"]" ).hide();

and while it saved, it did not hide the question and gave the following question in console: Uncaught SyntaxError: missing ) after argument list

When I click the reference link in console, the console box just shows a red X and a blank page within.

I also have this error show up, regardless if I have the code in my functions file: `Uncaught DOMException: Failed to read the ‘cssRules’ property from ‘CSSStyleSheet’: Cannot access rules
at et_core_page_resource_fallback (https://site2649728.nestifysites.com/registration-checkout/?uts=1526305315:12:165)
at HTMLLinkElement.onload (https://site2649728.nestifysites.com/registration-checkout/?uts=1526305315#checkout:199:295)`

I use Divi, so since it see an et_ shortcode, not sure if it’s related.


Josh

  • Support Staff

May 14, 2018 at 8:46 am

find( "[id^=["ee-reg-form-qstn-grp-veterans-pricing-"]" ).hide(); is invalid syntax which can be corrected by changing to:

find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).hide();


radiusinvestigations

May 14, 2018 at 9:09 am

That worked! Thank you! I am very new to JQuery so it’s been a lot of trial and error. One last thing, is there a way to make that hidden question no longer a required question if it is hidden? Otherwise I universally have to make the question optional, which isn’t a dealbreaker, but not preferred.


radiusinvestigations

May 14, 2018 at 9:19 am

The closest I found is to use .attr(“required”, false); but it didn’t work, whether I did it like this:

find( "[id^=["ee-reg-form-qstn-grp-veterans-pricing-"]" ).hide().attr("required", false);

or:

‘find( “[id^=\’ee-reg-form-qstn-grp-veterans-pricing-\’]” ).hide();
find( “[id^=\’ee-reg-form-qstn-grp-veterans-pricing-\’]” ).attr(“required”, false);`


Josh

  • Support Staff

May 14, 2018 at 3:04 pm

It may work to follow this outline for those required questions, where you:
1) From the admin, don’t set them to be required
2) Then set the questions to be required using jQuery.
3) at which point this,
find( "[id^=["ee-reg-form-qstn-grp-veterans-pricing-"]" ).hide().attr("required", false);
will hide and un-require the questions in one go.


radiusinvestigations

May 15, 2018 at 11:12 am

So from my understanding, the question is set to not required by default and admin. If that is the case, would I only need to use jquery to make the question set to required on certain ticket types? Here’s what I have atm:

‘function ee_custom_hide_question() {
wp_add_inline_script(
‘single_page_checkout’,
‘jQuery( document ).ready( function( event ){
function hideQuestion(item, index) {
jQuery( “.spco-attendee-panel-dv.spco-attendee-ticket-” + item ).
find( “[id^=\’ee-reg-form-qstn-grp-veterans-pricing-\’]” ).hide();
};
[“4”, “5”, “6”, “9”].forEach(hideQuestion);
});’,
‘function requireQuestion(item, index) {
jQuery( “.spco-attendee-panel-dv.spco-attendee-ticket-” + item ).
find( “[id^=\’ee-reg-form-qstn-grp-veterans-pricing-\’]” ).RemoveAttr(“required”, false).attr(“required”, true);
};
[“14”, “13”, “12”, “11”].forEach(requireQuestion);’
);
}
add_action( ‘wp_enqueue_scripts’, ‘ee_custom_hide_question’, 11 );’

Saved, but the question doesn’t appear as required for the tickets types that show the question. Tried removing the .Removeattr() part and just having the .attr and it still wouldn’t work.


radiusinvestigations

May 15, 2018 at 11:23 am

Just realized I think my ‘ and brackets were a bit off:

function ee_custom_hide_question() {
    wp_add_inline_script( 
        'single_page_checkout',
        'jQuery( document ).ready( function( event ){
    function hideQuestion(item, index) {
        jQuery( ".spco-attendee-panel-dv.spco-attendee-ticket-" + item ).
        find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).hide();
    };
    ["4", "5", "6", "9"].forEach(hideQuestion);,
	
    function requireQuestion(item, index) {
        jQuery( ".spco-attendee-panel-dv.spco-attendee-ticket-" + item ).
        find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).RemoveAttr("required", false).attr("required", true);
    };
    ["14", "13", "12", "11"].forEach(requireQuestion);
	});'
    );
}
add_action( 'wp_enqueue_scripts', 'ee_custom_hide_question', 11 );

Still didn’t work, but it saved and makes a bit more sense syntax-wise.


Josh

  • Support Staff

May 15, 2018 at 1:43 pm

OK that’s a different approach that could work but there are a few items that need fixing:

["4", "5", "6", "9"].forEach(hideQuestion);,
you’ll need to remove the comma at the end of the line.

find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).RemoveAttr("required", false).attr("required", true);

can be changed to:

find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).prop('required',true);


radiusinvestigations

May 16, 2018 at 8:01 am

Made the changes, got the following error on the line find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).prop('required',true); :

syntax error, unexpected 'required' (T_STRING), expecting ',' or ')'


Josh

  • Support Staff

May 16, 2018 at 11:41 am

Oh yes, sorry. Those quotes need to be double quotes because the script is within a set of single quotes.

find( "[id^=\'ee-reg-form-qstn-grp-veterans-pricing-\']" ).prop("required",true);


radiusinvestigations

May 16, 2018 at 12:09 pm

That got it to save, but the code didn’t work. Question still doesn’t require you to select the checkbox to proceed in checkout. I feel like I am missing something.


Josh

  • Support Staff

May 16, 2018 at 12:32 pm

Probably a link to the page in question so we can view the source will help find that missing something.


radiusinvestigations

May 16, 2018 at 1:01 pm

Page in question, select veteran ticket to cart.


Josh

  • Support Staff

May 16, 2018 at 1:50 pm

May I ask which questions are you trying to hide, for which ticket type?


radiusinvestigations

May 16, 2018 at 2:00 pm

Last question “You have selected the veteran price…”


radiusinvestigations

May 16, 2018 at 2:08 pm

And it hides under the regular ticket, but appears (ideally as a required question) for the veterans only ticket


Josh

  • Support Staff

May 16, 2018 at 2:57 pm

This will make that last question required:

function requireQuestion(item, index) {
        jQuery( ".spco-attendee-panel-dv.spco-attendee-ticket-" + item + " .ee-reg-qstn-15" ).prop("required", true);
    };
    ["14", "13", "12", "11"].forEach(requireQuestion);


radiusinvestigations

May 17, 2018 at 7:57 am

That did it! Thank you so much!

The support post ‘Add jquery to inline php script to hide questions for certain tickets’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso