I have problem with jQuery change connected with select tag. It fire twice, second time returning empty array. jQuery or JS is NOT included twice, already checked.
I would be very grateful for any help in this area :)
JS
$(".select-car").on("change", function(){
var cars = [];
var carType = $(this).val();
$.getJSON("js/cars.json", function(data) {
$.each(data, function(i, item) {
// console.log(item);
if(item.type === carType) {
cars.push(item);
}
});
});
console.log(cars);
});
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<title>Wyporzyczalnia samochodów</title>
</head>
<body>
<main class="container main-container">
<div class="row select-car">
<div class="col-md-12 header">
<h2 class="page-header">Wybierz typ samochodu</h2>
<form action="">
<select name="cartype" class="form-control select-car">
<option value="" selected="true" disabled>---</option>
<option value="camper">Camper</option>
<option value="limuzyna">Limuzyna</option>
<option value="osobowy">Osobowy</option>
</select>
</form>
</div>
</div> <!-- Select car -->
<div class="row avaible-cars">
</div>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You have two classes .select-car
<div class="row select-car">
and in
<select name="cartype" class="form-control select-car">
Which is causing this to be called twice. And hence binded the change event twice.
Related
I am trying to bind data from angularjs to HTML page but it scope of the data is not showing on the html page.
(function(){
angular.module('app',[])
.controller('appController',appController)
function appController($http, $scope){
var $ctrl = this;
this.searchLocations = ['Hamburg','Leipzig','Berlin','Düsseldorf',"Frankfurt am Main","Köln","München","Münster, Westfalen","Stuttgart"];
this.searchWords = ['SAP','MCSA','Online Marketing','Projektmanagement','SAP CO',"SAP FI","Bilanzbuchhalter","ITIL","PRINCE2","Six Sigma","SCRUM"];
console.log(this.searchWords)
$ngOninit();
function $ngOninit(){
}
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Line Graph</title>
</head>
<body ng-app="app" ng-controller="appController as ctrl" >
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 div-left col-md-6 division ">
<div class="form-group">
<label for="sel1">Select <b>SearchWord</b> to create line-graph:</label>
<select class="form-control" ng-model="selectedWord">
<option ng-repeat="word in ctrl.searchWords" value="{{word}}" >{{word}}</option>
</select>
</div>
</div>
{{ctrl.searchLocations}}
</div>
</div>
</body>
</html>
Here i want searchWord and searchLocation on options of select element. But bindings of data is not available on html html page.
use your ng-model="selectedWord" instead {{ctrl.searchLocations}} to view the selected option from dropdown.
(function(){
angular.module('app',[])
.controller('appController',appController)
function appController($http, $scope){
var $ctrl = this;
this.searchLocations = ['Hamburg','Leipzig','Berlin','Düsseldorf',"Frankfurt am Main","Köln","München","Münster, Westfalen","Stuttgart"];
this.searchWords = ['SAP','MCSA','Online Marketing','Projektmanagement','SAP CO',"SAP FI","Bilanzbuchhalter","ITIL","PRINCE2","Six Sigma","SCRUM"];
console.log(this.searchWords)
$ngOninit();
function $ngOninit(){
}
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Line Graph</title>
</head>
<body ng-app="app" ng-controller="appController as ctrl" >
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 div-left col-md-6 division ">
<div class="form-group">
<label for="sel1">Select <b>SearchWord</b> to create line-graph:</label>
<select class="form-control" ng-model="selectedWord">
<option ng-repeat="word in ctrl.searchWords" value="{{word}}" >{{word}}</option>
</select>
</div>
</div>
{{selectedWord}} selectedWord
</div>
</div>
</body>
</html>
I'm having an issue with ng-repeat on an array of objects:
dummy.json
[
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
]
I can get the number of objects({{factions.length}} or individual item {{factions[0].name}}) and print them individually, but the ng-repeat doesn't create multiple options in the select. I see some other versions of the same question, but they aren't resolved.
I'm including the controller in the body. The scope variable is available, but I'm missing something... Please take a look. Thanks in advance.
tree.js
'use strict';
angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];
//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat"faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>
You are missing the = character between ng-repeat attribute and its value.
'use strict';
angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];
//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">
<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat="faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>
I have the following code for a widget. The widget is a searchpod. The file is searchPod.html
<select class="search-by" id="searchBy">
<option value="search_by">Search By</option>
<option value="lastname">Employee Last Name</option>
<option value="ssn">Employee SSN</option>
<option value="eeid">Employee EEID</option>
<option value="claim_number">Claim Number</option>
<option value="leave_number">Leave Number</option>
</select>
I have another file called SPTest.js which tries to use that select above. This function is inside a test function since we are also using QUnit to do unit tests.
define(
['../Widget/SearchPod/searchPod'],
function () {
function checkSearchBy()
{
test('check if select has "Search By" text', function () {
alert($("#searchBy option[value='search_by']").text());
alert($('#searchBy23').find('option:selected').text());
var expected = "Search By";
deepEqual($("#searchBy option[value='search_by']").text(), expected,
"We expect dropdown text to display 'Search By' by default");
});
}
return {
runny: runny,
checkSearchBy: checkSearchBy,
};
I can't figure out why my .js file can't find the select by its id.
I'll put the HTML output below for those who'd like to see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLR Javascript Unit Test</title>
<link rel="stylesheet" href="Style/qunit.css">
<link rel="stylesheet" href="Style/cupertino/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" href="Style/jquery.jscrollpane.css" />
<link rel="stylesheet" href="Style/jquery.dataTables.css" />
<link rel="stylesheet" href="Style/Report.css" />
<link rel="stylesheet" href="Style/GlobalReportStyles_10_css.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Scripts/Lib/qunit.js"></script>
<script type="text/javascript">
QUnit.config.autostart = false;
</script>
<script data-main="Scripts/App" src="Scripts/Lib/require.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Test Results<button id="test">Test DOM</button></li>
<li>Report Viewer<button id="btnSPTest">
Test Search Pod</button></li>
<li>Transactional</li>
</ul>
<div id="tabs-1">
Testing is fun!
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
<div id="tabs-2">
<iframe width="100%" height="600px" src="ViewReportPage.aspx"
id="viewreport"></iframe>
</div>
<div id="tabs-3">
<iframe width="100%" height="600px" src="BuildReport.aspx" id=""></iframe>
</div>
</div>
</body>
</html>
Any explanation would help. Thank you.
I can't seem to find a way to get the javascript to take the inputted name I put in the box to make it appear where the paragraph is as output when the onblur event happens.
<!DOCTYPE html>
<!--
INFX1606 - Starter kit for Assignment 5.
-->
<head>
<meta charset="utf-8">
<meta name="author" content="Joey Fultz">
<meta name="description" content="Assignment 5">
<title>First Swing at Javascript</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div class="all">
<div class="title">
<h2>Javascript</h2>
</div>
<div>
<h3>Name and Banner</h3>
</div>
<span>
<label for="namebanner">Name:</label>
<input type="text" id="namebanner" name="namefield" onblur="showname() value">
</span>
<p id="p1"></p>
</div>
</body>
</html>
function showname() {
var x = document.getElementById("namebanner");
x.value = x.value.to("p1");
}
I want to know why my javascript is wrong and why it won't show my name when the onblur event happens.
This is quite easily done with JQuery
<input type="text" id="namebanner" name="namefield" />
<script>
$(function(){
$('#namebanner').blur(function(){
$('#p1').text( $(this).val() );
});
});
</script>
or in plain javascript
<script>
function showname(){
var x = document.getElementById("namebanner");
document.getElementById("p1").innerHTML = x.value;
}
</script>
The code at the bottom of the page dynamically populates a jQuery Mobile select menu. In addition to populating the menu I'd like to bind data to each menu item and assign a click handler. This is attempted with the following line.
menuItem.bind("click",{testdata: "test"}, clickHandler); $("#testMenu").append(menuItem); }
This approach has worked with jQuery Mobile lists in the past. Can anybody see what's going wrong?
Full Code:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fbObj1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css "/>
<link rel="stylesheet " href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css " />
</head>
<body>
<script>
function clickHandler(e) {
alert("click ");
alert(e.testdata);
};
$(document).ready(function() {
var int = 0;
for (int=0;int<=4;int=int+1)
{
var menuItem = $("<option id=''></option>");
menuItem.html("Item "+int); menuItem.attr('id',int);
//DATA BIND LINE
menuItem.bind("click",{testdata: "test"}, clickHandler);
//menuItem.on("click", {testdata: "test"}, clickHandler);
$("#testMenu").append(menuItem);
}
$("#testMenu").selectmenu('refresh');
$("#testMenu").selectmenu('open'); });
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none">
<select name="testMenu" id="testMenu" data-native-menu="false"></select>
</div>
</div>
</div>
</body>
change
menuItem.bind
to
$("#testMenu").bind
Edit :
function clickHandler(e) {
e.preventDefault();
alert($(this).val());
}
// i forgot to mentioned that for a "select menu" you should use "change" event instead of a "click"
$("#testMenu").on("change",
{testdata: "test"},
clickHandler);
});
Edit 2:
var i = 0;
function clickHandler(e) {
e.preventDefault();
$(":selected",$(this)).html(i).val(i).parent().selectmenu('refresh');
alert($(":selected",$(this)).val());
i++;
}
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href=http://jquerymobile.com/test/docs/buttons/_assets/css/jqm-docs.css"/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/buttons/css/themes/default/jquery.mobile.css" />
</head>
<body>
<script>
$(document).ready(function() {
function clickHandler(e) {
var listItem = $(":selected",$(this));
alert(listItem.data("test").first);
alert(listItem.data("test").second);
};
var int = 0;
for (int=0;int<=4;int=int+1)
{
var menuItem = $("<option id=''></option>");
menuItem.html("Item "+int);
menuItem.attr('id',int);
menuItem.data("test", { first: int, second: "hello" })
$("#testMenu").append(menuItem);
}
$("#testMenu").on("change",{testdata: "test"}, clickHandler);
$("#testMenu").selectmenu('refresh');
$("#testMenu").selectmenu('open');
});
</script>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
<div data-role="fieldcontain" id="testMenuFC" style="DISPLAY: none">
<select name="testMenu" id="testMenu" data-native-menu="false">
</select>
</div>