Smart Wizard jQuery script within page

  • GoWingsGo

    (@gowingsgo)


    11 years, 9 months ago

    Hello all!

    First let me say that I appreciate any advice or tips.

    I have been banging my head against the wall trying to figure this out. I have read a lot of posts and tutorials on the correct way to implement javascript and jquery via the wp_enqueue_script and wp_register_script. However, it seems most of the tutorials and discussion is about running the script in the header or footer.

    What I want to do is run the Smart Wizard jquery script in a page. Their documentation gives me this, which runs fine in a regular html page:

    <script type=”text/javascript” src=”jquery-1.4.2.min.js”></script>
    <link href=”smart_wizard.css” rel=”stylesheet” type=”text/css”>
    <script type=”text/javascript” src=”jquery.smartWizard-2.0.min.js”></script>

    Inititialize the Smart Wizard, copy and paste the below lines inside the head tag (<head> </head>) of your page

    <script type=”text/javascript”>
    $(document).ready(function() {
    // Initialize Smart Wizard
    $(‘#wizard’).smartWizard();
    });
    </script>

    I have removed the line that loads jquery because my theme (Oxygen for woocommerce from themeforest.net) loads it already.

    I have also tried changing the $ to jQuery since it seems jquery is loaded in compatibility mode from wordpress.

    Can someone give me just a basic example of how this should me included in the page?

    Thank you very much!!

Viewing 1 replies (of 1 total)
  • tedinoz

    (@tedinoz)

    10 years, 11 months ago

    I know it’s been a long time since the original post but this might just help someone.

    I’ve been using SmartWizard for a few years in a rather complicated Ajax form. SmartWizard is great – just set-and-forget; all the complicated stuff comes with designing the form, validation and callbacks. Anyway…

    First, use the initialisation string as-is. Just put it inside a jQuery no-conflict wrapper. Refer to the Codex.

    My initialisation looks like this:

    jQuery(document).ready(function($) {
	$(document).ready(function () {
		// Smart Wizard
		$('#wizard').smartWizard({transitionEffect: 'slideleft'});
	});
});

    Second, the easiest (but least desirable) way to include the SmartWizard initialisation is to hardcode it into the page template inside a <script> tag. Put this above the point where your form begins. This is what I did this at first. It’s not pretty but it does work.

    The better (and preferred) way to load SmartWizard is to enqueue it. Again refer to the Codex. In my case, I created a plugin and enqueued the SmartWizard initialisation along with a bunch of other stuff.

    You’ll also want to load the SmartWizard css. Same rules apply – hardcode the link for the SmartWizard css into your page template or, better yet, enqueue it.

Viewing 1 replies (of 1 total)

The topic ‘Smart Wizard jQuery script within page’ is closed to new replies.

Tags