I am new to JQuery Mobile and Javascript in general, so I am trying to learn it by doing a project. I am using JQuery mobile to design a web app and I require a few text inputs. In the JQuery documentation, there are text input examples that have a blue halo when they are clicked, and when the mouse moves away, the blue halo vanishes as well. I copied the provided code, but my text box does not have the same effect. I then tried inspecting the elements in the documentation and I realized that when the text box was clicked, the text input element gained an attribute called "ui-focus". How is this done?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile.structure-1.4.0.min.css" />
</head>
<body style class="ui-mobile-viewport ui-overlay-a">
<div role="main" class="ui-content">
<label for="basic">Email:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
<label for="basic">Password:</label>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
<input type="text" name="name" id="basic" value=""/>
</div>
</div>
</body>
You have copied rendered HTML code. JQM wraps input with a div to give it a new look. You don't have to add any extra code, only input tag, JQM will take care of the rest.
<input type="text" />
Related
I took a bootstrap and jQuery datepicker online since it was easier for me, it worked perfectly on localhost, but now after uploading it online, it doesn't work, I click on the input, and usually a calendar would pop up, now I just have a plain text input.
This is the full file where I use the datepicker:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="css/reservation.css" rel="stylesheet">
</head>
<body>
<section class="book-a-table">
<h1 class="title">Book</h1>
<form action="choose-time.php" class="contact-form row">
<div class="form-field col-lg-6">
<input id="name" class="input-text js-input" name="name" type="text" required>
<label class="label" for="name">Ime</label>
</div>
<div class="form-field col-lg-6 ">
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">
<input type='text'class="form-control input-text js-input" id="date" name="date"/>
</span>
<input class="submit-btn" name="submit" type="submit" value="Choose time >">
</form>
</section>
I had some script for disabling dates, I removed it but I still had no changes, tried to modify it, no changes, I only get a blank input text form.
It might be blocked by your server since it violates the Content Security Policy directive.
Check whether it shows in Browser Console (Ctrl + Shift + i).
Best way is to download Bootstrap files (e.g. https://getbootstrap.com/docs/4.3/getting-started/download/), upload it to your server and add this in your html
<link rel="stylesheet" href="./css/bootstrap.min.css">
I'm trying to use datetimepicker by Tempus Dominus but whenever I try to pick a date from mobile the default keyboard opens and it hides the modal. I would like to prevent it from opening.
I already tried some workarounds I found online but I didn't get it to work. I also would like someone to explain how these workarounds work and why (because I did not understand them) before I apply them.
I tried to readonly the input field but then the modal does not open. I tried adding a second button and hide it (with display none) then trigger a click event on the readonly field and triggering the hidden button but that did not work either. I also tried adding a keypress event to prevent default but that only disables keyboard input on computers.
Javascript code for the events:
$('#datetime').keypress(function(event) {
event.preventDefault();
return false;
});
HTML code:
<div class="input-group date" data-target-input="nearest">
<input name="datetime" id="datetime" type="text" class="form-control datetimepicker-input" data-target="#datetime">
<div class="input-group-append" data-target="#datetime" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
I expect the modal from mobile to pop up but instead both modal and keyboard opens up every time I need to enter a datetime.
Use the attribute readonly for avoiding mobile keyboard.
$('#datetime').datetimepicker({
ignoreReadonly: true,
});
input#datetime {
pointer-events: none;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
</head>
<body>
<div class="input-group date" data-target-input="nearest">
<input name="datetime" id="datetime" type="text" class="form-control datetimepicker-input" data-target="#datetime" readonly="readonly">
<div class="input-group-append" data-target="#datetime" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
</body>
you have an option to ignore the readonly input and open datepicker on button click.
If you're using Tempus Dominus, you can set the option focusOnShow to false. Source
$('#datetimepicker1').datetimepicker({
focusOnShow: false,
});
I am coding an experiment, and I need to have a disabled button activated only after clicking/dragging the bootstrap slider.
I have tried click, onmousedown, and value of the slider is different from 50 (the initial value set) functions, but they did not work. However, since it is my first time coding in JS and jQuery ever, I might have used them not 100% properly.
my code:
<br><br>
<!-- Format of the slider plus one stylesheet on the top of the page -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" />
<br><br>
<!-- Button -->
<input class="MyButton" type="button" value="Next" title="Next Page" tabindex="200" onclick="window.location.href='example.html'" disabled="disabled">
This community discussions have already helped me a dozen of times, I greatly appreciate your time! Let me know if the question is not clear enough.
Use the slideStop event:
$("#slider").on("slideStop", function() {
$(".MyButton").prop("disabled", null);
});
Updated fiddle
Source
I am using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
I try to get the value of the at the bottom pasted html code who stands on the first html page. I have another html page, which should be generated with the button "onclick". More precisely the code should create buttons in the next page.
Case1: radio-choice-1 is selected - it should create 4 buttons.
Case2: radio-choice-2 is selected - it should create 4 or 9 buttons.
Case3: radio-choice-3 is selected - it should create 9 or 16 buttons.
Case4: radio-choice-4 is selected - it should create 16 buttons.
I dont know how to get the value of the selected radio buttons then generate buttons on another page.
I actually have a bit of script(game.js):
$(document).ready(function(){
$('#radio-button-value').click(function(){
$("input[name='radio-button-gruppe']:checked".val());
});
});
first html page
<html>
<head>
<meta charset="utf-8" />
<title>newgame</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!-- Einstellungen zur Defintion als WebApp -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="game.js"></script>
</head>
<body>
<div data-role="main" class="ui-content">
<form>
<fieldset data-role="controlgroup">
<legend>Choose a mode:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">easy</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
<label for="radio-choice-2">medium</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
<label for="radio-choice-3">difficult</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
<label for="radio-choice-4">hard</label>
</fieldset>
<input type="button" id="radio-button-value" name="game" value="create game" class="button" data-theme="b"/>
</form>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
I'm not sure what sort of solution you're looking for. But if you don't want to use something more deeply rooted, like the $_SESSION variable in php, you're probably looking for something like cookies. Here's a great page on cookies.
Also check out this tutorial from htmlgoodies.com on variable passing with javascript for some other ideas.
If you're okay with cookies, you can pretty much use what you already have, just clean up the jquery a little.
$(document).ready(function(){
$('#radio-button-value').click(function(){
var difficulty = $("input[name='radio-choice']:checked").val();
document.cookie = "gameDifficulty=" + difficulty + ";path=/";
});
});
See fiddle