Solved

Display php refresh in the same jquery div, and keep the div resizable

Posted on 2014-01-05
11
542 Views
Last Modified: 2014-01-06
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.
0
Comment
Question by:Ashraf Hassanein
[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
  • 6
  • 5
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39758426
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

0
 

Author Comment

by:Ashraf Hassanein
ID: 39759000
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
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39759003
where to see your page with the provided code?
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:Ashraf Hassanein
ID: 39759009
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?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39759025
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

0
 

Author Comment

by:Ashraf Hassanein
ID: 39759839
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?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39759872
Here what I get when click on an image in window1 :
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...
0
 

Author Comment

by:Ashraf Hassanein
ID: 39760061
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.
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39760177
Maybe :
	var fctCallback = 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), fctCallback);
				}
			}
		});
	}

	$.get("facebook-parser.php", {}, fctCallback);

Open in new window

0
 

Author Comment

by:Ashraf Hassanein
ID: 39760596
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.
0
 

Author Closing Comment

by:Ashraf Hassanein
ID: 39760601
Thank you so much perfect solution for my problem.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 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