Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-01-05
11
Medium Priority
?
548 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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 2000 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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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 …

721 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