I'm trying to inject into the header of a page(JQM) a title by using Javascript.
I also want to enable a Subscription feature so I need to insert the button via Javascript aswell. However, whenever I inject it, it's getting messy.
I want the button to align with the title, and I want the title in the middle of the header.
Here's a picture to demonstrate how it looks right now
and I want it to align perfectly, with no line-breaks at all(like it has now)
Im using these lines to insert the button and the title(JS):
document.getElementById("forum_name").innerHTML = fName;
document.getElementById("subscribe_btn").innerHTML = " <a href='#' class='ui-btn'>Unsubscribe</a>";
And Im using these lines in the HTML File:
<div data-role="header"><span style="display:inline;" id="subscribe_btn"></span><center><div id="forum_name" style="display:inline-block"></div></center></div>
With JQM you can do it following way:
var subscribeText = "Subscribe", unsubscribeText = "Unsubscribe";
function changeSubscription() {
var choiche = $('input[name=rg-subscription]:checked'),
value = choiche.val(),
label = choiche.parent().text();
$("#toggleSubscription").toggleClass("ui-screen-hidden", value == "no-subscription");
if (value == "no-subscription") {
$("#toggleSubscription").text(subscribeText);
}
var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
$("#" + pageId + " [data-role='header'] h1").text(label);
}
$(document).on("pagecreate", "#page-1", function(e) {
$("input[name='rg-subscription']").change(changeSubscription);
$("#toggleSubscription").on("vclick", function(e) {
$(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
});
$("#injectButton").click(injectButton);
});
$(document).on("pagebeforeshow", "#page-1", function(e, ui) {
changeSubscription();
});
function injectButton() {
$("#toggleSubscription").off();
var html = [
'<button id="toggleSubscription" ',
'class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all">',
'Subscribe',
'</button>'
].join("");
$("#toggleSubscription").remove();
$("#page-1 [data-role='header']").prepend(html).enhanceWithin();
$("#toggleSubscription").on("vclick", function(e) {
$(this).text($(this).text() === subscribeText ? unsubscribeText : subscribeText);
});
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-1" data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div role="main" class="ui-content" id="page-1-content">
<fieldset data-role="controlgroup" data-mini="true">
<input name="rg-subscription" id="rc-subscription-0" value="no-subscription" checked="checked" type="radio">
<label for="rc-subscription-0">no subscription</label>
<input name="rg-subscription" id="rc-subscription-1" value="alt-binaries-mp3" type="radio">
<label for="rc-subscription-1">alt.binaries.mp3</label>
<input name="rg-subscription" id="rc-subscription-2" value="alt-binaries-linux" type="radio">
<label for="rc-subscription-2">alt.binaries.linux</label>
<input name="rg-subscription" id="rc-subscription-3" value="alt-binaries-games" type="radio">
<label for="rc-subscription-3">alt.binaries.games</label>
</fieldset>
<button id="injectButton" class="ui-btn ui-btn-inline ui-mini ui-corner-all">Inject "Subscribe" Button</button>
</div>
</div>
</body>
</html>
Related
I'm trying to make a menu for a Memory Game type game. I created the html page that contains a form consisting of 2 radio buttons with different values. On the submit input I called my function from the javascript file. And in the js file I created an if else function to redirect me, but it doesn't work.
Code:
`
let button = document.getElementById("button");
let solo = document.getElementById("solo");
let multiplayer = document.getElementById("multiplayer");
let level1 = document.getElementById("3x4");
let level2 = document.getElementById("4x4");
let radio1 = document.getElementsByName("radio1");
let radio2 = document.getElementsByName("radio2");
// button.addEventListener("click", gameMenu);
function gameMenu() {
if ((radio1.value = "solo") && (radio2.value = "3x4")) {
// location.href = "sg_34.html";
console.log("solo/3x4");
}
else if ((radio1.value = "solo") && (radio2.value = "4x4")) {
// location.href = 'sg-44.html';
console.log("solo/4x4");
}
else if ((radio1.value = "multiplayer") && (radio2.value = "3x4")) {
// location.href = 'mp-34.html';
console.log("mp/3x4");
}
else if ((radio1.value = "multiplayer") && (radio2.value = "4x4")) {
// location.href = "mp-44.html";
console.log("mp/4x4");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="./css/styleIndex.css">
<title>Memorizer JS</title>
</head>
<body>
<div class="container">
<h1>Memorizer JS</h1>
<form class="form menu">
<section class="game cf">
<h2>Choose game mode:</h2>
<input type="radio" name="radio1" id="solo" value="solo">
<label class="solo-label four col" for="solo">Solo</label>
<input type="radio" name="radio1" id="multiplayer" value="multiplayer">
<label class="multiplayer-label four col" for="multiplayer">With a friend</label>
</section>
<section class="level cf">
<h2>Level:</h2>
<input type="radio" name="radio2" id="3x4" value="3x4">
<label class="3x4-label four col" for="3x4">3x4</label>
<input type="radio" name="radio2" id="4x4" value="4x4">
<label class="4x4-label four col" for="4x4">4x4</label>
</section>
<input class="submit" id="button" type="submit" value="Play" onclick="gameMenu()">
</form>
</div>
<script src="./scripts/index.js"></script>
</body>
</html>
`
Code pen: https://codepen.io/sebastian-mihai-ciuc/pen/BaVagNM
I created the conditions in an if else structure to check the values in the radio buttons. I expected it to redirect me to other pages or at least display the cases in the console.log.
You should remove form tags for not reloading the window
The jquery code to allow a form and button to show entered data as a list is not functioning. The code is also written to delete the text when it is clicked on - unable to check if this is also working. Any suggestions on where the error may be found?
$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("<div class='item'>" + toAdd + "</div>");
});
$('.list').click(function(){
});
});
$(document).on('click', '.item', function(){
$(this).remove();
});
html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- <script src="js_lib/jquery-ui.js"></script>-->
<script src="jquery-3.5.1.min.js"></script>
<title>A Simple Notes List</title>
<h1><span>A Simple Notes List</span></h1>
<div id="canvas" class="container group">
<div id="primaryContent" class="group">
<p> </p>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button" value="button">Add!</div>
<br/>
<div class="list"></div>
<p>Click item on list to remove item from list</p>
</div>
I want to get an answer from the php file if I click on one of the radio buttons, but if I use the radio button, the alert appers in an endless loop. Why? And how do I get the alert only once?
I try it with only a „normal“ button, then it works:
If I click on the button, the ajax responds the values in the alert once.
Thank you
<!doctype html>
<html lang="de">
<head>
<title>test</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container">
<br>
<br>
<button type="button" class="btn btn-dark" id="go">Go</button>
<div class="row">
<div class="btn-group" id="auswahl" data-toggle="buttons">
<label class="btn btn-outline-primary active">
<input type="radio" name="aktionswahl" value="alles" checked autocomplete="off"> Alles
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="aktionswahl" value="blue" autocomplete="off"> blue
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="aktionswahl" value="red" autocomplete="off"> red
</label>
</div>
</div>
</div><!--Container-->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">></script>
<script>
$(function() {
$("input[name=aktionswahl]").focus(function () {
//var auswahl = this.value;
var sqlwhere = "where aktion=4 and Datum >= '2017-12-05' and Datum < '2017-12-07'";
ask(sqlwhere);
});
});
$(function() {
$("#go").click(function () {
var sqlwhere = "where aktion=4 and Datum >= '2017-12-05' and Datum < '2017-12-07'";
ask(sqlwhere);
});
});
function ask(sqlwhere) {
$.ajax({
type: 'POST',
url: 'read_sql.php',
data: { sqlwhere:sqlwhere }
}).done(function(data) { alert(data); });
return false;
}
</script>
</body>
</html>
As the alert appears, the radio button will lose focus. As you close the alert, the focus will return which triggers the alert which causes the radio button to lose focus but when you close that alert ...
Use console.log instead
Try this, your code is right just need one change...
write return false; immediately after alert.
means...function(data) { alert(data); return false; }
I am new to the Jquery Mobile technology and I must admit there are some little things in the behavior of this framework that I do not understand yet. I am developing a tablet application using Cordova 2.9.1 and JQuery Mobile 1.2.0 (my version of the regular JQuery is 1.8.2).
Basically, I have a multi-pages html file (2 pages). On the two of them, I use a dumb form and a dumb button to validate the inputs.
HTML code - index.html
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>MyApp</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="index">
<div data-role="content">
<form name="login_form">
<div align="center">
<input type="text" name="username" id="username"/>
<input type="password" name="password" id="password"/>
<br/>
<button data-role="button" data-inline="true" data-theme="c" class="connection_button">Se connecter</button>
<br/><br/>
<a class="force-reload" href="#mdp_oublie" data-role="button" data-inline="true" data-theme="c" data-transition="slide">Mot de passe oublié</a>
</div>
</form>
</div>
</div>
<div data-role="page" data-theme="c" id="mdp_oublie">
<div data-role="content">
<form name="email_form">
<div align="center">
<input type="email" name="email" id="email"/>
<button data-role="button" data-inline="true" data-theme="c" class="email_button" onclick="email_recovering(this)">Valider</button>
</div>
</form>
</div>
</div>
</body>
I had some issues to trigger the button click event. After a few researches, I have come to use this kind of method in my index.js file.
Javascript code - index.js
$('[data-role="page"]').live('pageshow', function ()
{
$(document).on('click', '.connection_button', function (e)
{
if(e.handled !== true)
{
var username = $('#username').val();
var password = $('#password').val();
if(username == "a" && password == "b")
alert("OK");
else
alert("KO");
e.handled = true;
}
});
});
The problem is that when the "Se Connecter "button is clicked, the function is executed the way it should, but JQuery then redirects me to the index page (the first one). I do not understand why...
My two questions are :
Is the way I call my connection_button function a good one ? I tried several times the $(document).ready() {}); method and it does not work for me. Do you have any better ?
Do you have any idea about the redirection to index page when the function has been called ?
I hope that I have been as clear as possible.
Thank you.
The right think to do for buttons (at least for jQuery Mobile 1.2.0) is to use <a href="#"> links:
Se connecter
in this way there is no redirection to other pages. I have fixed your JavaScript and created a JSFiddle with your code:
$(document).on("pageshow", "[data-role=page]", function(event, ui)
{
$(document).on("click", "#connection_button", function(event)
{
var username = $('#username').val();
var password = $('#password').val();
if(username == "a" && password == "b")
alert("OK");
else
alert("KO");
});
$(document).on("click", "#email_button", function(event)
{
email_recovering(this);
});
});
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
I'm new to JavaScript and JQuery, and I'm trying to figure out why my function doesn't get called when I press the button. My only clue is that the Firefox Console is showing TypeError: document.getElementById(...) is null. I found this example, which says "document.write will overwrite the entire DOM if it's called after the document has finished being parsed" and that's why it's happening. I took a look at my code, and I moved the button into my div tag and it's still happening. I also tried moving the button into it's own div tags. Compiler didn't seem to like syntax when I tried adding html tags where the button is. I'm not sure what I'm supposed to do to fix this.
I'm following this example for the function call on button click. Hopefully I'm applying it ok to my project.
This is my code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Michele Project</title>
<link href="css/skins/polaris/polaris.css" rel="stylesheet">
<link href="css/skins/all.css" rel="stylesheet">
<link href="css/demo/css/custom.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script src="js/icheck.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.input').iCheck({
checkboxClass:'icheckbox_polaris',
radioClass:'iradio_polaris',
increaseArea:'10%'
});
});
</script>
<script type="text/javascript">
// Returns an array with values of the selected (checked) checkboxes in "frm"
function getSelectedChbox(frm) {
// JavaScript & jQuery Course - http://coursesweb.net/javascript/
var selchbox = []; // array that will store the value of selected checkboxes
// gets all the input tags in frm, and their number
var inpfields = frm.getElementsByTagName('input');
var nr_inpfields = inpfields.length;
// traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox
for(var i=0; i<nr_inpfields; i++) {
if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true)
selchbox.push(inpfields[i].value);
}
return selchbox;
}
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>
<style type="text/css">
ul {list-style-type: none}
img {padding-right: 20px; float:left}
#infolist {width:500px}
</style>
</head>
<body>
<form>
<div class="skin skin-line">
<div class="arrows">
<div class="top" data-to="skin-flat"></div>
<div class="bottom" data-to="skin-polaris"></div>
</div>
</div>
<div class="skin skin-polaris">
<div class="arrows">
<div class="top" data-to="skin-line"></div>
<div class="bottom" data-to="skin-futurico"></div>
</div>
<h3>Select Items for Column Headings</h3>
<dl class="clear">
<dd class="selected">
<div class="skin-section">
<h4>Live</h4>
<ul class="list">
<li>
<input tabindex="21" type="checkbox" id="polaris-checkbox-1">
<label for="polaris-checkbox-1">Checkbox 1</label>
</li>
<li>
<input tabindex="22" type="checkbox" id="polaris-checkbox-2" checked>
<label for="polaris-checkbox-2">Checkbox 2</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-3" >
<label for="polaris-checkbox-3">Checkbox 3</label>
</li>
<li>
<input type="checkbox" id="polaris-checkbox-4" checked >
<label for="polaris-checkbox-4">Checkbox 4</label>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('.skin-polaris input').iCheck({
checkboxClass: 'icheckbox_polaris',
radioClass: 'iradio_polaris',
increaseArea: '20%'
});
});
</script>
//$('#checkbox').prop('checked')
</dd>
</dl>
</div>
<div id="loading">
<input type="button" value="Click" id="btntest" />
</div>
</form>
</body>
</html>
The issue is you assign the click handler before the element is available in the DOM. To resolve, you should wrap it in a DOM ready function:
$(function(){
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
});
Note: $(function(){ ... }); is a shortcut for $(document).ready(function(){ ... });
You're running document.getElementById('btntest') before that element exists. Put this script after your button on the page, not before it:
<script>
document.getElementById('btntest').onclick = function() {
var selchb = getSelectedChbox(this.form);
alert(selchb);
}
</script>