Dynamically Adding an MDL Text Input via JavaScript, not via AJAX - javascript

Dynamically adding a text input via AJAX and using the componentHandler.upgradeDom() works well.
However, when I clone a text input using JavaScript alone, that function doesn't help.
<html>
<head>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-amber.min.css">
</head>
<body>
<div id="formElements">
<div class="formElementGroup">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="Q1">Question</label><input type="text" class="mdl-textfield__input" id="Q1" name="Q1[]">
</div>
</div>
<div id="Qs1"></div>
<div align="left">
<a id="Btn-addQuestion" class="Btn-addQuestion">
Add another text field
</a>
</div>
</div>
<script>
$(document).ready(function(){
$("#formElements").on("click", ".Btn-addQuestion", function(){
clonedTxtBox = $("#Q1").parents(".formElementGroup").clone(true);
clonedTxtBox.appendTo("#Qs1");
setTimeout(function(){
componentHandler.upgradeDom();
}, 1000);
});
});
</script>
</body>
</html>
I expect that the label of the cloned text input move upwards and become smaller as it is designed to behave. However, only the original one does-- the cloned one doesn't; it rather sticks over the text-input even if the user types something inside.
Any help would be appreciated.
JS Fiddle:
https://jsfiddle.net/jp26f0ts/

I found the solution somewhere online.
Before upgrading the DOM, I should have added this:
clonedTxtBox.find('.mdl-textfield').removeClass('is-upgraded').removeAttr('data-upgraded');

Related

JavaScript runs in Firefox Scratchpad, but not when loaded with the HTML

My question is similar to others, but as the answers vary so much depending on how the code is first setup, I still haven't found a suitable answer to my question. Let me take you through the steps I take to try to run my JavaScript.
I open a new tab in my browser, press "Ctrl + O" to bring up the file explorer, then open the html file that links to the JavaScript. The code just never executes from the file; it'll only run if I run it from Scratchpad.
How do I get my JavaScript to run from the "script.js" file without having to copy it into Scratchpad?
function autocomplete(inp) {
if (inp) {
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
console.log("We have input! - " + inp.value);
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
console.log("We have keydown! - " + e.keyCode);
});
}
}
// Run autocomplete when there is imput
autocomplete(document.getElementById("myInput"));
<head>
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="text/javascript"></script>
<title>Autocomplete Test</title>
</head>
<body>
<div>
<div>
<h2>Input Tester</h2>
<p>Enter text into the field to test</p>
<form class="autocomplete" autocomplete="off">
<div class="wrapper">
<input id="myInput" type="text" name="myCountry" placeholder=" Search Hotels">
<!-- Trigger/Open The Modal -->
<button type="button">Search</button>
</div>
</form>
</div>
</div>
</body>
Note: This runs without issue on Stackoverflow. The error shows best when loading from a file you made (in a code editor of your choice), into your browser. I'm using the Atom code editor, in case anyone finds it relevant.
Script tags block by default; the browser waits for the script to finish executing before continuing to parse more HTML below it. So, at the time <script src="script.js"... runs, the document has not been populated yet.
Either:
(1) Give the script tag a defer attribute (preferred):
<script src="script.js" defer type="text/javascript"></script>
(2) Wrap the whole script in a DOMContentLoaded listener:
window.addEventListener('DOMContentLoaded', () => {
autocomplete(document.getElementById("myInput"));
});
(3) Move your script to the end of the body:
</div>
<script src="script.js" type="text/javascript"></script>
</body>
It is a better practice to place your link to JavaScript files just before closing the <body> tag so that You have your page loaded and then you can then get reference to it from your JavaScript.
Try this,
<head>
<link rel="stylesheet" href="styles.css">
<title>Autocomplete Test</title>
</head>
<body>
<div>
<div>
<h2>Input Tester</h2>
<p>Enter text into the field to test</p>
<form class="autocomplete" autocomplete="off">
<div class="wrapper">
<input id="myInput" type="text" name="myCountry" placeholder=" Search Hotels">
<!-- Trigger/Open The Modal -->
<button type="button">Search</button>
</div>
</form>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

Loading View into <div>

Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>

Can I get timepicker to fire on a click in the input field?

I have spent HOURS trying to get any new timepicker to work (previously used https://github.com/weareoutman/clockpicker which was great but always went off screen on mobile phones).
Most seem to be for Bootstrap 2.x and I cannot get any to work. Finally got https://github.com/Eonasdan/bootstrap-datetimepicker going (not great on a mobile but...)
My problem is I have lots of tiny input fields for dates so I need to get rid of the glyphicon and just onclick on the input field itself.
I have included my little test page in case anyone else is struggling. I did not realize that I needed moment.js and that cost me a very irritating 30 minutes.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/beta022/bootstrap/css/bootstrap-datetimepicker.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/moment.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="/beta022/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<form class="form">
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false, minuteStepping:5,
});
});
</script>
</div>
</div>
</html>
EDIT: This is beyond weird. Got rid of the glyphicon. Put the other span around the input. Works but with a big ugly border. Tried disabling the input-group-addon class by changing it to adxxdon and worked perfectly (well no rounded corners). I then tried without that class and it stopped working. So looks like some sort of regex within span is going on.
I am well at the end of my JS/CSS ability. If anyone has a tidier solution I would be grateful.
It's easy. Just refer to the documentation :)
http://eonasdan.github.io/bootstrap-datetimepicker/#example6
According to the documentation this should be no big deal.
Just use one property in javascript as below
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
pickDate: false,
minuteStepping:5,
allowInputToggle: true
});
});
</script>
allowInputToggle: true //if this property is set true, this will allow opening
of datetimepicker dropdown on both icon click as well
as on input field click.
Use
allowInputToggle : true;
Default: false
If true, the picker will show on textbox focus and icon click when
used in a button group.

JScrollpane will not style scrollbar

I have a div that I need to be able to scroll. Unfortunately the default browsers are very ugly, an ordeal I am trying to use JScrollpane to get around.
It doesn't seem to cooperate with me however: I have added the necessary links, along with JQuery ofcourse
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
Which are corresponding to my file structure, and have called the script using
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
$('.work-description').jScrollPane();
});
</script>
My div also seems to be in place:
<div class="workdescription" id="Plumbing">
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
With a CSS value of overflow:auto;
I've also tried overflow:hidden; but that hasn't worked either. I am still stuck with the ugly scrollbars.
I've received no JScript errors. What's up with this?
I've used jScrollPane before and you basically need a container, a paragraph which will be used as a wrapper, and then a call to jScrollPane which you also need to reinitialize if the container that will have a scrollbar is from an ajax response.
Based from your code I'll assume that your html look something like this:
<div class="workdescription" id="Plumbing">
<p>
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
</p>
</div>
Then your selector, just include the script after the html so you won't need to wrap your script on window.load().
<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>
The class name is "workdescription" in you HTML, but you used ".work-description" as your selector. It seems that's the problem ;)

Showing a dialog from a separate html file and passing it a parameter

I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.

Categories

Resources