We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 17301
    • 932 Posts
    Hey,

    I'm having a little trouble figuring this one out. I have a snippet which calls an API to populate a select box with a bunch of countries. Directly under that I have another select box for particular zones of that country. When a user selects a country I need to somehow run a snippet which will call the API and populate the second select box with the zones of the selected country.

    For the second snippet to run it needs to take an id value from the first select box also. (To tell the API which zones to grab)

    Any suggestions on how to tackle this one? Page can't reload and if possible no blank connector resources.
      ■ email: [email protected] | ■ website: https://alienbuild.uk

      The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
      • 46886
      • 1,154 Posts
      So you need the first snippet to run and validate the selection first, right? And then pass off the value.

      Seems to me you can use javascript for the form, like a recaptcha that runs fully on the page but I could be way off base
        • 17301
        • 932 Posts
        Well, so far I've created a plugin that will check for action posts which I can AJAX to for other elements on the page. I haven't tried it yet but I guess I could use the plugin to also run the snippet and return the zones into the second select box. Fingers crossed smiley

        Thanks,
          ■ email: [email protected] | ■ website: https://alienbuild.uk

          The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
          • 3749
          • 24,544 Posts
          One approach would be to populate the country list on page load (with JS or PHP snippet). Then add an onclick (or addEventListener) to the country list that triggers a function to populate the second list, and an onclick (or addEventListener) for the second list that submits the form.


            Did I help you? Buy me a beer
            Get my Book: MODX:The Official Guide
            MODX info for everyone: http://bobsguides.com/modx.html
            My MODX Extras
            Bob's Guides is now hosted at A2 MODX Hosting
            • 17301
            • 932 Posts
            Thanks Bob.

            There are a few hundred countries and each country has a large number of zones so loading everything all at once and then changing with javascript isn't ideal (I know that's not what you're suggesting). I'm loading the countries with a snippet on page load already and I've coded up a script to detect the onchange event which will then fire an AJAX call to the page. A plugin is then retrieving the call and running formit with a hook.

            Everything seems fine and I can call back a custom response on to the page, but I'm a little unsure how to then grab the data from the hook and return it.

            Plugin:
            
            if ($ajax && $post['type'] == 'ajax') {
                $return = ['success' => false, 'message' => ''];
                $action = $post['action'];
                unset($post['type'], $post['action']);
                switch ($action) {
            
            
            // Update Regions/Zones
            	case "ocGetRegions":
            	$modx->runSnippet('FormIt',array(
            	'hooks' => 'ocGetRegions'
            	));
            	$return = 'This is my custom response.';
            break;
            
            ...
            }
            


            jQuery:
            // Update Regions/Zones
            ocGetRegions: function (elem) {
            	$.post(window.location.href, {
            		type: 'ajax',
            		action: 'ocGetRegions',
            	}).done(function (response) {
            		$('.my-test-box').html(response);
            	});
            },


            Any steer appreciated as always! smiley [ed. note: lkfranklin last edited this post 5 years, 8 months ago.]
              ■ email: [email protected] | ■ website: https://alienbuild.uk

              The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
              • 17301
              • 932 Posts
              I got it working by taking the snippet code and putting it directly into the plugin. I guess it doesn't matter too much but is there a way to use it how I originally had it just to keep the code more condensed.

                ■ email: [email protected] | ■ website: https://alienbuild.uk

                The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
                • 3749
                • 24,544 Posts
                If it works and is not too slow, I'd leave it alone. wink
                  Did I help you? Buy me a beer
                  Get my Book: MODX:The Official Guide
                  MODX info for everyone: http://bobsguides.com/modx.html
                  My MODX Extras
                  Bob's Guides is now hosted at A2 MODX Hosting