I'm using JQuery for the first time and I've been working with the JQuery UI dialog example. I've extended it with a few extra inputs.
I'm experiencing odd behaviors in different browsers.
When I try IE, the append works as expected.
When I try Chrome, the append works but it appends twice.
When I try FireFox, the form is visible on the page. When the dialog loads, only the text before the form shows. Clicking the add dimensions button adds an empty row.
It's only my second day experimenting so I'm probably doing a number of things wrong.
How can I create a dialog to append an entry from the form correctly using the three browsers?
Any suggestions would be greatly appreciated.
Here is the code I am working with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
$(function(){
var dClass = $("#dClass"),
dWeight = $("#dWeight"),
dLength = $("#dLength"),
dWidth = $("#dWidth"),
dHeight = $("#dHeight"),
WeightMetric = $("#WeightMetric"),
LxWxHMetric = $("#LxWxHMetric");
$("#dialogExample").dialog({
autoOpen:false,
modal: true,
buttons: {
'Add dimensions': function(){
$('#dimensions tbody').append('<tr>' +
'<td>' + dClass.val() + '</td>' +
'<td>' + dWeight.val() + '</td>' +
'<td>' + WeightMetric.val() + '</td>' +
'<td>' + dLength.val() + '</td>' +
'<td>' + dWidth.val() + '</td>' +
'<td>' + dHeight.val() + '</td>' +
'<td>' + LxWxHMetric.val() + '</td>' +
'</tr>');
$(this).dialog('close');
}
},
Cancel: function(){
$(this).dialog('close');
}
});
$('#add-dimensions')
.button()
.click(function(){
$('#dialogExample').dialog('open');
});
});
</script>
Class: Weight: L: W: H:
<div>
<button id='add-dimensions'>Add</button>
</div>
</div>
<div style="display: none;" id="dialogExample" title="Add Dimensions">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae
felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est.
<form>
<fieldset>
<label for="dClass">Class: </label>
<input type="text" name="dClass" id="dClass" class="text ui-widget-content ui-corner-all" />
<label for="dWeight">Weight: </label>
<input type="text" name="dWeight" id="dWeight" class="text ui-widget-content ui-corner-all" />
<select id="WeightMetric">
<option value="Metric1">metric 1</option>
<option value="Metric2">metric 2</option>
<option value="Metric3">metric 3</option>
</select>
<label for="dLength">L: </label>
<input type="text" name="dLength" id="dLength" class="text ui-widget-content ui-corner-all" />
<label for="dWidth">W: </label>
<input type="text" name="dWidth" id="dWidth" class="text ui-widget-content ui-corner-all" />
<label for="dHeight">H: </label>
<input type="text" name="dHeight" id="dHeight" class="text ui-widget-content ui-corner-all" />
<select id="LxWxHMetric">
<option value="Metric1">metric 1</option>
<option value="Metric2">metric 2</option>
<option value="Metric3">metric 3</option>
</select>
</fieldset>
</form>
</div>
</body>