I have two xml files, Drinks.xml and Desserts.xml, I plan to keep adding items in it in future.
<?xml version="1.0" encoding="UTF-8" ?>
<DrinksMenu>
<drink value = "1">Lemonade</drink>
<drink value = "2">Milk Shake</drink>
</DrinksMenu>
<?xml version="1.0" encoding="UTF-8" ?>
<DessertsMenu>
<dessert value = "1">Apple Pie</dessert>
<dessert value = "2">Caramel Custard</dessert>
</DessertsMenu>
I create a custom form in a wordpress page called Registration using the following HTML code:
<title>Using jQuery and XML to populate a drop-down box demo</title>
</head>
<body>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>
Form Name
</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Food Title</label>
<div class="col-md-8">
<input id="textinput" name="textinput" type="text" placeholder="e.q. A Novel Sensation at a restaurant ..." class="form-control input-md">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Select Type</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Drinks</option>
<option value="2">Desserts</option>
</select>
</div>
</div>
<div id="page-wrap">
<label class="col-md-4 control-label" for="selectbasic">Select Your Option</label>
<select id="paperSelect">
<option value="1"></option>
</select>
</div>
</fieldset>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var urlPaper;
var elementTag;
urlPaper = "Drinks.xml";;
elementTag = 'drink';
$.ajax({
// updatePublicationFields();
type : "GET",
url : urlPaper,
dataType : "xml",
success : function(xml) {
var select = $('#paperSelect');
select.empty();
var optionsHtml = new Array();
$(elementTag, xml).each(function() {
var value = $(this).attr('value');
var label = $(this).text();
optionsHtml.push("<option class='ddindent' value='" + value + "'>" + label + "</option>");
});
optionsHtml = optionsHtml.join('');
select.append(optionsHtml);
} //sucess close
});
$("#selectbasic").change(function() {
var urlPaper;
var elementTag;
if ($("#selectbasic").val() == 1) {
urlPaper = "Drinks.xml";
elementTag = 'drink';
} else {
urlPaper = "Desserts.xml";
elementTag = 'dessert';
}
$.ajax({
type : "GET",
url : urlPaper,
dataType : "xml",
success : function(xml) {
var select = $('#paperSelect');
select.empty();
var optionsHtml = new Array();
$(elementTag, xml).each(function() {
var value = $(this).attr('value');
var label = $(this).text();
optionsHtml.push("<option class='ddindent' value='" + value + "'>" + label + "</option>");
});
optionsHtml = optionsHtml.join('');
select.append(optionsHtml);
} //success close
});
});
});
</script>
</body>
The above code works perfectly if I create a project outside wordpress and run it on my localhost. But for wordpress there is some problem. Now I have two questions,
- How do I make it work in wordpress ? I mean where do I place those xml files so wordpress finds and loads it ? I was unable to make it work in wordpress.
- I have used some repeated blocks of code since I couldn't make it work otherwise. How can I with the use of functions optimize it ?
Can someone knowledgeable help me please ? I am still dabbling with web technologies.
