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>
Related
I am working on a chrome extension and I want to be able to have a response when the 'done' button is clicked, the settings window should close and the user would receive a message :
Here is the code for the settings page:
settings.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/settings.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>SSS- Settings</title>
</head>
<body>
<div class="wrapper">
<div class="card">
<div class="card__header">
<div class="toolbar">
<div class="toolbar__item toolbar__item--close"></div>
<div class="toolbar__item toolbar__item--min"></div>
<div class="toolbar__item toolbar__item--max"></div>
.....................................................(other settings)
<br>
<div class="buttons"><button onclick="closeFunction()" id = "save_settings" class="button">Done</button></div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/settings.js"></script>
<script>
function closeFunction() {
close();
}
</script>
</body>
</html>
settings.js
console.clear();
toggle = document.querySelectorAll('.toggle');
const fno = document.getElementById('fake-news-opt');
const hso = document.getElementById('hate-speech-opt');
const cbo = document.getElementById('click-baits-opt');
const pwo = document.getElementById('profanity-words-opt');
const save_button = document.getElementById('save_settings');
.............
So from my understanding, you are trying to close the window when the "DONE" button is clicked, if so:
You can remove the onclick attribute from the button tag and attach an EventListener to the button itself like so:
save_button.addEventListener("click", () => {
close();
}
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.
I am making a simple page where you enter the name of the city into a text box and it displays basic info about them (address, name etc). I am having trouble with Google Places API. This is what I have so far
restaurants.html
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Restaurant Search</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<script src="functions.js"></script>
<script>
$(document).ready(function(){
getRestaurants();
});
</script>
</head>
<body>
<div class="main">
<form>
Enter city name: <input id="city" type="text" name="cityname"><input id="btn" type="submit" value="Search">
</form>
<div id="error">
The search field cannot be left empty!
</div>
</div>
<div id="header">
</div>
<div id="items">
</div>
</body>
</html>
functions.js
function getRestaurants(){
$("#btn").click(function(){
if ($("#city").val().length==0){
$("#error").css("display","block");
}else{
$("#error").css("display","none");
var cityname = $("#city").val();
var search_string = "https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+in+"+cityname+"&sensor=false&key=KEYKEYKEY";
$.ajax({
url: search_string
}).done( function ( data ) {
res ="";
var obj = jQuery.parseJSON(data);
$(obj).each(function(){
res+=this.name;
});
$("#items").text(res);
});
}
});
}
style.css has only this in it
#error{
display: none;
}
What is the problem?
See this link
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
Just copy the code and customized according to your need
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>
I have a JQuery Mobile application and I seem to have several locations in the app where the JavaScript doesn't execute as expected. In short, I have a "Dashboard" page. If the user hasn't logged in, I use the "changePage" function to send them back to the Login page.
If I attempt to login directly via the Login page, everything works as expected. However, if I am redirected to the Login page from the Dashboard page, I see a JavaScript error that says: "loginButton_Click is not defined". To provide more insight, here is my code:
Dashboard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dashboardPage" data-role="page">
<div data-role="header">
<a id="logoutButton" href="#" class="ui-btn-left jqm-home">Logout</a>
<h1>My App</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><span id="greeting"></span></li>
</ul><br />
</div>
</div>
</body>
</html>
Shared.js
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
login.html
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/shared.js"></script>
<script src="/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="loginPage" data-role="page">
<div data-role="header"><h1>App Name</h1></div>
<div data-role="content">
<label for="usernameTextBox">Username</label>
<input id="usernameTextBox" type="text" /><br />
<label for="passwordTextBox">Password</label>
<input id="passwordTextBox" type="password" /><br />
<input type="button" value="Login" onclick="return loginButton_Click();" />
</div>
</div>
<script type="text/javascript">
function loginButton_Click() {
$.mobile.changePage("/dashboard.html", { transition: "slide" });
}
</script>
</body>
</html>
I feel like there is something that I don't understand regarding how JavaScript gets into the DOM. What am I doing wrong?
In shared.js add $(...) wrapper:
$(function(){
$("#dashboardPage").live("pagecreate", function () {
});
$("#dashboardPage").live("pagebeforeshow", function () {
});
$("#dashboardPage").live("pageshow", function () {
var user = window.localStorage.getItem("user");
if (user == null) {
$.mobile.changePage("/login.html", { transition: "slide" });
}
});
});