I am developing my first AMP site and would like to know if it's possible to show/hide multiple divs on:change based on user selection, like so.
<div class="ampstart-input" id="index">
<select name="product_type" id="product_type" required>
<option value="type_one">Type one</option>
<option value="type_two">Type two</option>
<option value="type_three">Type three</option>
<option value="type_four">Type four</option>
</select>
</div>
<div class="loan" id="type_one" hidden">Content for product one</div>
<div class="loan" id="type_two" hidden">Content for product two</div>
<div class="loan" id="type_three" hidden">Content for product three</div>
<div class="loan" id="type_four" hidden">Content for product four</div>
When the user changes the select field, I'd like to be able to show the selected product, and hide the others (and possibly hide the original select #index). This is familiar and simple in JavaScript, but I can't find any way to achieve it in AMP. Any help would be VERY appreciated. Thank you.
Thanks for your help, this jsbin resolves it. Thanks!
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>My AMP Page</title>
<link rel="canonical" href="self.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
<select on="change:AMP.setState({ activeDiv: event.value })">
<option value=0></option>
<option value=1>Div 1</option>
<option value=2>Div 2</option>
</select>
<div hidden [hidden]="activeDiv != 1">
Div 1
</div>
<div hidden [hidden]="activeDiv != 2">
Div 2
</div>
</body>
</html>
https://jsbin.com/joxufigovo/edit?html,output
Yes You can do it with simple jquery. try it will work.
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div class="ampstart-input" id="index">
<select name="product_type" id="product_type">
<option value="type_one">Type one</option>
<option value="type_two">Type two</option>
<option value="type_three">Type three</option>
<option value="type_four">Type four</option>
</select>
</div>
<div class="loan" id="type_one" >Content for product one</div>
<div class="loan" id="type_two">Content for product two</div>
<div class="loan" id="type_three">Content for product three</div>
<div class="loan" id="type_four">Content for product four</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
alert("hello");
$('#product_type').on('change', function() {
$('.loan').each(function(i, obj) {
$(this).css('display','none');
});
var select_val = $("#product_type option:selected").val();
$("#"+select_val ).css('display','block');
});
});
</script>
</html>
Related
I have an old project and I want to use Vue to make some fields of one of the forms be shown or hidden, I'm importing Vue from CDN and initializing a new Vue app, I've tried setting an id to the body of the project, but it does not work, then I created a div inside the body section wrapping all existing code, but the result is all the content is gone and gives a blank page. If i initialize Vue with the form id now the form is blank.
I've checked that Vue is imported adding a console.log in created lifecycle and it works, the problem is old content of page is missing when I wrap it with id specified in Vue initialization.
Here's my code:
const vueApp = new Vue({
el: '#my-form',
data() {
return {
selectedProductType: "Producto 3x2 o 2x1",
}
},
created() {
console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
},
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
<p>A LOT OF CONTENT HERE</p>
<form action="" method="POST" class="form" id="my-form" data-action="create">
<p>A LOT OF CONTENT HERE</p>
<label for="name">Tipo de producto</label>
<select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
<option value="" disabled selected>Selecciona...</option>
<option value="Producto con descuento">Producto con descuento</option>
<option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
<option value="Producto en combo">Producto en combo</option>
<option value="Producto no promocional">Producto no promocional</option>
</select>
<br>
{{ selectedProductType }}
</form>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</body>
</html>
I've tried wrapping parts of code with different div IDs but it never works.
I want to know if it is possible to use Vue in my use case and how to achieve it.
Thanks.
EDIT 1:
I've added some code to current snippet, but I dont't know why it works in the snippet and not in my working code.
It's missing the creation of the Vue component, and the div with the initialisation element id and the vue components tags.
The initialisation part of Vue looks good to me, just make sure to happen after the components are defined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
<p>A LOT OF CONTENT HERE</p>
<div id="my-form">
<my-form></my-form>
</div>
<script>
Vue.component('my-form', {
template:`
<form action="" method="POST" class="form" id="my-form" data-action="create">
<p>A LOT OF CONTENT HERE</p>
<label for="name">Tipo de producto</label>
<select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
<option value="" disabled selected>Selecciona...</option>
<option value="Producto con descuento">Producto con descuento</option>
<option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
<option value="Producto en combo">Producto en combo</option>
<option value="Producto no promocional">Producto no promocional</option>
</select>
<br>
{{ selectedProductType }}
</form>`,
data() {
return {
selectedProductType: "Producto 3x2 o 2x1",
}
}
})
const vueApp = new Vue({
el: '#my-form',
created(){
console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
}
})
</script>
</body>
</html>
this should work!
data(){return{}} is needed when you are creating Vue.component, in case of new Vue you need data:{}
Try data:{} instead of data(){return{}} like this:
const vueApp = new Vue({
el: '#my-form',
data: {
selectedProductType: "Producto 3x2 o 2x1"
}
})
It looks like I just needed to set Vue in head section instead of the end of body tag, I added Vue from CDN:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
And then, I initilized it after all components were loaded in the bottom of body tag.
So I am trying to dynamically (using javascript) add an input field in a form by clicking the button "Add". The semantic-ui dropdown css styling to the first field since it is not added with javascript. However, after I press add, a new field created by the css styling is not applied.
Here is a link to a demo.
https://jsfiddle.net/traorefly/h83245ju/#&togetherjs=QidJs02nya
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>TOPS</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<body>
<div class="ui text container" style="margin-top: 20%">
<form action="" class="ui form">
<div class="field" id="timekeyword">
<label>Segment Start Time/Keywords</label>
<div class="ui action input">
<input type="text" placeholder="Ex: 08:23" name="cut"> <select id="keywords" multiple="multiple" class="ui fluid search dropdown" name="video[keywords][]">
<option value="Absolute">Absolute</option>
<option value="Absolute Two">Absolute Two</option>
</select>
<div class="ui positive button" id="addField">Add</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.js"></script>
<script >
$('.dropdown').dropdown();
$('#addField').click(function(){
var html = "<div class=\"field\">" +
" <div class=\"ui action input\">" +
" <input type=\"text\" placeholder=\"Ex: 08:23\" name=\"cut\">" +
"<select id=\"keywords\" multiple=\"multiple\" class=\"ui fluid search dropdown\" name=\"video[keywords][]\"><option value=\"Absolute\">Absolute</option>" +
"<option value=\"Absolute Convergence\">Absolute Convergence</option>" +
"<option value=\"Absolute Maximum\">Absolute Maximum</option>" +
" </div>" +
" </div>"
$('#timekeyword').after(html)
})
</script>
</body>
</html>
fiddle: https://jsfiddle.net/8pcfz2a7/
you should call $('.dropdown').dropdown(); for new elements as well.
so add $('.dropdown').dropdown(); to end of your click handler.
you can also put this in a function called update_ui, for reuse code.
Context: We can't use the full semantic ui library due to security reason. So I want to try the individual semantic ui dropdown module, because it is very good solution for a lot of data entry scenarios.
The following code works when I reference the full library, but doesn't work when I reference the individual module.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>
<select class="ui dropdown">
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I dug into the problem, and find the generated html is like the following:
<div class="ui dropdown selection" tabindex="0">
<select>
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>
The result is a big UI box like control showing "Email" and when you click on it, nothing happens.
I think the problem maybe the "selection" class added to the end of the top level div. Just my guess.
Could anyone point out where I did wrong? Really want to get this working. Love the semantic ui dropdown solution.
found the cause of this problem.
semantic-ui-dropdown has an dependency on semantic-ui-transition...
just reference semantic-ui-transition before semantic-ui-dropdown will do.
just add this to the end script in your index.html
<script>
function callDropdown(){
$('.ui.dropdown')
.dropdown();
}
setTimeout(callDropdown, 3000);
This is the chunk of my code
<div class="form-control">
<div class="input-group">
<span class="input-group-addon">
<input type="text" id = "fromuser"></input>
<select id="combobox">
<option value="">Select one...</option>
<option value="abc">abc</option>
<option value="cde">cde</option>
<option value="xyz">xyz</option>
</select>
</span>
<button type="submit">Submit</button>
</div>
</div>
What I am trying to achieve is that the User can either Type the value or select from the dropdown list. The challenge here is that the Input from Keyboard will be different from that given in dropdown. For example, the dropdown has three character string options but the user can type a number such as 10, 20, 30 etc.
Is this type of input allowed possible? If so, can someone help me.
The Closest I could come to my problem is by dropping the select and use autocomplete . The full test code is as follows:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"abc",
"def",
"xyz"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
function myFunction(){
var NameValue = document.forms["FormName"]["tags"].value;
window.alert(NameValue);
}
</script>
</head>
<body>
<form name="FormName" method="post" />
<div class="ui-widget" >
<input name= "tags" id="tags" type="text" onchange="myFunction()"/>
<button name="btn-signup" type="submit" value="Submit">Submit</button>
</div>
</form>
</body>
</html>
I know this is the final solution but maybe a way ahead.
I am using materialize framework for ui design. If you look at my code , the dropdown doesn't show. Please help.
<div class="input-field col s3">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">USD</option>
<option value="2">CAD</option>
<option value="3">HDK</option>
</select>
<label>Select Currency</label>
</div>
You must initialize the select in your JavaScript. Put the following code just before closing your bodytag and it should work fine.
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
First you must include file jquery in your html before your file materialize.js, then you must initialize the select element. In addition, you will need a separate call for any dynamically generated select elements your page generates.
Modify your code, see: Select Materialize
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').material_select();
});
</script>
I have added complete code for materialize select in one html file. I have added JavaScript code bottom of the body which should be your problem for not working the code. When you create separate flies, you should add JavaScript and css files' paths to your html code relevant order.
<!DOCTYPE html>
<html>
<head>
<title>Select</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body class="row">
<!-- your code start -->
<div class="input-field col s11 m11 l11">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">USD</option>
<option value="2">CAD</option>
<option value="3">HDK</option>
</select>
<label>Select Currency</label>
</div>
<!-- your code end -->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
When you add external libraries or files to your html file the order is important.
You must be sure that you initialize the select with jquery or JS.
Copy paste this line in your code in the document ready:
$('select').material_select();