I'm using https://seiyria.com/bootstrap-slider/ in order to have slider, but I'm not able to understand where is my fault in this code:
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1"></div>
<script>
function ap() {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>'
</script>
I wish to press a button in order to show a slider and to remove with the other button.
<html>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/css/bootstrap-slider.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.3.1/bootstrap-slider.min.js"></script>
<button type="button" onclick="ap()">ap!</button>
<button type="button" onclick="remove()">remove!</button>
<div id="id1">
</div>
<div id="x1"><span id="ex18-label-1" class="hidden">Example slider label</span> <input id="ex19" type="text" data-provide="slider" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels="["short", "medium", "long"]" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="3" data-slider-tooltip="hide" /></div>
</body>
</html>
<script>
$("#x1").hide();
function ap()
{
console.log("Append");
$("#x1").show();
}
function remove()
{
console.log("Remove");
$("#x1").hide();
}
</script>
Just hide and show the slider using javascript.
This should work,you forgot the t parameter in ap
function ap(t) {
console.log("Append");
$("#id1").append(t);
}
function remove() {
console.log("Remove");
$("#x1").remove();
}
t = '<div id="x1">' +
'<span id="ex18-label-1" class="hidden">Example slider label</span> ' +
'<input id="ex19" type="text" ' +
'data-provide="slider" ' +
'data-slider-ticks="[1, 2, 3]" ' +
'data-slider-ticks-labels="["short", "medium", "long"]" ' +
'data-slider-min="1" ' +
'data-slider-max="3" ' +
'data-slider-step="1" ' +
'data-slider-value="3" ' +
'data-slider-tooltip="hide" /></div>';
$("#show").click(function() {
ap(t);
});
$("#hide").click(function() {
remove();
});
function get_data(name) {
name.value = 'test';
}
<button id="show">show</button>
<button id="hide">hide</button>
<div id="id1"></div>
Related
i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.
the j query function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("#TextBoxContainer");
div.append('<div>' + GetDynamicTextBox("") + '</div>');
});
$('form').on('submit', function (e) {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
$("#<%= hdnfldVariable.ClientID %>").val(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<select name="Sexe" id="Sexe" class="field-select"></select>';
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />';
}
the html:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<button id="btnGet" runat="server" onserverclick="Submit_Click">Submit</button>
<asp:HiddenField ID="hdnfldVariable" runat="server" />
Try the below snippet. To grab the values of select on submit you can use:
$('#mySelect').val();
$("#getSelect").click(function(e) {
e.preventDefault();
var select = '<select name = "test" id="mySelect">Select</select>';
if ($('#selectholder').empty()) {
$('#selectholder').append(select);
}
for (i = 0; i < 10; i++) {
$('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getSelect">Display select</div>
<div id="selectholder"></div>
I am trying to run the following code:
var mainWeather = {
init: function() {
$("#submitWeather").click(function() {
return mainWeather.getWeather();
});
},
getWeather: function() {
$.get('http://api.openweathermap.org/data/2.5/weather?q=' + $("#cityInput").val() + "," + $("#countryInput").val() + "&APPID=myweatherkey_removed", function(data) {
var json = {
json: JSON.stringify(data),
delay: 1
};
echo(json);
});
},
// Prints result from the weatherapi, receiving as param an object
createWeatherWidg: function(data) {
return "<div class='pressure'> <p>Temperature: " + (data.main.temp - 273.15).toFixed(2) + " C</p></div>" +
"<div class='description'> <p>Title: " + data.weather[0].main + "</p></div>" +
"<div class='description'> <p>Description: " + data.weather[0].description + "</p></div>" +
"<div class='wind'> <p>Wind Speed: " + data.wind.speed + "</p></div>" +
"<div class='humidity'> <p>Humidity: " + data.main.humidity + "%</p></div>" +
"<div class='pressure'> <p>Pressure: " + data.main.pressure + " hpa</p></div>";
}
};
var echo = function(dataPass) {
$.ajax({
type: "POST",
url: "/echo/json/",
data: dataPass,
cache: false,
success: function(json) {
var wrapper = $("#weatherWrapper");
wrapper.empty();
wrapper.append("<div class='city'> <p>Place: " + json.name + ", " + json.sys.country + "</p></div>");
wrapper.append(mainWeather.createWeatherWidg(json));
}
});
};
mainWeather.init();
and
<!DOCTYPE html>
<html>
<head>
<title>Open Weather API</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="userArea" class="container">
<div id="stateWrapper">
<input type="text" id="cityInput" placeholder="Enter a State" />
</div>
<br/>
<div id="countryWrapper">
<input type="text" id="countryInput" placeholder="Enter a Country" />
</div>
<br/>
<div id="buttonArea">
<input type="submit" id="submitWeather" class="btn btn-primary"/>
<br/>
</div>
<!- USED TO SHOW RESULT -->
<div id="weatherWrapper">
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.slim.js"></script>
<script type="text/javascript" src="mainWeather.js"></script>
</body>
</html>
but it just won't do anything when I hit submit.
The Chrome debugger is saying first that $.get is not a function in line 9, so after searching, I changed it to jquery.get. Now it says that is not a function. I have no idea what I'm doing. Can anybody figure this out?
The slim build of jQuery excludes Ajax. You can read more here.
Just change it out with the normal build and you'll be fine.
Basically my code is perfectly fine it is I just cant seem to be able to get the extra added tags when I create them to have any functionality with the api search. I want to pass them into the tags field aswell as $("#textbox1").val(). Any tips/help is appreciated. Thanks
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
$("#images").empty();
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags:$("#textbox1").val(),
tagmode: "any",
format: "json"
}, function(data){
console.log(data);
$.each(data.items, function(i,item){
$('<img/>').attr("src", item.media.m).appendTo('#images');
if(i==2) return false;
});
});
});
$('#images').on('click', 'img', function(){
});
});
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' id='textbox1' >
<input type='button' value='Add tag' id='addButton'/>
</div>
</div>
<div id="images" /> </div>
</body>
</html>
please format your code
Please have only one ready
use a class
$(document).ready(function() {
$("#button").click(function() {
$("#images").empty();
var tags = [];
$(".textbox").each(function() {
tags.push(this.value);
});
console.log(tags)
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: tags.join(" "),
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 2) return false;
});
});
});
$('#images').on('click', 'img', function() {
});
var counter = 2;
$("#addButton").click(function() {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" class="textbox" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="button">Find image</button>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' class="textbox" id='textbox1'>
<input type='button' value='Add tag' id='addButton' />
</div>
</div>
<div id="images" /></div>
am just a beginner of php.
When i click a button i need to add more date-picker dynamically.I put the code but when i click the button am getting new textbox not date-picker.plz check my code and tell me where is the mistake and what i have to do.Here is my code,
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="css/datepicker.css">
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newdatepicker = $(document.createElement('div'))
.attr("id", 'datepicker' + counter);
newdatepicker.after().html('<label> #'+ counter + ' : </label>' +
'<input class= name="date' + counter +
'" id="dateid' + counter + '" value="" >');
newdatepicker.appendTo("#date");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#datepicker" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n date #" + i + " : " + $('#date' + i).val();
}
alert(msg);
});
});
</script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
</script>
<div id='date'>
<div class="hero-unit">
<div class="input-daterange" id="datepicker1" >
<span class="add-on" style="vertical-align: top;height:20px">Select Leave Date:</span>
<input type="text" class="input-small" name="date" id="dateid"/>
</div>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
When the page loads, you initialize the date picker plugin on the elements found at that time:
$(document).ready(function () {
$('.input-daterange').datepicker({
todayBtn: "linked"
});
});
But then you never initialize it on new elements added later. So when you add a new element:
newdatepicker.appendTo("#date");
It's just the uninitialized element that was created. The plugin was never told about it. You need to run the plugin on it.
Since the code creates the id value, you can simply use that to target the element right after it's been added. Maybe something like this:
newdatepicker.appendTo("#date");
$('#dateid' + counter).datepicker({
todayBtn: "linked"
});
to get more than what you expect may be nice on your birthday - but this in script drives you crazy... :(
i've got the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="id1" class="fragenMainDiv" style="width: 80%; margin: 0px;">
<input type="button" id="id1_edit" class="editIcon" value="change">
<span id="id1_Label" class="fragenLabel">
<p>
<span style="margin-left:5px;">
<b>something</b>
</span>
</p>
</span>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
showMain();
});
function showMain() {
$('.editIcon').css("cursor", "pointer").click(function () {
edit($(this).attr("id"));
});
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
showMain();
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>");
showMain();
}
</script>
</html>
what I want is an input field that reacts like a normal input field - but after the first (correct) change of value the form shows three times the input field...
Does someone have an idea? As it is a condensed script of a larger script so I need the structure of functions. Thanks for your help :)
Argghhh I finally found it. Dude you cannot use show main after every edit and editFinish. Becuse you are stacking several same event to one click ! The code shoul look like this :
function edit(idTemp) {
//alert(fragenidTemp);
var IdArray = idTemp.split("_");
var Id = IdArray[0]
var inputValue = $('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").text();
$('div[id|="' + Id + '"]').children("span").children("p").children("span").children("b").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<input id=input" + Id + " type=text size=70 style=margin-left:4px;></input><input type=button id=" + Id + " class=editfinish value=change />");
$('input[id|="input' + Id + '"]').val(inputValue);
$('.editIcon').hide();
$('.editfinish').css("cursor", "pointer").click(function () {
editFinish($(this).attr("id"));
});
}
function editFinish(Id) {
var inhaltFrage = $('input[id|="input' + Id + '"]').val();
$('.editIcon').show();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("input").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").children("img").remove();
$('div[id|="' + Id + '"]').children("span").children("p").children("span:first").append("<b>" + inhaltFrage + "</b>"); }
Hope that you see the error now, if not i can explain in detail.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn_change" value="Change" />
<span id="id1_Label" class="fragenLabel">
</span>
<span id="id1_Input">
<input type="text" id="content1_edit" value="default-value" />
</span>
</div>
</form>
</body>
</html>
JAVASCRIPT
$(document).ready(function(){
// Mostly this should be coming from database on page-load;
updateVal();
$("#btn_change").click(function(){
if( $(this).val() == "Change" )
{
editVal();
}
else
{
updateVal();
}
})
});
function editVal()
{
$("#id1_Label").hide();
$("#id1_Input").show();
$("#btn_change").val("Update");
}
function updateVal()
{
$("#id1_Label").html( $("#content1_edit").val()).show();
$("#id1_Input").hide();
$("#btn_change").val("Change");
}
Fiddle for demo: http://jsfiddle.net/dharmavir/5yMZk/