This topic has 2 replies, 2 voices, and was last updated 8 years by 
-
-
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:
<html>
<head>
<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>
</html>
The above code works perfectly if I create a project outside wordpress and run it on my localhost. But for wordpress site with kleo theme there is some problem. Now I have two questions,
1. 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. Will the populated menu have default kleo settings ?
2. 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 these web technologies, so if possible please describe.
This is beyond the scope of support. If you’d like to hire 7th queen to code this for you, you can get a quote by emailing dev@seventhqueen.com.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
The forum ‘General questions’ is closed to new topics and replies.
