Recently, i have been writing a single page app using backbone. When i try to create a animation like throwing a card but i can't use jquery to do this. I found that after backbone view call this render(). I try to select DOM element by jquery and modify it. It didn't change anything? Does anybody know this?
<!DOCTYPE html>
<head>
<style type="text/css">
#logo {
position: relative;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/template">
<image id="card" src='10.png'/>
<br/>
<input type="button" id="btn" value="di chuyển"/>
</script>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="app.js"></script>
</body>
</html>
(function($){
var aniView = Backbone.View.extend({
template: _.template($('#template').html()),
events:{
"mouseover input[type=button]":"moveCard"
},
moveCard:function () {
alert('di chuyển');
move('#card')
.add('margin-left', 100)
.end();
},
render:function () {
$('#container').html(this.template());
}
});
var a = new aniView();
a.render();
})(jQuery);
Thanks!
Related
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
I am working with a book and in the book I am learning jquery's slideDown/Up method. I ran the code originally on my main web page and it will not work. So I just created a simple YES.html(seen above) to make sure I was coding it correctly. However it will not slide up or down image. I don't know what I am missing for this to work. I am a beginner so I could be missing something simple. Please explain your answer/solution in steps if possible or maybe guide me to a web page tutorial of some sort. Thanks.
are you looking for something like this?
$('#make_visible').on('click', function (e) {
/* method 1 */
/*if ($('#dramatic').css('display') === 'none') {
$('#dramatic').slideDown();
$(this).html('Hide');
}
else {
$('#dramatic').slideUp();
$(this).html('show');
}*/
/* method 2 */
$('#dramatic').slideToggle();
this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="make_visible">HIDE</button>
<br />
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />
You didn't import jQuery, to use jQuery UI you have to import jQuery first.
Think this helps:
<!DOCTYPE html>
<html>
<head>
<title>YES</title>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
</head>
<body>
<img id="dramatic" src="statefair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
<style>
img#dramatic {
display: none;
}
</style>
<script>
$("button#make_visible").on("click", function() {
$("img#dramatic").slideDown();
});
</script>
</body>
</html>
jQquery UI needs jQuery to function, so you should include that first. I used jQuery 1.3.2 as that seem to be the best fit for jQuery UI 1.8.
The book might be a bit dated as the latest version is 1.12.
I also changed the "onclick" code a bit:
$( "button#make_visible" ).click(function() {
$("img#dramatic").slideDown();
});
img#dramatic { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<body>
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px">
<br>
<button id="make_visible">HIDE</button>
</body>
I'm getting started with backbone.js and i want to build a template, containing only a html button, with my model attributes. So I defined a template in my html page as below:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
</body>
</html>
and I'm trying to build my template in my view:
var Bouton_View= Backbone.View.extend({
view_template: _.template( $('#button_template').html() ),
events:{
'click':'onClick'
},
initialize: function(){
this.$el=('#here');
},
render: function(){
this.$el.html(this.view_template(this.model.attributes));
return this;
},
onClick: function(){
var increment=0;
increment=this.Model.get("number_of_click")+1;
this.Model.set({"text":increment});
this.Model.set({"number_of_click":increment});
this.render();
}
});
but when I run the page in the browser this error message show up:
I'm pretty sure the js file is not wrong because I've try this with another html file and it worked. So what is wrong with my template? thanks in advance
Why so?
Spoiler: the underscore templating engine is fine in this case.
This example's problem is that the code which describes your Bouton_View, which probably lies here:
<script src="backbone_test5.js"></script>
is executed before the DOM parser reaches
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
element. This can be described as
Load backbone_test5.js file and execute its contents
Execute _.template( $('#button_template').html() )
Search DOM for element with id="button_template"
None found
Execute .html() function on a non-existent $ element => this results in null
Execute _.template(null) => this gives you the error you mentioned
How to fix?
There are several ways to do that.
HTML-only. Re-order the code so that DOM elements exist when queried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Backbone test 5</title>
</head>
<body>
<div id="here"></div>
<script type="text/template" id ="button_template">
<button type="button" id="my_button"><%= text %></button>
</script>
<script src="underscore.js"></script>
<script src="jquery.js"></script>
<script src="backbone.js"></script>
<script src="backbone_test5.js"></script>
</body>
</html>
With some js-code. You can wrap the contents of the backbone_test5.js file with the $(...) so that it only executes once the DOM content is ready:
$(function () {
var Bouton_View = Backbone.View.extend({ /* ... */ });
});
I try to run some examples from Jquery site and some videos i' ve seen, but it seems like i can't execute them properly. Here's my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btnclick").click(function() {
$("#divpopup").dialog({
title: "blabla",
width: 430,
height: 200,
modal: true,
buttons: {
Close:
function() {
$(this).dialog('close');
}
}
});
});
})
</script>
</head>
<body>
<div id="divpopup" style="display:none">
blablablabla
</div>
<button type="button" id="btnclick">Click me</button>
</body>
</html>
I can't find what's wrong, the only thing it may be is that i haven't input an important library or something. Every one of my explorers shows me the button, but clicking it doesn't trigger the modal window. Any ideas?
Thank you
Jquery library references should be in below order.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
I'm trying to do a very simple hello world with Backbone. After reading docs and examples I think this should work, but doesn't do anything when I click:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
events: {
'click #new': 'createNew'
},
//CREATE
createNew: function(){
alert('yea');
}
});
var app_view = new AppView();
</script>
</head>
<body>
new
</body>
</html>
Am I missing something? What could be wrong?
You have two problems here:
A Backbone view is tied to a specific DOM element. You have to attach your view to the DOM before it can respond to events.
The DOM may not be ready when your script executes, you have to wrap the view creation code with $(document).ready.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
events: {
// the element IS the link, you don't have to specify its id there
'click': 'createNew'
},
//CREATE
createNew: function(){
alert('yea');
}
});
$(document).ready(function() {
// attach the view to the existing a element
var app_view = new AppView({
el: '#new'
});
});
</script>
</head>
<body>
new
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>RJI Events</title>
<link rel="stylesheet" type="text/css" href="stylesheets/scrollbar.css">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
<style type="text/css">
#import url("http://www.google.com/uds/css/gsearch.css");
#import url("gmlocalsearch.css");
</style>
<script type="text/javascript" src="jslibs/cubiq-iscroll/iscroll.js"></script>
<script src="jslibs/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jslibs/jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="jslibs/cubiq-iscroll/iscroll.js" type="text/javascript"></script>
<script src="jslibs/phonegap-1.0.0.js" type="text/javascript"></script>
<script src="jslibs/handlebars.1.0.0.beta.3.js" type="text/javascript"></script>
<script src="app/start.js" type="text/javascript"></script>
<script>
var myScroll;
function OnLoad() {
//GSearch.execute("google");
//I feel like it should go here
}
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCrw28V3lIOj9Rav9_7fVWrB2sKUzoqKkc"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.95, -92.32), 15);
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));
}
}
GSearch.setOnLoadCallback(initialize);
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="header">Event Name</div>
<div id="wrapper">
<div id="scroller">
<div id="map_canvas" style="width:99%;height:500px"></div>
</div>
</div>
<div id="footer">
<div id="footerInfo">
<div id="footerEvents-active"><a class = "footer-link" href = "index.php">Events</a></div>
<div class="footerSpacer">|</div>
<div id="footerRJI"><a class = "footer-link" href = "aboutRJI.html">RJI</a></div>
<div class="footerSpacer">|</div>
<div id="footerAbout"><a class = "footer-link" href = "about-us">About</a></div>
</div>
</div>
</body>
</html>
Im sort of new to stack overflow, so sorry if im not specific enough. Im using the localsearch from here http://code.google.com/apis/ajax/playground/#localsearch and would like to have it have a default search value, and search it on load like in this example http://code.google.com/apis/ajax/playground/#center_localsearch. Thank you, i appreciate all of the help. Also, this is for a mobile phone app, although if it works in the browser it will work on the phone