Solved

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

Posted on 2014-01-05
11
526 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
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 …

744 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now