Solved

I am new to calling an API-XML into PHP

Posted on 2013-12-16
11
492 Views
Last Modified: 2014-02-02
I am new to API's and need to create a form that users can input information and have the XML returned.

With the two attached documents, one is a form and the other is a sample API display file, any suggestions?

Thx
yatco-api-sample1.php
Form.html
0
Comment
Question by:dannyshawn
  • 6
  • 4
11 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39723715
Without doing too much research, I can see that the yatco-api-sample calls an API and expects to get a JSON string returned.  It uses the JSON string to create an object, and uses the properties of the object to populate information in an HTML document.  There is no XML involved as far as I can see.  And that makes sense, because XML is less capable and offers less performance than JSON, so XML is falling out of favor, with JSON being the emerging standard.
http://json.org/
http://www.php.net/manual/en/function.json-decode.php
http://www.php.net/manual/en/simplexml.examples-basic.php

The Form appears to be a buyer's preference selection, which has been largely disabled by HTML comments that nullify the jQuery necessary to automate the AJAX calls.  
http://jquery.com/
http://learn.jquery.com/

The scripts appear to be fairly old, since there is this.   The current level of jQuery is several releases higher than 1.5.2.
http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

Taken together, it appears that the Form would be calling the API as the client is filling out the form, and the API would be returning information from a web service, probably a data base of boats for sale.

There are several moving parts to your application, and you would need to understand several technologies to understand the app.  Perhaps the first thing you would need to know is how the HTTP client server protocols work.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html

And it would be good to understand the essential moving parts of jQuery/AJAX
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 

Author Comment

by:dannyshawn
ID: 39724078
The API comes in two formats, XML and JSON. I should have clarified that.

Thank you for responding and I appreciate it. I will be looking into specifically the JSON.

There is a lot of information there that I want and need to go over and will take time to go over.

In this instance, as time is of the essence, in evaluating these two documents, simply what would need modification in the form file, a form "action" targeted to the sample.php file (display) work with the inputs?
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 39724190
simply what would need modification in the form file...
I'm not sure I would want to start with the premise "simply!"  There may be a lot of work here.  I don't know how conversant you are about HTML and jQuery, but if you look at the "view source" of the Form document you will see that large parts of it have been disabled because they are wrapped in comments.  My first try might be to remove the comments.  

There is no guarantee that is the right thing to do, or the only step that is required, but it's what I might try first.  If you look at the code and you're not sure what to do you might want to step back and get someone who can get hands-on with your scripts and test data sets.  We can answer questions and give general guidance here at EE.  But in the end, this is an application development project and you might find a good result faster if you hire a professional developer.

<!-- ORIGINAL CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
</head>
<body>
	<link href="css/yatco.css" rel="stylesheet" type="text/css" />
	<link href="css/colorbox.css" rel="Stylesheet" type="text/css" />
-->

	<!--[if gte IE 9]>
	<style type="text/css">
		.gradient {filter: none;}
	</style>
	<![endif]-->

<!-- ORIGINAL CODE
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
	<script type="text/javascript" src="scripts/yatco.js"></script>
	<script type="text/javascript" src="http://datafeed.yatco.com/VesselService.svc/companycss"></script>
	<script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
	<script type="text/javascript">
		var pageSize = 5;
		var pg1size = "600px";
		var pg2size = "1000px";
		var pg3size = "1200px;"
		var dfurl = "http://datafeed.yatco.com/VesselService.svc/";
		var compid = getParameterByName("cid");

		$(document).ready(function () {
			//if (compid != '') {
				$.getJSON(dfurl + 'GetConfig?cid=' + compid + '&callback=?', null, function (cfg) {
					if (cfg.StartCompanyVessels == true) {
						$("#div1").hide(0);
						setFramesize(pg2size);
						$("#componly").val('1');
						$.getJSON(dfurl + 'search?cid=' + compid + '&pageindex=0&' + $('#form1').serialize() + '&pagesize=' + pageSize + '&callback=?', null, function (vessels) {
							var pg = parseInt(getParameterByName('pageindex')) + 1;
							if (typeof viewModel2 != 'undefined') {
								ko.mapping.fromJS(vessels, viewModel2);
							}
							else {
								viewModel2 = ko.mapping.fromJS(vessels);
								ko.applyBindings(viewModel2, document.getElementById('div2'));
							}
							$("#div2").fadeIn(50);
							$('#smart-paginator').smartpaginator({ totalrecords: vessels.RecordCount, recordsperpage: pageSize, initval: pg, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'color', onchange: onChange });
						});
					}
					else {
						$("#div1").fadeIn(50);
					}

					if (cfg.HideSearch == true) {
						$("#back2").hide();
					};

				});
			/*}
			else {
				$("#div1").fadeIn(50);
			};*/

			$("#tbSpecs").click(function () { setViewPageIndex(1); });
			$("#tbDetails").click(function () { setViewPageIndex(2); });
			$("#tbPhotos").click(function () { setViewPageIndex(3); });
			$("#tbEmail").click(function () { setViewPageIndex(4); });
			$("#Email2").click(function () { setViewPageIndex(4); });
			setFramesize(pg1size);
			var viewModel;
			$.ajax({ url: dfurl + 'lists?cid=' + compid + '&callback=?', dataType: 'json', async: false, success: function (lists) {
				viewModel = ko.mapping.fromJS(lists);
				ko.applyBindings(viewModel, document.getElementById('div1'));
			}
			});
		});
		function onChange(newPageValue) {
			$.getJSON(dfurl + 'search?cid=' + compid + '&pageIndex=' + (newPageValue - 1) + '&' + $('#form1').serialize() + '&pagesize=' + pageSize + '&callback=?', null, function (vessels) {
				ko.mapping.fromJS(vessels, viewModel2);
				$('#vesselList2').show();
			});
		};
		function setViewPageIndex(index) {
			$("#divVesselSpecs").hide(0);
			$("#divVesselDetails").hide(0);
			$("#divVesselPhotos").hide(0);
			var dv1 = $("#divEmail");
			$("#divEmail").hide(0);
			switch (index) {
				case 1:
					$("#divVesselSpecs").show(0);
					break;
				case 2:
					$("#divVesselDetails").show(0);
					break;
				case 3:
					$("#divVesselPhotos").show(0);
					break;
				case 4:
					$("#divEmail").show(0);
					break;
			}
		}
		function openGallery(data) {
			$(".vespic").colorbox({ rel: 'vespic', open: true });
		}
		function setFramesize(size) {
			try {
			parent.document.getElementById("ycframe").style.height = size;
			}
			catch(err) {}
		}


	</script>
	<div id="div1" style="display: none;">
-->

		<form id="form1">
		<div align="right">
			<input type="hidden" name="vessel_list_frm_auto" value="1" />
			<input type="hidden" name="mode" value="0" />
			<input type="hidden" name="no_menu" value="0" />
			<input type="hidden" name="componly" id="componly" value="" />
		</div>
		<table align="center" border="0">
			<tr>
				<td>
					<table width="580px" border="0">
						<tr>
							<td colspan="7" class="FormHeader">
								General Preferences
							</td>
						</tr>
						<tr>
							<td align="center">
								<table border="0">
									<tr>
										<td class="FormLabel" width="45">
											LOA
										</td>
										<td width="80">
											<input type="text" name="FootageMin" value="" size="7" maxlength="4" />
										</td>
										<td class="FormLabel" width="8" align="center">
											to
										</td>
										<td width="80">
											<input type="text" name="FootageMax" value="" size="7" maxlength="4" />
										</td>
										<td width="5px">
										</td>
										<td class="FormLabel" width="60" align="left">
											Measure
										</td>
										<td align="left">
											<select name="FM" size="1" class="FormData">
												<option value="1">metric</option>
												<option value="0" selected="">US</option>
											</select>
										</td>
									</tr>
									<tr>
										<td class="FormLabel">
											Price
										</td>
										<td>
											<input type="text" name="PriceMin" value="" size="7" maxlength="12" />
										</td>
										<td class="FormLabel" align="center">
											to
										</td>
										<td>
											<input type="text" name="PriceMax" value="" size="7" maxlength="12" />
										</td>
										<td width="5px">
										</td>
										<td class="FormLabel" align="left">
											Currency
										</td>
										<td align="left">
											<select name="Currency" size="1" class="FormData">
												<option value="1">Australian Dollar</option>
												<option value="2">Canadian Dollars</option>
												<option value="3">Switzerland Francs</option>
												<option value="4">Euro</option>
												<option value="5">United Kingdom Pounds</option>
												<option value="6">Hong Kong Dollar</option>
												<option value="7">New Zealand Dollar</option>
												<option value="8">Swedish Krona</option>
												<option value="9" selected="true">US Dollar</option>
											</select>
										</td>
									</tr>
									<tr>
										<td class="FormLabel">
											Year
										</td>
										<td>
											<input type="text" name="YearMin" value="" size="7" maxlength="4" />
										</td>
										<td class="FormLabel" align="center">
											to
										</td>
										<td>
											<input type="text" name="YearMax" value="" size="7" maxlength="4" />
										</td>
										<td width="5px">
										</td>
										<td class="FormLabel" align="left">
											Builder
										</td>
										<td colspan="2" class="FormLabelSmall" align="left">
											<input type="text" name="Manufacturer" value="" size="24" maxlength="100" /><br />
											For multiple builders, separate using commas.
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td height="10">
							</td>
						</tr>
						<tr>
							<td align="center">
								<table border="0">
									<tr>
										<td class="FormLabel">
											Vessel Type
										</td>
										<td width="5px">
										</td>
										<td class="FormLabel" align="left">
											<input type="checkbox" name="VesselType" value="2" checked="true" />Motor
										</td>
										<td width="15px">
										</td>
										<td class="FormLabel" align="left">
											<input type="checkbox" name="VesselType" value="1" checked="true" />Sail
										</td>
									</tr>
									<tr>
										<td colspan="5">
										</td>
									</tr>
									<tr>
										<td>
										</td>
										<td>
										</td>
										<td class="FormLabelSmall" align="left">
											Motor Category
										</td>
										<td>
										</td>
										<td class="FormLabelSmall" align="left">
											Sail Category
										</td>
									</tr>
									<tr>
										<td>
										</td>
										<td>
										</td>
										<td>
											<select name="CategoryType" size="4" multiple="" data-bind="options: MotorCategories, optionsText: 'CategoryName', optionsValue: 'CategoryID', value: '0'"
												class="FormData">
											</select>
										</td>
										<td>
										</td>
										<td>
											<select name="Category" size="4" multiple="" data-bind="options: SailCategories, optionsText: 'CategoryName', optionsValue: 'CategoryID', value: '0'"
												class="FormData">
											</select>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
					<div style="height: 10px;">
					</div>
					<table width="580px" border="0">
						<tr>
							<td class="FormHeader">
								Location Preferences
							</td>
						</tr>
						<tr>
							<td align="center">
								<table border="0" align="center">
									<tr>
										<td class="FormLabel" width="155">
											State
										</td>
										<td width="5">
										</td>
										<td class="FormLabel" width="225">
											Country
										</td>
										<td width="5">
										</td>
										<td class="FormLabel">
											Region
										</td>
										<td width="5">
										</td>
									</tr>
									<tr>
										<td>
											<select name="State" size="4" data-bind="options: States, optionsText: 'name', optionsValue: 'id', value: '0'"
												class="FormData">
											</select>
										</td>
										<td width="5">
										</td>
										<td>
											<select name="Country" size="4" data-bind="options: Countries, optionsText: 'name', optionsValue: 'id', value: '0'"
												class="FormData">
											</select>
										</td>
										<td width="5">
										</td>
										<td>
											<select name="Region" size="4" class="FormData" data-bind="foreach: Regions, value: '0'">
												<option data-bind="value: id, text: name, style: {backgroundColor: id() < 1 ? '#dedfdf' : ''}">
												</option>
											</select>
										</td>
										<td width="5">
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
					<div style="height: 10px;">
					</div>
					<table width="580px">
						<tr>
							<td colspan="3" class="FormHeader">
								Sort Preferences
							</td>
						</tr>
						<tr>
							<td align="center">
								<table>
									<tr>
										<td class="FormLabel">
											1st Sort
										</td>
										<td>
											<select name="Sort1" size="1" class="FormData">
												<option value="0" style="background-color: #dedfdf;">-- No sort --</option>
												<option value="3">Price</option>
												<option value="5">BoatName</option>
												<option value="1">LOA</option>
											</select>
										</td>
										<td class="FormLabel">
											<input type="checkbox" name="AD1" value="1" />Invert
										</td>
										<td width="30">
										</td>
										<td class="FormLabel">
											2nd Sort
										</td>
										<td>
											<select name="Sort2" size="1" class="FormData">
												<option value="0" style="background-color: #dedfdf;">-- No sort --</option>
												<option value="3">Price</option>
												<option value="5">BoatName</option>
												<option value="1">LOA</option>
											</select>
										</td>
										<td class="FormLabel">
											<input type="checkbox" name="AD2" value="1" />Invert
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td height="10">
							</td>
						</tr>
						<tr>
							<td align="center">
								<input type="image" id="butgo" src="images/FormSearch.png" />
							</td>
						</tr>
						<tr>
							<td height="10">
							</td>
						</tr>
						<tr>
							<td align="center" class="FormLabelSmall">
								The worldwide search is a tool to provide a comprehensive review of all vessels
								listed<br />
								on the market and may include vessels centrally listed by other companies.
							</td>
						</tr>
						<tr>
							<td height="10">
							</td>
						</tr>
						<tr>
							<td align="center" class="FormLabelSmall">
								<b>Powered By YATCO</b>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		</form>
	</div>
   	<div id="div2" style="display: none;">
		<input type="image" id="back2" src="images/FormNewSearch.png" />
		<form id="form2" runat="server">

	<script type="text/javascript">
		$('#butgo').click(function () {
			$("#div1").fadeOut(500);
			setFramesize(pg2size);
			$.getJSON(dfurl + 'search?cid=' + compid + '&pageindex=0&' + $('#form1').serialize() + '&pagesize=' + pageSize + '&callback=?', null, function (vessels) {
				var pg = parseInt(getParameterByName('pageindex')) + 1;
				if (typeof viewModel2 != 'undefined') {
					ko.mapping.fromJS(vessels, viewModel2);
				}
				else {
					viewModel2 = ko.mapping.fromJS(vessels);
					ko.applyBindings(viewModel2, document.getElementById('div2'));
				}
				$("#div2").fadeIn(250);
				$('#smart-paginator').smartpaginator({ totalrecords: vessels.RecordCount, recordsperpage: pageSize, initval: pg, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'color', onchange: onChange });
			});
			return false;
		});
		$('#back2').click(function () {
			$("#div2").fadeOut(500, function () { setFramesize(pg1size); $("#div1").fadeIn(500); $("#componly").val(''); });
		});
		$('#back3').click(function () {
			$("#div3").fadeOut(500, function () { setFramesize(pg2size); $("#div2").fadeIn(500); });
		});
		function viewVessel(data) {
			$("#div2").fadeOut(500);
			setFramesize(pg3size);
			$.getJSON(dfurl + 'getvessel?cid=' + compid + '&id=' + data.VesselID() + '&callback=?', null, function (vessel) {
				if (typeof viewModel3 != 'undefined') {
					ko.mapping.fromJS(vessel, viewModel3);
				}
				else {
					viewModel3 = ko.mapping.fromJS(vessel);
					ko.applyBindings(viewModel3, $('#div3')[0]);
				}
				//viewModel3 = ko.mapping.fromJS(vessel);
				//ko.applyBindings(viewModel3, $('#div3')[0]);
				$("#divForm").show(0);
				$("#div3").fadeIn(250);
				setViewPageIndex(1);
				$(".vespic").colorbox({ rel: 'vespic' });
			});
		}
		var form = $("#form3").validate({
			submitHandler: function (form) {
				$.getJSON(dfurl + 'SubmitsalesForm?cid=' + compid + '&' + $('#form3').serialize() + '&callback=?', null, function (resp) {
					if (resp == "BC") {
						alert("Invalid Captcha");
					}
					else if (resp == "OK") {
						$("#divForm").hide(0);
						$("#divDone").show(0);
						$("#comments").val("");
						$("#captcha").val("");
					}
					else {
						alert("error");
					}
				});
			}
		});
	</script>
</body>
</html>

Open in new window

Best regards, ~Ray
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:dannyshawn
ID: 39815773
I've requested that this question be closed as follows:

Accepted answer: 0 points for dannyshawn's comment #a39724078

for the following reason:

Got me headed in the right direction for research
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39815771
@dannyshawn:

Going forward, here are a couple of links that can help you maneuver within the cultural standards of Experts Exchange.  

These links tell how to close a question.  For example, you can give points to the Experts who helped you, and you can accept more than one solution.  If more than one Expert helped you, there is no reason to give all of the points to only one.  You can distribute the points.  You have complete control over who gets the points.
http://support.experts-exchange.com/customer/portal/articles/608621-how-do-i-accept-a-comment-as-my-solution-
http://support.experts-exchange.com/customer/portal/articles/608596-how-do-i-accept-multiple-comments-as-my-solution-

This second link tells what grade to give.  To quote, "...an answer is worth an A, unless it doesn't resolve your issue."  It costs you nothing more to comply with the EE grading guidelines
http://support.experts-exchange.com/customer/portal/articles/481419

In this case, you gave us a research project, got a lot of information about it but left it abandoned for over a month, and are now asking to close it without comment.  At Experts-Exchange we answer questions and offer advice in exchange for points, and since you posted this as a 500 point question, I gave it more than a little thought.  So I will ask a moderator to reopen the question in case you decide you want to award points.

Best regards, ~Ray
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39815774
Please see the immediate prior comment for an explanation of why I object to this closing.  Thanks, ~Ray
0
 

Author Comment

by:dannyshawn
ID: 39815957
I agree Ray. I thought I did award points out. Sorry, I am new to this. I hope they reopen so I can award accordingly.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39816246
No prob -- we were all new to it once and the entire "question wizard" is under review at the EE home office right now.  Hint: You're not the only one confused by the UX/UI!
0
 

Author Comment

by:dannyshawn
ID: 39817875
Ok, there is an "* 500 points" to the right of Award points and Grade. It cannot be changed. I did this before when I closed this question and awarded none. So I'm afraid if I choose a grade A again, it will do the same thing, award 0 points.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39817880
Thanks.  I understand it can be a little confusing.  You almost have to read the entire page carefully, but once you get the hang of it, it becomes easier to use.  Hopefully the answers and suggestions we can share with you are worth the effort!

Best regards, ~Ray
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question