Solved

I am new to calling an API-XML into PHP

Posted on 2013-12-16
11
463 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 108

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 108

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
 

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 108

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 108

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 108

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 108

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to dynamically set the form action using jQuery.

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now