Panel not dragging - JQuery UI
I am creating a project and using Bootstrap and JQuery Ui for the front end. Index.php
file :
<html>
<head>
<script src="weatherModule/weatherFetcherForIndex.js"></script>
<?php
include "resources/resources.php";
echo $bootstrap;
include "NewsFeed/CnnNewsFeed.php";
$cnn = new CnnNewsFeed("world");
$feed = $cnn->getRss();
echo $jquery_ui;
?>
<script src="resources/dragable.js"></script>
</head>
<body>
<?php
//navbar
echo $navbar;
$items = $feed->channel->item;
?>
<div id="temp" style="width: 30%; height: 7%; margin-top: 6.5%;">
</div>
<?php
echo $cnnNewsHeader;
for($i = 0; $i <= 2+1; $i++)
{
echo "<a href='". $items[$i]->guid ."' class='list-group-item'>
<h4 class='list-group-item-heading'>" . $items[$i]->title . "</h4>
<p class='list-group-item-text'>" . $items[$i]->description . "</p>
</a>";
}
echo $cnnNewsFooter;
?>
</body>
</html>
You can just skip the weather, which works great. And this resources / resources.php file :
<?php
/**
* Created by PhpStorm.
* User: root
* Date: 11/7/15
* Time: 10:42 AM
*/
$jquery_ui = '<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>';
$weather_icons = "<link src='http://startyour.club/weather-icons/css/weather-icons.css' type='text/css' rel='stylesheet' />";
$bootstrap = "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css\">
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\"></script>
<script src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js\"></script>";
$navbar = "<nav class= \"navbar navbar-default\">
<div class=\"container-fluid\">
<!-- Brand and toggle get grouped for better mobile display -->
<div class=\"navbar-header\">
<button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">
<span class=\"sr-only\">Toggle navigation</span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
</button>
<a class=\"navbar-brand\" href=\"#\">Project</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
<ul class=\"nav navbar-nav\">
<li class=\"active\"><a href=\"#\">Home <span class=\"sr-only\">(current)</span></a></li>
<li><a href=\"#\">News</a></li>
<li><a href=\"#\">Weather</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>";
$navbar_for_weather = "<nav class= \"navbar navbar-default\">
<div class=\"container-fluid\">
<!-- Brand and toggle get grouped for better mobile display -->
<div class=\"navbar-header\">
<button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">
<span class=\"sr-only\">Toggle navigation</span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
<span class=\"icon-bar\"></span>
</button>
<a class=\"navbar-brand\" href=\"#\">Project</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">
<ul class=\"nav navbar-nav\">
<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">News</a></li>
<li class=\"active\"><a href=\"#\">Weather <span class=\"sr-only\">(current)</span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>";
$cnnNewsHeader = "<div class=\"col-sm-4\" style=\"margin-left: 65%; margin-top: 2.5%;\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
Cnn News
</div>
<div class=\"panel-body\">
<div class=\"list-group\">";
$cnnNewsFooter = "</div>
</div>
</div>
</div>";
This basically defines many of the variables that will be used in my main pages.
And my resources /dragable.js :
$(function() {
$( ".panel" ).draggable();
});
And also my weatherFetcherForIndex.js looks like this:
/**
* Created by root on 11/7/15.
*/
navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
var long = location.coords.longitude;
var lat = location.coords.latitude;
$.post("weatherModule/jsPhpInterface.php", {lat: lat, lon: long})
.done(function (data) {
var parsedJSON = JSON.parse(data);
$("#temp").html
(
"<div class='panel panel-primary'>" +
"<div class='panel-heading'>" +
"Temperature" +
"</div>" +
"<div class='panel-body'>"
+
parsedJSON.data.current_condition[0].FeelsLikeC + "° C" +
"</div>" +
"</div>" +
"</div>"
);
});
}
And when I open mine index.php
, I get the news bar that can be dragged, but the weather bar is not dragged. Any help would be much appreciated !!!!
Hooray!
source to share
As you pointed out, your selector for drag and drop content is panel
class:
$( ".panel" ).draggable();
But your weather bar has no class panel
. You have to select the weather bar with the appropriate class name or add the class name panel
to the weather bar.
Update:
Since you are creating the weather panel on the fly, you must make it draggable after you create it. After adding the weather bar to the DOM, you have to drag and drop it with $(".panel").draggable();
.
Add it after changing the content of the html
element temp
:
$("#temp").html
(
"<div class='panel panel-primary'>" +
"<div class='panel-heading'>" +
"Temperature" +
"</div>" +
"<div class='panel-body'>"
+
parsedJSON.data.current_condition[0].FeelsLikeC + "° C" +
"</div>" +
"</div>" +
"</div>"
);
$('.panel').draggable();
source to share