Link to home
Start Free TrialLog in
Avatar of Ashraf Hassanein
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

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

Open in new window



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">&nbsp;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">&nbsp;Weather</h3>
       </div>
</div>
<div id="window3" class="ui-widget-content">
        <h3 class="ui-widget-header">&nbsp;YouTube</h3>
</div>
<div id="window4" class="ui-widget-content">
        <h3 class="ui-widget-header">&nbsp;News</h3>
</div>

Open in new window

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.
Avatar of leakim971
leakim971
Flag of Guadeloupe image

replace :
$.get("facebook-parser.php", {}, function(response){
                    $("#window1").html(response);
                    });

Open in new window

by :
$.get("facebook-parser.php", {}, function(response){
      $("#window1").html(response);
      $("a", "#window1").click(function(evt) {
           var href = $(this).attr("href");
           if( href && (href.indexOf("#")!=0) && (href.indexOf("javascript:")!=0) ) {
              $("#window1").load("get_content.php?url=" + encodeURIComponent(href));
           }
      });
});

Open in new window


you've a script on your server to download the new page, get_content.php :
<?php
   $url = $_REQUEST["url"];
   echo file_get_contents($url);
?>

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 :
<div id="window1" class="ui-widget-content">
        <h3 class="ui-widget-header">&nbsp;Facebook</h3>
</div>

Open in new window

by :
<div id="window1" class="ui-widget-content">
     <div id="window1container" style="height:100%;width:100%">
        <h3 class="ui-widget-header">&nbsp;Facebook</h3>
    </div>
</div>

Open in new window


and use :
$.get("facebook-parser.php", {}, function(response){
      $("#window1container").html(response);
      $("a", "#window1container").click(function(evt) {
           var href = $(this).attr("href");
           if( href && (href.indexOf("#")!=0) && (href.indexOf("javascript:")!=0) ) {
              $("#window1").load("get_content.php?url=" + encodeURIComponent(href));
           }
      });
});

Open in new window

Avatar of Ashraf Hassanein
Ashraf Hassanein

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
where to see your page with the provided code?
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?
My bad replace :
      $("a", "#window1").click(function(evt) {
           var href = $(this).attr("href");

Open in new window

by :
      $("a", "#window1").click(function(evt) {
           evt.preventDefault();
           var href = $(this).attr("href");

Open in new window

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?
Here what I get when click on an image in window1 :
User generated image
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...
Hi Leakim971,
     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));
                         }
                         });
                    });

Open in new window


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));
                         }
                       }
                      });
                    });

Open in new window



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>';

Open in new window


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>';

Open in new window



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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Yesssssssssssssssssssssssss 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 so much perfect solution for my problem.