Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-12-04
4
Medium Priority
?
320 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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 2000 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Like there are many different versions of Wordpress, there are also a handful of related side projects WordPress users should be familiar with.   All of these projects are open source and GPL licensed, which means there are few restrictions to us…
What's this? As a volunteer Page Editor for Experts-Exchange.com, I have noticed that many authors also have blogs, and pull articles from their blogs to post at Experts-Exchange. I appreciate each author sharing their blog content with our site …
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

719 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