Develop Reference

Add Checkbox validation

Currently the date and year is being verified but I would like to add a checkbox to the list.
Form code:
var html = '';
html += '<div class="ac-overlay"></div>';
html += '<div class="ac-container">';
html += '<h2>' + settings.title + '</h2>';
html += '<p>' + copy.replace('[21]','<strong>'+settings.minAge+'</strong>'); + '</p>';
html += '<div class="errors"></div>';
html += '<div class="fields"><select class="month">';for(var i=0;i<months.length;i++){
html += '<option value="'+i+'">'+months[i]+'</option>'}
html += '</select>';
html += '<input class="day" maxlength="2" placeholder="01" />';
html += '<input class="year" maxlength="4" placeholder="2016"/>';
html +="<br><br>";
html +='<p><input class="smoker" type="checkbox"/>Please verify that you are a smoker.</p>';
html +="<br>";
html += '<button>Submit</button></div></div>';
Validation script:
validate : function(){
_this.errors = [];
if (/^([0-9]|[12]\d|3[0-1])$/.test(_this.day) === false) {
_this.errors.push('Day is invalid or empty');
};
if (/^(19|20)\d{2}$/.test(_this.year) === false) {
_this.errors.push('Year is invalid or empty');
};
_this.clearErrors();
_this.displayErrors();
return _this.errors.length < 1;
},
I played around a bit with the following code but something is missing:
if ("Not sure what to enter here to validate the checkbox.".test(_this.smoker) === false) {
_this.errors.push('You have not selected if you are a smoker');
};

Was a bit of a work around but ended up changing the Checkbox to enable and disable the verify button.
$(document).ready(function(){
$('#isAgeSelected').change(function(){
if(this.checked)
$('#autoUpdate').fadeIn('slow');
else
$('#autoUpdate').fadeOut('slow');
});
});
html +="<br><br>";
html += '<p><input type="checkbox" id="isAgeSelected"/> Please verify the date above is correct.';
html += '<div id="autoUpdate" class="autoUpdate" style="display:none"><button>Submit</button></div>';
html += '</div></div>';
See how it works here: http://jsfiddle.net/3WEVr/1135/

How to access the text within yahoo weather's geo data nodes?

I'm using the z weatherfeed plugin.
It already pulls most of the data from yweather api but I need the latitude and longitude.
The plugin gets the data for each item element like this for example:
html += '<div class="weatherCountry">'+ feed.location.country +'</div>';
However, if I try this...
html += '<div class="latitude">' + feed.item.geo.lat + '</div>';
html += '<div class="longitude">' + feed.item.geo.long + '</div>';
...it doesn't get the data for these elements.
How should I go about accessing both the geo:lat and geo:long?
Here's a live example: http://jsbin.com/sibafeke/1/edit

The data for geo:lat and geo:long can be accessed this way:
html += '<div class="latitude">' + feed.item.lat + '</div>';
html += '<div class="longitude">' + feed.item.long + '</div>';

Dynamic added div with onclick link

I'm adding some amount of div based on the xml list which contain some data and url
Currently trying to use onClick but it doesn't seems right on the js that loads the div part.
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('project-img').text();
var title = item.find('id').text();
var desc = item.find('desc').text();
var html;
//Embed them into HTML code
html = '<div class="project"><img src="' + image + '" alt="' + title + '" />';
html += '<div class="info">';
html += '<div class="title">'+title+'</div>';
html += '<div role="button" class="launch" onclick="window.open('+url+',"mywindow");">Launch Website</div>';
html += '<div role="button" class="more">View More</div>';
html += '</div></div>';
I think it somehow get mess up on the adding 'url' part with ' or "
Or there would be a much easier way to call a link on such situation?

as per your requirement correct syntax would be
html += '<div role="button" class="launch" onclick="window.open(\''+url+'\',\'mywindow\');">Launch Website</div>';

I think you have an error (the only one i could spot), so try the following:
onclick="window.open('+url+',\'mywindow\');"

Custom Confirm Dialog

function deleteRecordDialog() {
var returnThis;
var numRecordss = recs.length;
var html = ""
/*html= html +'<div id="popupContainer" style="width:' + width + 'px; height: ' + height + '; display: block;">';
html= html + '<div id="popupInner">';
html= html + '<div id="popupFrame">';
html= html + '<div class="margin15px dialog-messages">';*/
html= html + '<table>';
html= html + '<tr>';
html= html + '<td class="warning-icon-cell"></td>';
html= html + '<td style="padding-left: 5px;">';
if (numAddresses == 1) {
html = html + '<p>You have chosen to delete a contact.</p>';
}
else {
html = html + '<p>You have chosen to delete ' + numAddresses + ' contact(s).</p>';
}
html= html + '<p>Are you sure you wish to proceed?</p>';
html= html + '</td>';
html= html + '</tr>';
html = html + '</table>';
if (numAddresses == 1) {
html = html + '<div class="add-postage-submit-buttons"><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="returnThis=true; CloseDialog();"/> <input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
}
else {
html = html + '<div class="add-postage-submit-buttons"><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="returnThis=true; CloseDialog();"/> <input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
}
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
OpenDialog(html, 350, 180, false, "Delete Contact")
return returnThis;
}
Now usually I'd use JQuery and set modal to true to enable the false/true to be assigned but I don't have the luxury of jquery with this. Is there a way to use this custom dialog?
Is there a way to do the following without JQuery?
$("#dialogInfo").dialog({
modal: true
});

The jQuery-ui-dialog just runs a bunch of JavaScript code behind the scenes to give the appearance of a dialog box.
You can accomplish much of the same functionality using CSS.
I'm not going to tell you exactly what to do here, but I'll point you in the general direction.
For starters, you can create a div that will contain your dialog box content. Give it id dialog.
Then, in CSS, give it position:fixed and display:none and z-index:9999 along with the width and height you desire. Knowing exactly what its size is, you can write JavaScript code to center it on the screen. When you want to display the dialog, set its display property to block. Also, be sure to give it a background color and a border. That will allow you to give part of your document the appearance of being like a dialog box.
If you want to have a 'mask' behind the dialog box so that the user can't click on anything else on the page, create another div with id mask. Give it these CSS properties: position:fixed, top:0px, left:0px,height:100%, width:100%, display:nonebackground-color:black,z-index:9998,opacity:0.8. When you want to display the dialog as modal, set this div'sdisplayproperty toblock` as well.
Finally, jQuery-ui-dialog also captures [Tab] key presses to keep the keyboard focus inside the modal dialog. Feel free to do this as well, if you like.
Happy Coding!

AJAX/Javascript In a Form and then submit it

I'm php developer starting to get heavier into ajax and I've come across a problem I am not sure how to solve.
I am creating a form on the fly like this:
function addSearchResult(label, tz) {
var html = '';
html += '<div>'
html += '<form id="product-form" >';
html += '<div class="clock">'
html += '<div class="hour"></div>'
html += '<div class="min"></div>'
html += '<div class="sec"></div>'
html += '<input type="text" id="label" name="Label" placeholder="Label">'
html += '</div>'
html += '<div class="city">GMT</div>'
html += '<a href="#" class="whiteButton submit" id="view-product-button" >View</a>'
html += '</form>'
html += '</div>'
var insert = $(html);
$('#search-results').append(insert.data('tz_offset', tz).find('.city').html(label).end());
}
And I am reading the form results like this:
$('#product-form').submit(function() {
alert('OK');
addProduct('Test Value', 'Test Produlct');
$('input').blur();
$('#add .cancel').click();
this.reset();
return false;
});
The problem is, it does not work. If I put the form directly in the html it works fine. But adding it through ajax, it will not pick up that the form exist.
How should I go about solving this problem?

Using the shortcut event handlers (eg submit() or click()) only works for elements which are placed in the DOM on page load.
For dynamically added elements, you need to use delegate(), or on() for jQuery 1.7+. Try this:
< jQ 1.7
$('#search-results').delegate('#product-form', 'submit', function() {
// rest of your code
});
jQ 1.7+
$('#search-results').on('submit', '#product-form', function() {
// rest of your code
});