I am using the jQuery Populate plugin to bring data into a large form. It has a dropdown of font types. (arial, helvetica etc...) The client wanted me to add Google Fonts to the choices in the drop down so I am using a call via JSON to get the Google font names and add them to the list. They appear great. The issue is that the populate seems to be wanting to go before the JSON call is complete so it is not populating correctly. Here is the order of things I am doing.
$(document).ready(function()
1. Make the JSON call and use append to add GF to the lists on the page as needed. This works
2. $('#loginForm').populate(the data from the database); This works as long as I am not trying to match a GF.
)
I can't seem to get the populate to wait, or know when to fire AFTER the JSON is totally filled in. If the font is in the original list (helvetica) it populates. If it is from GF, it does not. To me that seems it can't find the match because it hasn't filled yet. Any help? Thanks all!
EDIT: with code below
var url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=key';
$.ajax({
url: url,
dataType: 'json',
success: function(fonts){
for (var i = 0; i < fonts.items.length; i++) {
$('#main_font')
.append($("<option></option>")
.attr("value","GF-"+fonts.items[i].family)
.text("GF-"+fonts.items[i].family));}
},
});
//I put it in the ajaxStop because it does seem to wait for the menu to build above
$(document).ajaxStop(function () {
$('#loginForm').populate(<?php echo $list; ?>);
})
//My drop down look like this
<select name="main_font" id="main_font" class="required fontP">
<option value="" selected="selected">Select</option>
<option value="arial">Arial</option>
<option value="verdana">Verdana</option>
<option value="helvetica">Helvetica</option>
<option value="times new roman">Times New Roman</option>
</select>
If the populated information coming to populate() is one of the standard fonts above it populates. If it is one of the Google fonts being filled dynamically it never takes. I do this with dynamically created drop downs all the time but never with the data coming from an ajax pull.
