Go Premium for a chance to win a PS4. Enter to Win

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
?
331 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 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

WordPress has made it easy to create scalable sites based on their powerful CMS, but as great as WordPress is, there are some SEO issues that haven’t been addressed out of the box.  Fortunately these problems can be solved with a few plugins.  The f…
Do you think that WordPress is just for blogs?  Think again!  WordPress is really a fantastic all around platform that you can use to develop websites on.  Integrated into its basic functionality is the ability to create pages using your choice of a…
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
Suggested Courses

886 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