Skip to content
This repository has been archived by the owner on Jan 21, 2024. It is now read-only.

Example config not working. #45

Open
CommandLineDesign opened this issue Jul 31, 2015 · 3 comments
Open

Example config not working. #45

CommandLineDesign opened this issue Jul 31, 2015 · 3 comments

Comments

@CommandLineDesign
Copy link
Contributor

Cannot get basic config to work. Consider this example(Mostly taken from docs):

<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.addressfield.js"></script>
<body>
  <form id="myForm">
    <div class="field-wrapper">
      <div class="field-wrapper">
        <label for="country">Country</label>
        <select id="country"></select>
      </div>
    </div>
    <div id="locality-fields">
      <div class="field-wrapper">
        <label for="city">City</label>
        <input type="text" id="city" />
      </div>
      <div class="field-wrapper">
        <label for="state">Administrative Area</label>
        <input type="text" id="state" />
      </div>
      <div class="field-wrapper">
        <label for="zip">Postal Code</label>
        <input type="text" id="zip" />
      </div>
    </div>
  </form>

  <script type="text/javascript">
  $('#myForm').addressfield({
    json: 'addressfield.json',
    fields: {
      Country: '#country',
      locality: '#locality-fields',
      localityname: '#city',
      administrativearea: '#state',
      postalcode: '#zip'
    }
  });
  </script>
</body>
</html>

addressfield.json is the version which is distributed with addressfield.js. Also note that I needed to capitalize 'Country' in order to avoid the error :

"Uncaught TypeError: Cannot read property 'fields' of undefined"

I have confirmed that addressfield.js and addressfield.json are available and properly accessed. Running this html page results in a form with an unpopulated country dropdown and no functionality.

@iamEAP
Copy link
Contributor

iamEAP commented Jul 31, 2015

Mmm. So it's possible the docs aren't obvious about this, but you need to provide a list of countries yourself.

I suppose it would be reasonable to use the countries provided in the JSON as a fallback if an element is provided for country that is empty, but that'd be a new feature.

You shouldn't need to capitalize the country property; perhaps fixing the above (by providing your own select list of countries) will fix that issue?

You can also check out http://tableau-mkt.github.io/jquery.addressfield if you want to start from somewhere with a working form example.

@CommandLineDesign
Copy link
Contributor Author

Okay that fixed it! Initializing the country dropdown with some valid choices and setting the fields.country object back to lower case did the trick. In my case I do need every from that list so manually populating the select box would not be fun, but I can figure out a way to populate it from addressField.json.

I would recommend putting a few placeholders in that dropdown, maybe like this:

    <select id="country">
      <option value="US">United States</option>
      <option value="CA">Canada</option>
      <option value="BR">Brazil</option>
    </select>

also, I think it would be very cool functionality to populate the country dropdown when it's available but empty and it would take care of this use case which I'm sure will come up again. I'll try my hand at extending addressfield in my fork and see if I come up with something adequate.

Thanks!

@iamEAP
Copy link
Contributor

iamEAP commented Apr 11, 2016

Good news is that #55 is in. We just need to update docs/examples.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants