I am new to Ractive.js and just playing around with it. I am trying to build a simple app, but strangely, it's not working on my pc and I am getting an error in console "Could not find template element with id #template", where #template refers to the id assigned to script tag. Nothing gets rendered on my browser. However, the same code is running fine in JSFiddle. Can someone explain what is happening here?
Here is the fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Weather Details</title>
<meta name="description" content="Get weather for your city">
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="weather.css">
<script src='https://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="weather.js"></script>
</head>
<body>
<div id="main" class="page-container">
<script id='template' type='text/ractive'>
<div class="weather-widget">
<div class="input-group">
<label>City Name</label>
<input type="text" class="form-control" placeholder="Enter City Name" />
</div>
<div class="input-group">
<label>Recent Searches</label>
<select>
<option>Select from recent searches</option>
</select>
</div>
<div class="weather-details">
<table>
<tbody>
<tr>
<th>Wind</th>
<td>{{country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
</div>
</body>
</html>
Code in weather.js:
var ractive = new Ractive({
el: '#main',
template: '#template',
data: {
country: 'London'
}
});
At the time weather.js executes, the element hasn't yet been created. You could either move the <script src='weather.js'></script> tag to the bottom of the page (inside <body>, after the topmost <div> containing the template element the script refers to), or add a defer attribute: <script defer src='weather.js'></script>.
Related
In my application I'm making a get request through Angular's http service and in the view looping over the returned data to show an unordered list. But the problem is even though data is available after the get request , its not getting dispplyed on the page. Seems to be a CSS style problem, but don't know how to fix it. I want to show the unorder list within a bootstrap panel as a body.
Below is the angular piece of code inside the controlller for setting up the data
$http.get('/messages').success(function(data) {
console.log("Messages are "+data);
$scope.records=data;
});
Here is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Bootstrap News plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<script src="/libs/js/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="/libs/js/newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<br/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-list-alt"></span><b> What you wanna do before you die ...</b>
</div>
<div ng-cloak class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item" ng-repeat="item in records">
<table cellpadding="4">
<tr>
<td >
<img class="img-circle" width="60"
ng-src="/images/{{($index+11) % 10}}.png"/>
</td>
<td ng-cloak>
{{$index+1}}. {{item.username}}
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1 ">
<form name="messageForm" novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<div class="form-group">
<textarea required ng-model="formModel.message"
style="background-color:#ffffe6;border:double 4px orange;border-radius: 0.5em;" rows="3" cols="50" id="message" placeholder="Write your message and press enter.."> </textarea>
<button class="btn btn-primary" type="submit">Shoot it</button>
</div>
<p ng-cloak class="help-block" ng-show="formModel.nameError">Looks like you forgot to mention your name !!!</p>
<p ng-cloak class="help-block" ng-show="formModel.messageEmpty">Really you don't wanna do anything before you die !!! </p>
<p ng-cloak class="help-block" ng-show="formModel.messageTooLong">You are trying to do too many things buddy, just 150 characters !!! </p>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 12,
autoplay: true,
pauseOnHover:true,
direction: 'up',
newsTickerInterval: 4000,
onToDo: function () {
//console.log(this);
}
});
});
</script>
</body>
</html>
When I check through chrome dev tool, data is present in that unordered list, data is present but somehow not getting displayed properly within bootstrap panel.
See this image
I noticed there is one undefined element at the bottom of unordered list while checking through dev tools. Any idea whats going wrong?
The panel body is empty
Why is the [ul] tag style set to "height:0px; overflow-y:hidden"? -- this would hide your content
you could also move the ng-cloak to the div.panel-body to the div.row and remove it from the child td
--
Delay bootstrapNews binding
$(function(){
if ($('.panel-body[ng-cloak]').length > 0)
return window.setTimeout(arguments.callee, 10);
$(".demo1").bootstrapNews({...});
});
I think you should write a directive for getting a callback when ng-repeat is done and that is a better solution instead of any 'delay' tactics.
Might help you to go through how I have done in my code- used a directive to emit a render finished event:
dashboard.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
In the controller I keep the event listener:
$scope.$on('dataLoaded', function(ngRepeatFinishedEvent) {
// your code to add bootstrapNews binding
});
and in the html side, I call them like this:
<div class="add_tenant_name" ng-repeat="tenant in tenants" on-finish-render="dataLoaded">
// more divs
</div>
I am trying to load MDL Switch through external file but it's not working.
Here is my main page code : index.php
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="material.min.css">
</head>
<body>
Load
<div class="demo-switch">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Bluetooth</span>
</label>
</div>
<script src="js/material.min.js"></script>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$.getScript("js/material.min.js").done(function(){
$(document).on("click",".lo",function(){
$('.demo-switch').load("new_test.php");
});
});
});
</script>
</body>
</html>
Here is file new_test.php
<div class="demo-switch">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
<input type="checkbox" id="switch-2" class="mdl-switch__input" />
<span class="mdl-switch__label">Bluetooth</span>
</label>
</div>
Here are the result after i press load button:
possible js is not working properly but i can't find a way to fix this.
please help
You Will need to call componentHandler.upgradeAllRegistered() for dynamic dom.
Add componentHandler.upgradeAllRegistered() at the very bottom of your view (new_test.php, in this case).
after watching this presentation (https://www.youtube.com/watch?v=ImR0zo1tA_I) I wanted to try Angular JS. I copied the code, exactly what was on the screen, but i doesn't work. I tried it in my browser, in my page (http://thecodemaker.com.pl), I was doing research about AngularJS but it still doesn`t want to work.
Code :
<!DOCTYPE html>
<html ng-app="basicApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<form>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title"><b>ToDo List</b></h1>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "todo in todos">
<div class="checkbox">
<label>
<input type="checkbox"> {{todo}}
</label>
<button type="button" class="close">×</button>
</div>
</li>
</ul>
</div>
<div class="form-group has-feedback">
<label class="control-label invisible">Enter Task</label>
<input type="text" class="form-control text-primary"></input>
<button type="button" class="close form-control-feedback text-muted">±</button>
</div>
<div class="alert alert-info">Enter new task to get started</div>
<div class="alert alert-danger">Maximum number of tasks allowed : 5</div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
</body>
</html>
Any ideas what is wrong ?
There seems to be a lot wrong with your snippet. For one, your submit/add button is not bound to an event listener or anything so it's not doing anything that you'd want (like adding an item to the property on your controller's $scope).
Check out the Todo example on Angular's official website, it's more up to date.
https://angularjs.org/ (scroll down).
Here's the video for it: https://www.youtube.com/watch?v=WuiHuZq_cg4
There is an error : Bootstrap's JavaScript requires jQuery, which means you need to add jQuery library to your project, required by bootstrap.js
Starting with Angular 1.3.x, you can no longer declare a controller as a generic global function on window. Controllers must now use the more current form of component declaration.
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
In the HTML, change ng-app="" to ng-app="basicApp.
This is my first.php page html part. I have a form including a div and a submit button. I want when button clicked, open a new page (second.php) and display contents of div(id=orderList)
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<h3 align="center">Sipariş Listesi</h3>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
This is javascript part;
$("#orderForm").submit(function() {
var content = $('#orderList').html();
console.log(content); //(no problem everything is ok)
$('#confirmForm').val(content);
var content2 = $('#confirmForm').html();
console.log(content2); //(it is null)
});
And this is second.php where I want to display the contents in the div(id=confirmForm)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<META name=viewport content="width=1024, initial-scale=1">
<META http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Content-language" CONTENT="tr">
<link href="shift.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="product.css">
</head>
<body>
<div id="confirmForm"> </div>
</body>
</html>
It doesn't work, what should I change?
If $('#confirmForm') is not an input item you cant access it using $('#confirmForm').val();
your Form is missing method attribute, add POST in method by default its GET
<form id="orderForm" method="post" action="second.php">
Add a <textarea> in first.php inside orderForm to hold the content of #ordelist using jquery and in second page you can get it using $_POST['confirmForm'];
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10"></textarea>
in second page you do this
<div id="confirmForm"> <?php echo $_POST['confirmForm'] ?> </div>
You're trying to put the content in #confirmForm, which isn't present in the first file.
There is no need for JavaScript here. Grab the content of the div using $_['post']
Try this its working :
first.php
<html>
<head>
</head>
<form id="orderForm" action="second.php">
<div class="col-md-5" id="orderList">
<textarea name="confirmForm" id="confirmForm" cols="30" rows="10">Sipari Listesi</textarea>
</div>
<div>
<button type="submit" id="firstConfirmButton" class="btn btn-primary btn-lg">Onayla</button>
</div>
</form>
</html>
second.php
<html>
<body>
<?php
echo $_REQUEST[confirmForm];
?>
</body>
</html>
In addition to what Saqueib said, I think you'll need to make a jQuery change too. I think you're looking for the html() method, not val() because it looks like you're trying to change the displayed HTML, right?
Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'