Jquery - Selecting a item by ID not working - javascript

I'm doing an ionic (angular) app and I have the following simple code at the head of one of my templates:
<script>
$(document).ready(function(){
alert($('#amountID').attr('id'));
});
</script>
</head>
...
<label class="aquitext item item-input" id="amountID">
I used to have the tradicional javascript onclick("blablabla") and it worked to a point but I decided to shift it to jquery and now I'm so stuck I had to remove and simplify it to this point. I've tried multiple permutations of this, including using angular's .element but I keep getting "undefined" on the alert. What am I doing wrong?
(No I don't get any errors on the console)
Edit: It seems it might be related to the fact that I have afterwards an ionic slide-box, thought I have little clue as to how to circumvent it. For now, I removed the slider boxes. Seems to have "fixed" it.
the full structure is, after the script (I trimmed some of the stuff out):
</script>
</head>
<body>
<ion-view>
<ion-content>
<ion-slide-box>
<ion-slide>
</ion-slide>
<ion-slide>
<div class="subtitle">blabla</div>
<form name="newaquisition">
<label class="aquitext item item-input" id="amountID">
<input ng-model='newaquisubmission.amount' type='number' placeholder='aquisition value' required>
</label>
</form>
</ion-slide>
</ion-slide-box>
</ion-view>
</ion-content>
</body>
</html>

Is the label in your HTML or is this part of some template and is added to the DOM by angular?
If you run the JS in the console, does it work? Then it's most likely a timing-problem. $(document).ready seems to be to early.
try $scope.init in your angular-controller

There doesn't seem to be anything wrong with your code; It should work.
Despite that, try creating a variable within the function and then using that variable as the value of alert. For instance,
var x = $('#amountID').attr('id');
alert(x);
If that doesn't work. You probably have an error elsewhere in your code.
Have you referenced a jQuery library (<script src="jquery-2.1.4.min.js"></script>)?

Seem that you don't push the jquery source, this code is correct:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($('#amountID').attr('id'));
});
</script>
</head>
<body>
<label class="aquitext item item-input" id="amountID">
</body>
</html>

Related

<script> not working with AngularJS

I have the following code inside the view(partial) of AngularJS
<%# page
pageEncoding="UTF-8"%>
<p>
some text
</p>
<script>
$(document).ready(function(){ alert("WORKS"); })
</script>
I need it here and not in controller as later I want to implement Google Map.
However the alert is not triggered. What may be the reason?
Relative part in the output HTML
<div id="partials">
<!-- ngView: --><div data-ng-view="" class="ng-scope">
<p class="ng-scope">
text
</p>
<script type="text/javascript" class="ng-scope">
$(function(){ alert("WORKS"); });
</script></div>
</div>
jQuery Library must stand before AngularJS library in declaration. This has solved my problem

How can I reuse HTML code blocks using a javascript function?

I'm trying to use a same HTML block in several places and pages, while keeping in low number of lines of code and a low redundancy.
Basically, I need something that is similar to a function that when it's called, it will just load a HTML code into the page - this will be done on page load, so no click or other actions that needs to trigger it.
I don't want to use PHP include.
Example:
<div class="x">
<div class="y">
<div class="z"></div>
</div>
</div>
I'll need to use the same class X into 100+ pages and it will have the same content.
What's the best method to insert just the X class and the inside content to be added automatically?
You could put your code in a different .html file and load it with .load() http://api.jquery.com/load/
$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid
main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main page</title>
<sript src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('#commonsection').load('reusablefile.htm');
// which is eqvivalent to:
//
// $.ajax({
// url: 'reusablefile.htm',
// dataType: 'html',
// success: function(data){
// $('#commonsection').html(data);
// }
// });
});
</script>
</head>
<body>
<div id="commonsection"></div>
</body>
</html>
reusablefile.html:
<script>
(function($){ //separate scope to keep everything "private" for each module
//do additional javascript if required
})(jQuery);
</script>
<p>...Some non-trivial content...</p>
If you have any javascript frameworks in use they usually have an option as well.
AngularJS uses directives to handle repetitive html code.
https://docs.angularjs.org/guide/directive
Also possibly repeat question of:
How to reuse the html code in every html page?
Try this if you don't mind use the dirty way. :)
$(".reuseTarget").html($(".x").text());
$(".reuseTarget").html($(".x").text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x">
<div class="y">
<div class="z">aabb</div>
</div>
</div>
<div class="reuseTarget">
</div>

Javascript isn't executing when including html-template

Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.

http.get not working in angularjs?

I've got the following code:
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name">{{$http.get('https://api.themoviedb.org/3/movie/now_playing?api_key=b4e5192d902f5add71f4a431c004d734').success(successCallback);}}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
$http.get('https://api.themoviedb.org/3/movie/now_playing?api_key=b4e5192d902f5add71f4a431c004d734').success(successCallback: 'JSON_CALLBACK');
</script>
</body>
</html>
But it is not returning anything, how do I make it so I can at least just display everything in that API? I would like to assign it to an variable and be able to explode it for manipulation.
You need to first define an app and a controller, and call $http inside it. In your HTML you can display the data that gets passed into the callback. Something like this:
<!DOCTYPE html>
<html>
<body>
<div ng-app="App" ng-controller="Ctrl">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{ data }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
angular.module('App', []).
controller('Ctrl', function($scope, $http) {
$http.get('https://api.themoviedb.org/3/movie/now_playing?api_key=b4e5192d902f5add71f4a431c004d734').success(function(data) {
$scope.data = data;
});
});
</script>
</body>
</html>
You have a syntax error in your $http.get call. The options inside of .success need to be surrounded with curly braces, as they're an object.
Also, you're trying to use $http before it's been defined.
The http call should be made in a controller. Angular services are not accessible directly in the html or immediately in a script block. I'm sure if you checked the console window you would see at least a couple of errors in what you have put here.
Basically when the data is returned the controller can assign the returned data onto a variable on the scope.
I'm going to guess your new to angular in which case there are many great resources online to guide you though making these first basic steps. Checkout https://egghead.io/articles/new-to-angularjs-start-learning-here.

Simple impress.js does not work

Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16.
You're calling impress before loading the library, try switching the order of your script tags:
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
Alternatively use a ready handler function to initialise your page scripts, like window.onload or jquery's ready(). For more on this see this question.
Also, going by the impress examples, in the simplest case each step of the presentation should be an element inside the #impress element with a class name of step.

Categories