Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

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

Avatar of Ashraf Hassanein
Ashraf Hassanein asked on
PHPAJAXjQuery
11 Comments1 Solution580 ViewsLast Modified:
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;
?>


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>
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 CERTIFIED SOLUTION
Avatar of leakim971
leakim971Flag of Guadeloupe imageMultitechnician
Commented:
This problem has been solved!
Unlock 1 Answer and 11 Comments.
See Answers