Ashraf Hassanein
asked on
Display php refresh in the same jquery div, and keep the div resizable
I have the following php script which is extracting the new feed from facebaook
I want to display in window1 in the following code, and if any of the links is selected (to a move to a different page the content of the same div is updated, ho can I do so?
facebook-parser.php
<?php
$page_id = 'cnninternational';
$newsfeed = "";
if (isset($_GET['page_id']))
{
$page_id = $_GET['page_id'] ;
}
$access_token = 'xxxxxxxxxxxxx';
//Get the JSON
$json_object = file_get_contents('https://graph.facebook.com/'.$page_id.'/posts?access_token='.$access_token);
//Interpret data
$fbdata = json_decode($json_object);
$posts="";
$BTseparator = "\n"."BT"."\n"."http://";
$normalseparator = "\n"."http://";
$i = 0;
$newsfeed = $newsfeed."<table>";
foreach($fbdata->data as $item){
if (isset($item->message))
{
$color = "#B2E0F0" ;
if ($i % 2 == 0)
{
$color = "#B2E0F0";
} else {
$color = "#E8F6FA";
}
$newsfeed = $newsfeed. '<tr bgcolor="'.$color .'"><td>';
if (strpos($item->message, $BTseparator ) !== false){
$text = explode ($BTseparator, $item->message);
$newsfeed = $newsfeed. $text[0] . '<br>';
} else {
if (strpos($item->message, $normalseparator ) !== false) {
$text = explode ($normalseparator, $item->message);
$newsfeed = $newsfeed.$text[0] . '<br />';
} else {
$newsfeed = $newsfeed. $item->message . '<br />';
}
}
}
if (isset($item->picture)){
$newsfeed = $newsfeed. '<a href="' . $item->picture . '"><img style="border:0;" src="' . $item->picture . '"></a><br />';
}
if ((isset($item->link)) && (strpos($item->link , "youtube") !== false)) {
$newsfeed = $newsfeed.'<a href="' . $item->link . '">Watch Video</a><br />';
}
$newsfeed = $newsfeed. '<b>' . $item->from->name . '</b><br />';
$newsfeed = $newsfeed. 'Timestamp: ' . $item->created_time . '<br /></td></tr>';
$i = $i + 1;
}
$newsfeed = $newsfeed. '</table>';
$newsfeed = $newsfeed. '<table>';
$newsfeed = $newsfeed. '<tr><td>';
$newsfeed = $newsfeed. '<a href="facebook-example.php?page_id=cnninternational">cnninternational</a>';
$newsfeed = $newsfeed. ' </td>';
$newsfeed = $newsfeed. ' <td>';
$newsfeed = $newsfeed. ' <a href="facebook-example.php?page_id=bbcnews">bbc news</a>';
$newsfeed = $newsfeed. '</td></tr>';
$newsfeed = $newsfeed. '</table>';
echo $newsfeed;
?>
I want to display in window1 in the following code, and if any of the links is selected (to a move to a different page the content of the same div is updated, ho can I do so?
<style>
.ui-widget-content {
margin-top: 90px;
background-position: top left;
width: 150px;
height: 150px;
padding: 0.5em;
position: absolute;
overflow: auto;
}
.ui-resizable-helper { border: 2px dotted #00F; }
.ui-draggable, .ui-droppable {
background-position: top;
}
#window1 h3 {
text-align: left;
margin: 0;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 14px;
color: #FFF;
background: #3B5998;
}
#window2 h3 {
text-align: left;
margin: 0;
font-family:"helvetica neu",arial,helvetica;
font-size: 14px;
color: #FFF;
background: #7D26CD;
}
#window3 h3 {
text-align: left;
margin: 0;
font-family:arial,helvetica;
font-size: 14px;
color: #FFF;
background: #CC0000;
}
#window4 h3 {
text-align: left;
margin: 0;
font-family:"Arial Black", Gadget, sans-serif;
font-size: 14px;
color: #FFF;
background: #1F2E2E;
}
</style>
<script type='text/javascript'>
$(function() {
var start = function() {
$(this).insertAfter(".ui-widget-content:last");
}
$( ".ui-widget-content" )
.draggable({containment: "#main"},{ cursor: "move", cursorAt: { top: 56, left: 56 }, start:start })
.resizable({animate: true},{helper: "ui-resizable-helper"});
/*jQuery("#window3").tubeplayer({ jQuery.tubeplayer.min.js });*/
$.get("facebook-parser.php", {}, function(response){
$("#window1").html(response);
});
$('#window2').weatherfeed(['734353'],{
woeid: true,
unit: 'c',
image: true,
country: true,
highlow: true,
wind: true,
humidity: true,
visibility: true,
sunrise: true,
sunset: true,
forecast: true,
link: true
});
});
</script>
<div id="window1" class="ui-widget-content">
<h3 class="ui-widget-header"> Facebook</h3>
<p id="window1content">Window's content is not set</p>
</div>
<div id="window2" class="ui-widget-content">
<h3 class="ui-widget-header"> Weather</h3>
</div>
</div>
<div id="window3" class="ui-widget-content">
<h3 class="ui-widget-header"> YouTube</h3>
</div>
<div id="window4" class="ui-widget-content">
<h3 class="ui-widget-header"> News</h3>
</div>
The Ajax function here is displaying the initial content in the div, but when I click the link inside it, it displays the result in main screen, also for some reason after adding this ajax I lost the resizable property, I cannot expand the div.
ASKER
No It did not work in my implementation, do you think if I use normal div I can have the new link loaded in the same div?
What I want to achieve is the something like the attached image.
4 windows encapsulated in one div called main.
I can close any of the windows, and then I can resize the others, meanwhile the contents of these windows are refreshable within themselves, so for example something like the facebook, if you select a link of another page it will be an php which will be reloaded in the same window, is that achievable? What do you think?
home.JPG
What I want to achieve is the something like the attached image.
4 windows encapsulated in one div called main.
I can close any of the windows, and then I can resize the others, meanwhile the contents of these windows are refreshable within themselves, so for example something like the facebook, if you select a link of another page it will be an php which will be reloaded in the same window, is that achievable? What do you think?
home.JPG
where to see your page with the provided code?
ASKER
Here is my page:
https://www.hassans.nl/new
The left div is reserved of the menu.
The top div is reserved for the header (logo and and famous login status which I asked before :-) )
And the middle which is the main is where I want to put my home design I sent earlier, so what do you think?
https://www.hassans.nl/new
The left div is reserved of the menu.
The top div is reserved for the header (logo and and famous login status which I asked before :-) )
And the middle which is the main is where I want to put my home design I sent earlier, so what do you think?
My bad replace :
$("a", "#window1").click(function(evt) {
var href = $(this).attr("href");
by : $("a", "#window1").click(function(evt) {
evt.preventDefault();
var href = $(this).attr("href");
ASKER
Still my implementation is not working, when I click at the bottom the bbc link I get nothing only a blank div!
I tested these links:
https://www.hassans.nl/new/facebook-parser.php?page_id=bbcnews
And
https://www.hassans.nl/new/facebook-parser.php?page_id=cnninternational
And they are working by themselves, what do you advise?
I tested these links:
https://www.hassans.nl/new/facebook-parser.php?page_id=bbcnews
And
https://www.hassans.nl/new/facebook-parser.php?page_id=cnninternational
And they are working by themselves, what do you advise?
Here what I get when click on an image in window1 :
it's image data.
get_content.php download the image for us and send it back but in the "wrong" format.
what to do?
check if we're going to download an image and decide to replace it by the tag itself
if it's a video do the same
if it's a page, it's ok, just sent the content but the page will not be able to update relative link
and so on...
Forget it. The web don't work like that, you CAN'T build site based on other web site content so easily... to much work...
it's image data.
get_content.php download the image for us and send it back but in the "wrong" format.
what to do?
check if we're going to download an image and decide to replace it by the tag itself
if it's a video do the same
if it's a page, it's ok, just sent the content but the page will not be able to update relative link
and so on...
what do you advise?
Forget it. The web don't work like that, you CAN'T build site based on other web site content so easily... to much work...
ASKER
Hi Leakim971,
I thought before giving up, I thought to do one extra trial, where I replaced:
By
And I replaced in the facebook-parser.php:
By
Now when you try it for the first the time (literally for the first single time) and after loading the page choose one of the page links at the bottom it works pretty fine and as I want it to be, but after loading the page for the second time and if you press the link at the bottom for any page link you get page not found, I am not sure if this issue can easily be fixed so it can work more than one time or it is a hopeless case, what do you think? I am very sorry for keep bothering you by my questions.
(I caring only about the page links at the end of the div.
I thought before giving up, I thought to do one extra trial, where I replaced:
$.get("facebook-parser.php", {}, function(response){
$("#window1container").html(response);
$("a", "#window1").click(function(evt){
evt.preventDefault();
var href = $(this).attr("href");
if( href && (href.indexOf("#")!=0) && (href.indexOf("javascript:")!=0) ) {
$("#window1").load("get_content.php?url=" + encodeURIComponent(href));
}
});
});
By
$.get("facebook-parser.php", {}, function(response){
$("#window1container").html(response);
$("a", "#window1container").click(function(evt){
evt.preventDefault();
if ($(this).hasClass("pageLink")) {
var href = $(this).attr("href");
if( href && (href.indexOf("#")!=0) && (href.indexOf("javascript:")!=0) ) {
$("#window1container").load("facebook-parser.php?page_id=" + encodeURIComponent(href));
}
}
});
});
And I replaced in the facebook-parser.php:
$newsfeed = $newsfeed. '<a href="facebook-parser.php?page_id=cnninternational" >cnninternational</a>';
$newsfeed = $newsfeed. ' </td>';
$newsfeed = $newsfeed. ' <td>';
$newsfeed = $newsfeed. ' <a href="facebook-parser.php?page_id=bbcnews" >bbc news</a>';
By
$newsfeed = $newsfeed. '<a href="cnninternational" class="pageLink" >cnninternational</a>';
$newsfeed = $newsfeed. ' </td>';
$newsfeed = $newsfeed. ' <td>';
$newsfeed = $newsfeed. ' <a href="bbcnews" class="pageLink">bbc news</a>';
Now when you try it for the first the time (literally for the first single time) and after loading the page choose one of the page links at the bottom it works pretty fine and as I want it to be, but after loading the page for the second time and if you press the link at the bottom for any page link you get page not found, I am not sure if this issue can easily be fixed so it can work more than one time or it is a hopeless case, what do you think? I am very sorry for keep bothering you by my questions.
(I caring only about the page links at the end of the div.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yessssssssssssssssssssssss s you rock eakim971, it is working as I wanted to yesssssssssssssssssssss.
Thank you soooooo much.
The new code indeed is as your ;ast comment exactly thank you so much.
Thank you soooooo much.
The new code indeed is as your ;ast comment exactly thank you so much.
ASKER
Thank you so much perfect solution for my problem.
Open in new window
by :Open in new window
you've a script on your server to download the new page, get_content.php :
Open in new window
If that work well for you, you're lucky else maybe you should consider it's an impossible mission.
for your resizable property you're overwritting content of the div where you have the resizable icon with the .html(response)
you should use an other div inside each window
so replacing :
Open in new window
by :Open in new window
and use :
Open in new window