html:
<p id="drag11" class="ui-widget-content" > Calender </p>
<div class="col-md-8"> <div id="droppable" class="ui-sortable" ><ol></ol></div></div>
jquery ui:
var calenderFieldCount++=0;
calenderFieldCount++;
$("#droppable").append('<li class="ui-state-default">' +
'<div class="cal" id="InputsWrapper_11' + calenderFieldCount + '">' +
'<label class="cal"> calender:' + calenderFieldCount + '</label>' +
'<p>' + '<input type="text" id="datepicker" class="hasDatepicker" name="mycal[]" />'+
'<button class="removeclass11">x</button>' +
'</p>' + '<br>' + '</div>' + '</li>');
$("#droppable").delegate(".hasDatePicker", "click", function () {
$(this).datepicker();
});
when element with id= "drag11" is dragged and dropped in div with id="droppable" a textbox appears but when you click on the textbox the datepicker dose not appear. the above code is used. please help. thank you in advance.
try this jquery date picker just add field id and use js file
<script>
jQuery(document).ready(function()
$('#dob').datepicker({
dateFormat: 'dd-mm-yy'
});
});
</script>
Related
i have a button and when i click this button i want a select option added. I can add select but not options, why? I want it added according to the list.
Not adding 'foreach loop option'
$(function () {
var items = ["fa fa-address-book", "fa fa-address-book-o", "fa fa-address-card", "fa fa-address-card-o"];
$('#add-menu').on('click', function (e) {
$('#menu').append('<li>\n' +
'<div class="row">\n' +
'<label class="col-sm-2 col-form-label">Social Media İcon</label>\n' +
'<div class="col-sm-8">\n' +
' <div class="form-group bmd-form-group" id="icon">\n' +
'<select class="form-control selectpicker" id="mySelect" name="icon[]" title="Social Media icon" data-live-search="true" ' +
'data-hide-disabled="true">\n' +
$.each(items, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text: item.text
}));
}),
'</select>\n' +
'</div>\n' +
'</div>\n' +
'</div>\n' +
'</div>' +
'</li>');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menus">
<ul id="menu" class="menu">
<li></li>
</ul>
</div>
add-Menu
You're quite close; just replace $.each() with:
items.map(item => `<option>${item}</option>`).join('') +
as in this demo:
$(function () {
var items = ["fa fa-address-book", "fa fa-address-book-o", "fa fa-address-card", "fa fa-address-card-o"];
$('#add-menu').on('click', function (e) {
$('#menu').append('<li>\n' +
'<div class="row">\n' +
'<label class="col-sm-2 col-form-label">Social Media İcon</label>\n' +
'<div class="col-sm-8">\n' +
' <div class="form-group bmd-form-group" id="icon">\n' +
'<select class="form-control selectpicker" id="mySelect" name="icon[]" title="Social Media icon" data-live-search="true" ' +
'data-hide-disabled="true">\n' +
items.map(item => `<option>${item}</option>`).join('') +
'</select>\n' +
'</div>\n' +
'</div>\n' +
'</div>\n' +
'</div>' +
'</li>');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menus">
<ul id="menu" class="menu">
<li></li>
</ul>
</div>
add-Menu
NOTE
If you intend to add several select tags using the button id="mySelect" will be quite problematic in that you'll end up with more than one element having the same id attribute value. You don't want to end up there.
The instafeed api stopped working on my site. The error I am getting is:
A cookie associated with a cross-site resource at https://instagram.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Chrome changed something and I am trying to understand. Any help would be appreciated.
The site where I wrote this is here. http://galnova.com
var accessToken = '271323200.1677ed0.0a4c06efd9474022b9c3eb47bccf5657'; // use your own token 713486902779818|vM5scnvKTkbBmLbsSgBTPVi3Gqs
$.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
$.each(insta.data,function (photos,src) {
if ( photos === 6 ) { return false; }
var date = new Date(parseInt(this.created_time) * 1000);
// template
$(
'<div class="col-sm-6 col-md-3 col-lg-2 grip_wrap flx gonzo">' +
'<div class="grip_hang_topp"></div>' +
'<div class="col grip flex_el flx_ex">' +
'<a title="' + this.caption.text + '" class="fancybox zero lass" data-fancybox="gallery1" data-caption="' + this.caption.text + '" href="' + this.images.standard_resolution.url + '">' +
'<img src="' + this.images.standard_resolution.url + '" />' +
'</a>' +
'<div class="col coat2 truncate">' + this.caption.text + '</div>' +
'<div class="row nill">' +
'<span class="col-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
'<span class="col-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
'</div>' +
'<div class="row nill">' +
'<span class="col-sm-12 check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
'</div>' +
'<div><button class="col-12 btn btn-outline-tertiary">UltraGallery <span class="fab fa-instagram"><\/span></button></div>' +
'</div>' +
'<div class="grip_hang_bott"></div>' +
'</div>'
).appendTo('#instafeed');
});
$(".grip").hover(function(e){
"use strict";
e.preventDefault();
if ($(window).width() > 991) {
return false;
}
});
});
Instagram Api has changed, read more about it here
bootbox.confirm({
title: "請輸入綁定手機號碼",
message:
'<div class="col-xs-12">'
+ '<form class="form-horizontal">'
+ '<div class="form-group">'
+ '<label class="col-xs-12" style="text-align: left">帳號(您的手機號碼):</label>'
+ '<div class="col-xs-5">'
+ '<select class="form-control" id="countryCode-bootbox" name="countryCode-bootbox">'
+ '<option value="+93">Afghanistan +93</option>'
+ '<option value="+355">Albania +355</option>'
+ '<option value="+213">Algeria +213</option>'
+ '<option value="+1684">American Samoa +1684</option>'
+ '<option value="+263">Zimbabwe +263</option>'
+ '</select>'
+ '</div>'
+ '<div class="col-xs-7">'
+ '<input type="text" class="form-control" id="cellphone-bootbox" name="cellphone-bootbox">'
+ '</div>'
+ '</div>'
+ '</form>'
+ '</div>',
callback:
function(result) {
if(result == false) {
return;
}
register3rdPartyUser(flag, $('#countryCode-bootbox').val(), $('#cellphone-bootbox').val());
}
});
As you can see, there are two horizontal lines inside the overall box which I believe are the boundaries of the message content. The bottom line doesn't come after the message content when I'm using HTML for my string. How can I fix this issue? Is it a bug?
When i use ons.navigator.pushPage and navigate to searchNearby html page it should show me current geolocation coordinates. However it doesnt do that. when i load the searchNearby page directly it shows coordinates that perfectly. Any idea about it
index.html
<body ng-controller="courseController">
<ons-navigator title="Class Finder">
<ons-page>
<ons-row>
<ons-col size="80" style="padding: 8px">
<ons-search-input ng-model="searchText" placeholder="Search..." >
</ons-search-input>
</ons-col>
<ons-col size="20" >
<ons-button type="large--quiet" ng-click="ons.navigator.pushPage('searchNearby/index.html',{title:'Search Nearby'})">Search nearby
</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-navigator>
</body>
searchNearby/index.html
<body>
<p id="geolocation">Finding geolocation...</p>
<div id="t01"> </div>
<script type="text/javascript" charset="utf-8">
var lat,lon;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
function onError(error){
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</body>
Your JS is not getting fired on searchNearby/index.html because you page is being loaded asynchronously.
I would suggest setting up some kind of callback for when then page has fully loaded, so you can execute your getCurrentPosition method.
Alternatively, you could get the position beforehand and then pass the success object over to the searchNearby page.
I am developing an application for selecting the PASS/FAIL option for the value generated from the json data.
My problem is that I am not able to select value per row.The selected value applies in all rows.
HTML:
<table id="records" cellspacing="0">
JQUERY:
(function () {
var url = "http://www.filltext.com/?callback=?";
$.getJSON(url, {
'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
})
.done(function (data) {
$.ajaxSetup({
cache: false
});
var t;
$.each(data, function (i, item) {
var html =
"<td>" + item.fname + "</td>" +
"<td>" + item.lname + "</td>" +
"<td>" + item.tel + "</td>" +
"<td><input type='text' name='PASS' placeholder='" + i + "' /></td>" +
"<td><input type='radio' value='Pass' name='PASS'/>PASS</td>" +
"<td><input type='radio' value='Fail' name='PASS'/>FAIL</td>";
$("<tr/> </table>").html(html).appendTo("#records");
});
$('input[name="PASS"]').on('change', function () {
$('input[type="text"]').val($(this).val());
});
});
})();
JSFIDDLE: http://jsfiddle.net/rutvij111/hUAWF/
working fiddle
first you need to add the same name only to the two radiobuttons that you want to associate (pass and fail) for each row
something like this:
"<td><input type='radio' value='Pass' name='PASS" + i + "'/>PASS</td>"+
"<td><input type='radio' value='Fail' name='PASS" + i + "'/>FAIL</td>";
then assign the change handler to the radio buttons using the type instead of the name
$('input[type="radio"]').on('change', function() { });
and get to the parent tr and look for the input[type=text] from there
$(this).parent().parent().find('input[type=text]').val($(this).val());
That's because you assign the same name="PASS" to every radio button. You ought to select a different one for each row. You could number it like name = "PASS1" or so. Demo for recommended method:
http://jsfiddle.net/hUAWF/7/
Alternatively you could only update a single row if it's only for showing the data (and not writing it) by selecting a children of that row:
$('input[name="PASS"]').
on('change', function() {
$(this).
parents("tr").
find('input[type="text"]').
val($(this).val());
Demo for easy alternative:
http://jsfiddle.net/hUAWF/4/
This is not the optimal solution , but it is working
(function() {
var url = "http://www.filltext.com/?callback=?";
$.getJSON( url, {
'rows': 5,
'fname': '{firstName}',
'lname': '{lastName}',
'tel': '{phone|format}',
})
.done(function( data ) {
$.ajaxSetup ({ cache: false});
var t;
$.each( data, function( i, item ) {
var html =
"<td>" + item.fname + "</td>" +
"<td>" + item.lname + "</td>" +
"<td>" + item.tel + "</td>" +
"<td><input id="+i+" type='text' name='PASS' placeholder='"+i+"' /></td>" +
"<td><input id="+i+" type='radio' value='Pass' name='PASS'/>PASS</td>"+
"<td><input id="+i+" type='radio' value='Fail' name='PASS'/>FAIL</td>";
$("<tr/> </table>").html(html).appendTo("#records");
});
$('input[name="PASS"]').on('change', function() {
var id= $(this).attr('id');
$('input[type="text"]#'+id).val($(this).val());
});
});
})();
Working DEMO
Try this,
The problem was since you have specified $('input[type="text"]')it will select all input of type text, so all the textboxes' value will be effected, However the code below gets the corresponding textbox in the same row of the clicked radio button.
$('input[name="PASS"]').on('change', function() {
$(this).parents('tr').find('input[type="text"]').val($(this).val());
});
Hope this helps, thank you