Solved

When I add an API function to my wordpress site, the <div>s after the are removed.

Posted on 2013-12-04
4
292 Views
Last Modified: 2013-12-30
I'm using an include to get information from an API and displaying it in our wordpress site.

I'm new to API's and the XML but have figured how to display the information I want and got it to display into wordpress using PHP include.

However, when the API data is included, it removes all the <div> after the code.  I thought maybe something in my HTML in the include may be interfering but checking the source shows the other 2 divs after are ignored by the browser.

Is there there something in the XML that needs to be escaped or may be causing this to happen?  

here's the code:

<style type="text/css">
#event {
	postion: relative;
	margin: 5px;
	width: 290px;
	height: 50px;
}

.menu h3{
	margin: 2px;
	float: left;
}

.date-display {
	float: left;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	margin-right: 5px;
	position: relative;
}

.date-display #display-top {
	height: 20px;
	margin: 0px;
	width: 30px;
	background: #fff;
	border-radius: 5px 5px 0 0;
	border-left: solid thin #666;
	border-top: solid thin #666;
	border-right: solid thin #666;
	
	padding: 10px 15px 5px 8px;
	font-size: 1.8em;
	color: #333;
}
.date-display #display-bot {
	height: 15px;
	background: red;
	margin: 0px;
	border-radius: 0 0 5px 5px;
	border-left: solid thin #666;
	border-bottom: solid thin #666;
	border-right: solid thin #666;
	width: 30px;
	padding: 0 15px 8px 8px;
	color: #fff;
	text-transform: uppercase;
	font-weight: bold;
}
#event .menu {
	float: left;
	width: 190px;
	position: relative;
}
.menu em {
	position: relative;
	width: 160px;
	padding: 5px;
	z-index: 2;
	display: none;
	top:-10;
	float: left;
	background: #f1f1f1;
	border-radius: 5px;
	color: #444;
	box-shadow: 2px 2px 2px #333;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

	$(".menu a").hover(function() {
		$(this).next("em").animate({opacity: "show", top: "5"}, "slow");
	}, function() {
		$(this).next("em").animate({opacity: "hide", top: "10"}, "fast");
	});


});
</script>
<?php
$credentials="";
$today = date('Y-m-d');
$end = date('Y-m-d',strtotime('+7 day'));
echo "<h1>The Next 7 Days at Cornerstone</h1>";
//$num_days = '30';
//$today= date('Y-m-d');
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST,0); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,0); 
curl_setopt($ch, CURLOPT_USERPWD, $credentials);
// get this day's public calendar listing
curl_setopt($ch, CURLOPT_URL, "https://iamcornerstone.ccbchurch.com/api.php?srv=public_calendar_listing&date_start={$today}&date_end={$end}");
$xml=@curl_exec($ch);
// bail if cannot get response from CCB
if($xml === false){
    show_empty();
    finish();
}
// the response is XML so we let php parse it
$eventlist=simplexml_load_string($xml);
// if we do not get any items back then send empty
if(! isset($eventlist->response->items->item)){
    show_empty();
    finish();
    exit;
}
$i=0;
foreach($eventlist->response->items->item as $value){
	if(++ $i <= 2) {
	$date = date('F d, Y' , strtotime($value->date));
	$datenum = date('d' , strtotime($value->date));
	$datemon = date('M' , strtotime($value->date));
	echo "<div id=\"event\">";
	echo "<div class=\"date-display\"><div id=\"display-top\">" . $datenum . "</div><div id=\"display-bot\">" . $datemon . "</div></div>";
    echo "<div class=\"menu\"><a href=\"#\"><h3>" . trim($value->event_name). "</h3></a>" . "<em style=\"top: -85px; display: none;\">" . trim($value->event_description) . "</em></div>";
	echo "</div><br style=\"clear:both\">";
}

}if($i >= 2) {
		echo "view all events this week";
	}
finish();
exit;
//
//
function show_empty(){
    //do something here to say that there were no events in the list
    echo "There are no events today.";
    return;
}
function finish(){
    echo "";
    return;
}
?>

Open in new window


I am then using <?php include('filename'); ?> in my wordpress footer to bring the info in.

Here is the live site.

www.upperlimitdesign.com/sandbox/cornerstone

thanks.
0
Comment
Question by:axessJosh
  • 2
  • 2
4 Comments
 
LVL 2

Author Comment

by:axessJosh
ID: 39697396
UPDATE:

I started removing various lines in the code and found if I remove the exit; in line 127 if fixes it.  However, I'd be curious to know if there is a better solution or if removing that will cause other problems.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 39697416
if removing that will cause other problems.

I don't think removing the exit; will hurt anything but it's a little weird that removing it is what fixes the issue.  Usually WordPress will remove empty divs in the visual editor (it's a TinyMCE thing) but if they are being removed from the code in the footer, that's just odd.

However, I'd be curious to know if there is a better solution

There should be.  For one thing, the code above directly links to JQuery, which should already be present in WordPress and runs the risk of creating conflicts.  For another, running it in the footer is kind of a hack.  I would lean towards attempting to consume the feed in functions.php and just echoing the output in the footer.
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39697423
Jason1178.

will i run into any issues affecting other items in the functions file by placing this content there?
0
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 500 total points
ID: 39700169
You can't just copy and paste this code into functions.php and expect it to work.  Instead, you add the styles to the your theme's style.css file, the javascript to its own file and call it properly using wp_enqueue_script(), and then the PHP in functions.php with the output able to be stored in a variable to be called wherever you need it.

This would probably eliminate any weirdness in the output but if you can get away with just removing the exit command, you can see that's a lot simpler.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

I want to start by talking about the use of plug-ins for WordPress. I started a web-site for a company I was working for a few years ago; I had extremely basic knowledge of HTML. I am a Graphic Designer by trade so I invited the opportunity as a cha…
Wordpress Horizontal Drop-Down Menu In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or us…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…

680 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