I'm starting work on a members section of my website, using AngularJS.
v0.1.0.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo ucfirst($_SERVER['PHP_AUTH_USER']); ?>'s dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="../jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>
<body ng-app="usr" ng-controller="userControll as users" ng-init=<?php echo "'users.setUser(" . $_SERVER['PHP_AUTH_USER'] .")'"?>><!-- since I'm using server auth, to transfer to angular-->
<div style="background-color: #000000; color: #c0c0c0;">
<div class="container">
<img ng-src="{{users.user.icon}}" alt="avatar" />
<h1>{{users.user.name}}</h1>
<i>#<?php echo $_SERVER['PHP_AUTH_USER']; ?></i>
</div>
</div>
<div class="container">
<h1>Dashboard</h1>
<!--Nav tabs-->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Settings</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home"><h1>Home</h1><br>{{users.user.data}}</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>{{users.user.name}}</h2>
<hr>
<span style="color: gray">Coming soon</span>
</div>
<div role="tabpanel" class="tab-pane fade" id="settings">
<h2>Settings</h2>
<span style="color: gray">Coming soon</span>
<hr>
<h3>About</h3>
<i>v0.1.0<br>© Imagifight Studios 2015</i>
</div>
</div>
</div>
</body>
</html>
app.js
(function(){
var app = angular.module('usr', []);
var userData = $.ajax({
dataType: 'json',
url:'user-data.json'
})
.done(function(data) {
$.each(function(data){
$.parseJSON(data);
});
}).fail(console.error('Damn. Didn\'t work.'));
app.controller('userControll', function(){
this.setUser = function(u){
this.user = userData[u];
}
})
})();
user-data.json
{
"imagifight": {
"name": "Imagifight",
"email": "imagifight#gmail.com",
"status": "owner",
"icon": "icons/imagifight.png"
}
}
Throws error:
Damn.Didnt work
(anonymous function) # app.js:11
Can't see where the ajax went wrong. No syntax errors either. Maybe I'm missing something here, I don't know. Any ideas on how to fix?
You have a problem with Quote. Escape it as
console.error('Damn. Didn\'t work.')
You have ' inside the console error.
Change: console.error('Damn. Didn't work.')
To: console.error('Damn. Didn\'t work.')
Related
I need to convert this working filter gallery from JavaScript JQuery. I'm a complete novice in both these languages so I was hoping someone could give me a little help. Below is the JavaScript that will have to be converted,
(function() {
var filterButtons = document.querySelectorAll(".filterList a");
imageNodes = document.querySelectorAll("img");
console.log(filterButtons, imageNodes);
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
function doImageSwitch(event) {
console.log("fire");
console.log(event.target.parentNode.id);
for(i=0; i<imageNodes.length; i++) {
imageNodes[i].style.display = "inline";
if(!imageNodes[i].classList.contains(event.target.parentNode.id)) {
imageNodes[i].style.display = "none";
}
}
staggerImage();
}
[].forEach.call(filterButtons, function(el) {
el.addEventListener("click", doImageSwitch, false);
});
staggerImage();
})();
And this is the HTML code I have set up,
<?php
include './includes/functions.php';
$conn = connect($config);
$result = mysqli_query($conn, "SELECT * FROM main_content");
//echo mysqli_num_rows($result); ?>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filter Gallery</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<?php
while($row = $result -> fetch_assoc()) {
echo "<img class=\"{$row['img_class']}
img-responsive\" src=\"img/{$row['img_src']}\"
alt=\"{$row['img_alt']}\">";
}
?>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/myScript.js"></script>
</body>
</html>
Any help would be greatly appreciated. Thank you!
Did you write the javascript code yourself? If so it should not be a problem finding the answer. StackOverflow is as said not a coding service. I can try to help you, but I will not be wasting time on this question if it's for homework or some programming job ;)
If you first try to convert the code, I will be happy to help you (try).
the following uses an html structure that is presumably the same as your php echo output.
(function() {
// Selecting all of the img tags within the document that have to be changed
var imageNodes = $(".images img");
// TweenMax syntax stays the same
function staggerImage() {
TweenMax.staggerFromTo(imageNodes, 0.7, {opacity:0}, {opacity:1}, 0.3);
}
$(".filterList a").on("click", function(e) {
console.log("fire");
// parent() - http://api.jquery.com/parent/
//console.log('This: %o - Parent - %o - ParentId - %o', $(this), $(this).parent(), $(this).parent().attr("id"));
var parentId = $(this).parent().attr("id");
// [parentId] will be used as a scoped variable on the nested anonymous function declared in [.each] below.
// .each([array],func) | [array].each(func) - http://api.jquery.com/jquery.each/
$(imageNodes).each(function(index, value) {
console.log("index: %o | value: %o | parentId: %o", index, value, parentId);
// .hasClass([string]) - http://api.jquery.com/hasclass/
if($(value).hasClass(parentId))
{
$(value).css("display","inline");
} else {
$(value).css("display","none");
}
});
staggerImage();
});
staggerImage();
})();
img {width:5em; height:5em;border:0.1em solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Something</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
Right Button with Dropdown
<ul class="dropdown filterList">
<li id="flower">Flower </li>
<li id="puppy" >Puppy </li>
<li id="kitten" >Kitty </li>
</ul>
</li>
</ul>
</section>
</nav>
<div class="row">
<div class="small-12 columns text-center">
<div class="images">
<img class="flower img-responsive" src="img/test.png" alt="flower 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 2" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 1" />
<img class="flower img-responsive" src="img/test.png" alt="flower 3" />
<img class="kitten img-responsive" src="img/test.png" alt="kitten 1" />
<img class="puppy img-responsive" src="img/test.png" alt="puppy 3" />
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/1m4LmLhx/1/
pastebin: http://pastebin.com/bfDL5NLU
Note: when you click on the hyperlinks, that we've attached click event handlers to, the viewport is being directed back to the top of the page.. this is usually undesirable, but it seems to be outside of the scope of this question to address that behavior.
<!Doctype html?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css\bootstrap.min.css" rel="stylesheet">
<link href="css\styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js\bootstrap.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});</script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "daily1.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Programme').each(function(){
var ChannelName = $(this).find('ChannelName').text();
var ProgrammeName = $(this).find('ProgrammeName').text();
var StartTime = $(this).find('StartTime').text();
var EndTime = $(this).find('EndTime').text();
$('<tr></tr>').html('<th>'+ChannelName+'</th><td>'+ProgrammeName+'</td><td>'+StartTime+'</td> <td>'+EndTime+'</td>').appendTo('#chart');
});
}
});
});
</script>
</head>
<body>
<br>
<img src="banner.jpg" alt="banner" style="width:650;height:175">
<h4><b>Your guide, to your TV</h4></b>
<div class="tabs">
<ul class="tab-links">
<li class="active">Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday<li>
<li>Sunday</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>Daily 1</p>
<br>
<table id="chart">
<tr><td></td>
<th>07.00</th>
<th>08.00</th>
<th>09.00</th>
<th>10.00</th>
<th>11.00</th>
<th>12.00</th>
<th>13.00</th>
<th>14.00</th>
<th>15.00</th>
<th>16.00</th>
<th>17.00</th>
<th>18.00</th>
<th>19.00</th>
<th>20.00</th>
<th>21.00</th>
<th>22.00</th>
<th>23.00</th>
<th>00.00</th>
</tr>
</table>
</div>
<div id="tab2" class="tab">
<p>Content1</p>
</div>
<div id="tab3" class="tab">
<p>Content2</p>
</div>
<div id="tab4" class="tab">
<p>Content3</p>
</div>
<div id="tab5" class="tab">
<p>Content4</p>
</div>
<div id="tab6" class="tab">
<p>Content5</p>
</div>
<div id="tab7" class="tab">
<p>Content6</p>
</div>
</div>
</div>
Please see above code. The data is being read from an external XML file. The data is currently appearing in a vertical list, but I would like it to appear horizontally in the table. (i.e. Programme Name Specifically to appear in a horizontal list)
Any help would be appreciated.
It's because your not appending in the right place. Try this :
$('#chart').append('<tr><td>'+ChannelName+'</td><td>'+ProgrammeName+'</td><td>'+StartTime+'</td> <td>'+EndTime+'</td></tr>');
My html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice Automation</title>
<!-- CSS -->
<link href="style/css/transdmin.css" rel="stylesheet" type="text/css" media="screen" />
<!-- JavaScripts-->
<script type="text/javascript" src="style/js/jquery.js"></script>
<script type="text/javascript" src="style/js/jNice.js"></script>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="helloApp" ng-controller="HttpController">
<div id="wrapper" >
<header id='banner'>
<h1>Invoice Automation tool</h1>
</header>
<ul id="mainNav">
<li>USERS</li>
<li>EMAILS</li>
<li>ROLES</li>
<li>APPROVALS</li>
<li>HIERARCHY</li>
<li class="logout">PREFERENCES</li>
<li class="logout">LOGOUT</li>
</ul>
<div id="containerHolder" >
<div id="container" >
<div id="sidebar" >
<ul class="sideNav">
<li>Users details</li>
<li><a href="Create User.html" >Create Users</a></li>
</ul>
</div>
<!-- // #sidebar -->
<!-- h2 stays for breadcrumbs -->
<h2>Users » User details</h2>
<div >
<form>
<div id="main" >
<form action="" class="jNice">
<ul id="subnav">
<li>New</li>
<li>View</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<TABLE>
<TR>
<TD></TD>
<TD><strong>Email Account </strong></TD>
<TD><strong>First Name</strong></TD>
<TD><strong>Last Name</strong></TD>
<TD><strong>Active from</strong></TD>
<TD><strong>Active to</strong></TD>
</TR>
<TR ng-repeat="profile in profiles">
<TD><input type="checkbox"></TD>
<TD><p>{{profile.id}}</p></TD>
<TD>{{profile.createdBy}}</TD>
<TD>{{profile.creationDate}}</TD>
<TD>{{profile.endDate}}</TD>
<TD>{{profile.roleDesc}}</TD>
</TR>
</TABLE>
</div>
<!-- // #main -->
<div class="clear" ></div>
</div>
<!-- // #container -->
</div>
<!-- // #containerHolder -->
<p id="footer">Home</p>
</div>
<!-- // #wrapper -->
</body>
</html>
My Controller file is
var helloApp = angular.module("helloApp", []);
helloApp.controller("HttpController", [ '$scope', '$http',
function($scope, $http) {
$http({
method : 'GET',
url : '/roles/listall'
}).success(function() {
$scope.profiles = data;
}).error(function() {
alert( "failure");
});
} ])
While I was trying to display through the browser I was unable to pull the data from the server. Instead of showing the actual data it was showing hardcoded data like shown below
**Email Account First Name Last Name Active from Active to
{{profile.id}}
{{profile.createdBy}} {{profile.creationDate}} {{profile.endDate}} {{profile.roleDesc}}**
Is your success callback getting the DATA ? Try logging it in console for your reference ?
May be you can try with this instead as the callback is having the data in the signature.
}).success(function(data) {
console.log(data);
$scope.profiles = data;
}
I have a function in Javascript like this :
!function($) {
function add_tab(num, name){
var $newDiv = $("<div class='tab-pane' />")
.attr("id", "tab_"+name)
.html("Content " + name);
//.html("<div class='row'>");
$("#graphTabsContent").append($newDiv);
var $newLi = $("<li/>");
if(num==0){
$newLi.attr("class", "active");
}
var $newA = $("<a data-toggle='tab' />")
.attr("href", "#tab_"+name)
.html(name);
$newLi.append($newA);
$("#ul_tabs").append($newLi);
};
function update_graph_tabs(){
$.getJSON("call/json/get_role", {}, function(roles) {
$("#ul_tabs").empty();
$("#graphTabsContent").empty();
$.each(roles, function (key, role){
add_tab(key, role);
});
});
}
// Run
update_graph_tabs();
}(jQuery);
this function get the data from JSON and after it create tabs tabbable, in my HTML like this(http://getbootstrap.com/2.3.2/components.html#navs).
this is my HTML code :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-warning" id="groupe" data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="span4"><div id="reportingContainer"></div></div>
<div class="span8">
<div id="dashboard">
<div id="combochart"></div>
<div id="control"></div>
</div>
</div>
</div>
<div class="tabbable" >
<ul id="ul_tabs" class="nav nav-tabs">
</ul>
<div class="tab-content" id="graphTabsContent">
</div>
</div>
Now, I want in every tab it to show me one chart that I code. For example, in my HTML O have this code that create one piechart and one combochart in my page but it is not in my tabs.
This may help you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
Home </li>
<li>Tutorials</li>
<li>Practice Editor </li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
- See more at: http://www.w3resource.com/twitter-bootstrap/nav-tabs-and-pills-tutorial.php#sthash.a9cP7aDC.dpuf
Source: W3Resource
I'm trying to implement Fuelux's wizard feature and have hit a brick wall. I am simply trying to achieve a working replica of the live example but keep receiving the error in my console:
Uncaught TypeError: Object [object Object] has no method 'wizard'
I am finding a lot of the documentation a little overwhelming and would appreciate some clarity on the subject in plain [or plainer] English.
My markup is:
<!DOCTYPE html>
<html class="no-js fuelux">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>E-Learning</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fuelux.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div id="my-wizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">
...
</div>
<div class="step-pane" id="step2">
...
</div>
<div class="step-pane" id="step3">
...
</div>
</div>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/require.js"></script>
<script src="js/wizard.js"></script>
<script>
$(document).ready(function(){
$('#my-wizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#my-wizard').on('changed', function(e, data) {
console.log('changed');
});
$('#my-wizard').on('finished', function(e, data) {
console.log('finished');
});
$('.btn-prev').on('click', function() {
console.log('prev');
$('#my-wizard').wizard('previous');
});
$('.btn-next').on('click', function() {
console.log('next');
$('#my-wizard').wizard('next','foo');
});
});
</script>
</body>
</html>
So close! For both the CSS and JS since Fuel UX includes Bootstrap you simply include Fuel UX in place of Boostrap and you get all of Bootstrap plus Fuel UX:
<link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css">
<script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script>
Your template looks great and with just the above modifications, plus removing a couple of lines that were causing double-processing, this works just as expected. See the full example here:
Gist: https://gist.github.com/adamalex/5412079
Live example: http://bl.ocks.org/adamalex/5412079