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?
Related
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
I'm trying to filter a list with AJAX, I have an issue where the html only shows the last element. I have read a lot of similar SO questions and to no avail. I have variables, so I don't know whats the issue.
$("#programme").change(function () {
event.preventDefault();
var selected_programme = $(this).val();
$.ajax({
url: '{% url "gps_list" %}',
data: {
"selected_programme": selected_programme,
},
dataType: 'json',
success: function(response) {
var json = $.parseJSON(response);
$.each( json, function( key, values ) {
var valname = values.fields.name;
var valco = values.fields.country;
var valpro = values.fields.programme_type;
var valwhat = values.fields.what;
console.log(valname, key);
console.log(valco);
console.log(valpro);
console.log(valwhat);
$("#names").html(valname);
$("#country").html(valco);
$("#pro_types").html(valpro);
$("#whats").html(valwhat);
});
},
error: function(response) {
alert("oh no!");
}
});
});
HTML
<div class="row">
<div class="col-md-12">
<h2 class="my-4" id="names">
<small id="country"></small>
</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title" id="pro_types"></h2>
<p class="card-text" id="whats"></p>
</div>
</div>
</div>
</div>
When you do this:
$("#names").html(valname);
$("#country").html(valco);
$("#pro_types").html(valpro);
$("#whats").html(valwhat);
you're overwriting whatever those elements had in them before. Since you're doing that in a loop, naturally you only see the result of the last write.
You'll need to either:
Write to different elements, or
Append rather than replacing (via append)
The specifics will depend on your HTML structure.
(Now that you've added your HTML.) I would structure it differently. Don't have any row at all (or have a placeholder "loading" row) to start with. Then build rows and append them when you have a response. Something along these lines:
var entryTemplate =
'<div>' +
'<div class="row">' +
'<div class="col-md-12">' +
'<h2 class="my-4">' +
'<span class="names"></span>' + // *** Made it a span inside the h2
'<small class="country"></small>' +
'</h2>' +
'</div>' +
'</div>' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="card mb-4">' +
'<div class="card-body">' +
'<h2 class="card-title pro_types"></h2>' +
'<p class="card-text whats"></p>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
function success(response) {
var json = $.parseJSON(response);
var container = $("#container");
container.empty(); // Removes any previous rows
$.each( json, function( key, values ) {
var fields = values.fields;
var entry = $(entryTemplate);
entry.find(".names").text(fields.name);
entry.find(".country").text(fields.country);
entry.find(".pro_types").text(fields.programme_type);
entry.find(".whats").text(fields.what);
container.append(entry.children());
});
}
success(
'[' +
'{"fields": {' +
'"name": "Name 1",' +
'"country": "Country 1",' +
'"programme_type": "PT 1",' +
'"what": "What 1"' +
'}},' +
'{"fields": {' +
'"name": "Name 2",' +
'"country": "Country 2",' +
'"programme_type": "PT 2",' +
'"what": "What 2"' +
'}},' +
'{"fields": {' +
'"name": "Name 3",' +
'"country": "Country 3",' +
'"programme_type": "PT 3",' +
'"what": "What 3"' +
'}}' +
']'
);
setTimeout(function() {
success(
'[' +
'{"fields": {' +
'"name": "Name 4",' +
'"country": "Country 4",' +
'"programme_type": "PT 4",' +
'"what": "What 4"' +
'}},' +
'{"fields": {' +
'"name": "Name 5",' +
'"country": "Country 5",' +
'"programme_type": "PT 5",' +
'"what": "What 5"' +
'}},' +
'{"fields": {' +
'"name": "Name 6",' +
'"country": "Country 6",' +
'"programme_type": "PT 6",' +
'"what": "What 6"' +
'}}' +
']'
);
}, 2000);
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have this function:
windowInfo_(marker, i, data) {
'<div style="' + this.content_ + '">' +
'<div>' +
'<img [src]="' + "'" + this.image + "'" + '"' + ' style="' + this.image_ + '" alt="avatar">' +
'</div>' +
'<div style="' + this.details_ + '">' +
'<div>' +
'<h5 style="' + this.company_name + '">' + data.company_name + '</h5>' +
'<i class="fa fa-map-marker" id="' + this.country_city + '">' + data.country + ',' + data.city + '</i>' +
'</div>' +
'</div>' +
'</div>' +
'<button class="' + this.footerListing + '" type="button" (click)="details(data.id_listing)">Explore Trips</button>'
}
details(id) {
console.log(id)
}
As you can see, I have a button inside this template, and I want when I click it, details function to be triggered. But when I click it, nothing is happening. What do I need to modify in order to trigger the function? Thank you for your time!
You can do this by using HostListener:-
Just assign id to your button (i.e. <button id="your_button_id">Click</button>)
Now use HostListener to detect click event:-
#HostListener('click', ['$event'])
onClick(event) {
if (event.target.id === 'your_button_id') {
details(id);
}
}
I am developing an app with the help of ionic 3
in the application i am generating dynamic html from .ts file and appending in HTML . Now i want to bind and click event to html
After user done an click event i want to refresh the content present in the dynamically generated html
please help to solve this
enter code here
my .ts file
with the below code i am generating html and appending to html
outputHtml = '<div id="rpl_crt"><div class="sys_ot"><h6 class="itm_nme">My Cart</h6>';
var innerHTML = '';
let amount = 0;
let savings = 0;
for (let dt in data) {
amount += data[cart].vv.value;
savings += data[cart].aa.value;
innerHTML += '<div class="cartlist">'
innerHTML += '<div class="row ">'
innerHTML += '<div col-3 class="itemimg">'
let img_url=data[cart].product.images ? ConfigurationPage.commonURL+data[dt].aa.images[1].url:'assets/img/place_holder.png'
innerHTML += '<img src="'+img_url+'" >'
innerHTML += '</div>'
innerHTML += '<div col-9>'
innerHTML += '<h6>' + data[dt].aa.name + '</h6>'
innerHTML += '</div>'
innerHTML += '</div>'
innerHTML +='<div class="btn_qnty row">'
innerHTML += '<div col-5>'
innerHTML += '<div class="row">'
innerHTML += '<div col-3 click="abc(dt)"><span class="circle">-</span></div>'
innerHTML += '<div text-center col-6 >'+data[dt].q+'</div>'
innerHTML += '<div col-3 (click)="xyz(dt)"><span class="circle " >+</span></div>'///I want an click event here to do some action
//
innerHTML += '</div>'
innerHTML += '</div>'
innerHTML += '<div col-7>'
innerHTML += '<div class="prd_dtl">'
innerHTML += '<div class="proctprice">'
if (data[dt].ss.value != 0) {
innerHTML += '<span class="orgin_prc">' + this.currency.transform((parseFloat(data[dt].tp.value) + parseFloat(data[dt].ss.value)), 'INR') + '</span>'
}
innerHTML += '<span class="dsc_prc">' + this.currency.transform(data[dt].tp.value, 'INR') + '</span>'
innerHTML += '</div>'
if (data[cart].savings.value != 0) {
innerHTML += '<p class="save_prc">' + this.currency.transform(data[dt].ss.value, 'INR') + '</p>'
}
innerHTML += '</div>'
innerHTML += '</div>'
// innerHTML += '<div class="quantity">' + data[dt].qt+ '</div>'
innerHTML += '</div>'
innerHTML += '</div>'
let abc={
code:data[dt].aa.code,
data:data[dt]
}
clickEventMethod.push(abc);
}
this.totalAmount = amount;
this.totalSaving = savings;
// outputHtml += '</ion-list>';
let footerHtml = '<div class="row cartfooter">'
footerHtml += '<div col-4><p>Total amount</p>' + this.currency.transform(this.totalAmount, 'INR') + '</div>'
footerHtml += '<div col-4><p>Total amount</p>' + this.currency.transform(this.totalSaving, 'INR') + '</div>'
footerHtml += '<div col-4><p>Say <strong>Checkout</strong> to checkout all items</p></div>'
console.log(clickEventMethod,'clickEventMethod')
outputHtml += innerHTML + footerHtml + '</div></div>';
this.appenData.nativeElement.insertAdjacentHTML('beforeend', outputHtml);//Appending the data at the end of the ion-content // break;
HTML
<ion-header [ngClass]="!isFromHome ? 'leftPaddingCssTitle':'cssTitle'">
<ion-navbar color="danger">
<ion-title>{{headerName}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="hint">
<p>To go back , say <b>Go Back</b></p>
<p>To Go cart , Say <b>Open Cart </b> or <b>Go to Cart</b></p>
</div>
<div class="main" #appenData id="main">
</div>
<ion-content>
I am using algolia autocomplete service and would like to add an image
to the bottom of the autocomplete results like it is shown in their examples here:
This is how my autocomplete.js looks like:
autocomplete('#search-input', {}, [
{
source: autocomplete.sources.hits(players, { hitsPerPage: 5 }),
displayKey: 'first_name',
templates: {
header: '<div class="aa-suggestions-category">Players</div>',
suggestion: function(suggestion) {
return '<span>'
+ '<a href="/player/' + suggestion.id + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="/imagecache/small/' + suggestion.image_filename + '">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.first_name.value + " " + suggestion._highlightResult.last_name.value + '<small> ' + old + ' years</small>' + '</p>'
+ '<small> ' + suggestion.nationality + ' '+ suggestion.position + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
},
{
source: autocomplete.sources.hits(videos, { hitsPerPage: 5 }),
displayKey: 'title',
templates: {
header: '<div class="aa-suggestions-category">Videos</div>',
suggestion: function(suggestion) {
timeAgo();
return '<span>'
+ '<a href="/player/video/' + suggestion.uid + '">'
+ '<div class="media">'
+ '<div class="media-left">'
+ '<img class="media-object" src="https://s3.eu-central-1.amazonaws.com/videos.football-talents.com/' + suggestion.video_id + '_1.jpg">'
+ '</div>'
+ '<div class="media-body">'
+ '<p>' + suggestion._highlightResult.title.value + ' <small class="timeago" title="' + suggestion.created_at + '">' + suggestion.created_at + '</small>' + '</p>'
+ '<small> ' + suggestion._highlightResult.player_name.value + " " + suggestion._highlightResult.player_surname.value + '</small>'
+ '</div>'
+ '</div>'
+ '</a>'
+'</span>';
}
}
}
]).on('autocomplete:updated', function(event, suggestion, dataset) {
var timeagoTimeout;
clearTimeout(timeagoTimeout);
timeAgo();
timeagoTimeout = setTimeout(timeAgo, 60000);
});
Where should I add an image so that it is at the bottom of the result, like it is on the image I have posted?
You can use the footer template option like described here.
$('#search-input').autocomplete({
templates: {
footer: '<div class="branding">Powered by <img src="https://www.algolia.com/assets/algolia128x40.png" /></div>'
}
}, [
/// here your sources
]
);