Is there anyway to display new lines using an Alert in Ionic 3?
What should I replace '\n' with?
doFinalise() {
let confirm = this.alertCtrl.create({
title: 'Are you sure?',
message: 'Are these details correct?\n Price ($/L): \n KMs Done: \n Total Spent: \n Fuel Type: \n Date: ',
buttons: [ etc...
Eventually, the message will display variable just before the new line, but it is not required at this stage.
AlertController can parse HTML tags. So you can use <br/> tag here.
let confirm = this.alertCtrl.create({
title: `Are you sure?`,
message: `Are these details correct?<br/> Price ($/L): <br/> KMs Done: <br\> Total Spent: <br\> Fuel Type: <br\> Date: `,
buttons: [ etc...
Or you can check my demo and try something with bullets or numbering.
let alert = this.alertCtrl.create({
title: 'Are you sure?',
message: `
Are these details correct?
<ul>
<li>Price ($/L):</li>
<li> KMs Done: </li>
<li>Total Spent: </li>
<li>Fuel Type:</li>
<li> Date: </li>
</ul>
`,
Source: this forum post by Mike Hartington of Ionic
Yes it is possible to have newline character in ionic popup content.
Replace \n with < br > tag and it works. The ionic framework outputs HTML after execution of that javascript.
Related
My code:
$("[name='ism']").keyup(function() {
$(".ism-xatolik").text("");
$("[name='ism']").css("box-shadow", "none");
var ism;
ism = $("[name='ism']").val();
ism = ism.trim();
var ismTek = ism.match(/[^A-Za-z]/g);
if (ismTek && ism !== "") {
$(".ism-xatolik").text("Iltimos, faqat harflardan foydalaning*");
$("[name='ism']").css("box-shadow", "0 0 5px red");
} else {
$(".ism-xatolik").text("");
$("[name='ism']").css("box-shadow", "0 0 5px green");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' name='ism'>
<div class='ism-xatolik'></div>
I need to validate firstname. It is validating in my localhost, but when I entered a capital letter in my live website, it thinks capital letters can not be included.
I am using PHP laravel framework on my project.
Please, go to this link to see my page: https://uzgeniusa.uz/narxlar
Just click the button on price list, then input capital letter, you have an error. Then, please look at the page source code, everything is ok there
I am trying to send tabs id to the the server from Django template. I want to send the selected tab's ID after submit the page. Is there any way to do that? Or How can I put my id into my url? Thank you in advance.
Here is my tab list:
<ul class="nav nav-tabs" role="tablist"˛id="myTab">
<li><i class="fa fa-sun-o"></i>MyFirstTab</li>
<li><i class="fa fa-cloud"></i>MySeconfTab</li>
</ul>
You could use Javascript (jQuery) to append the current tab ID to the form before it is submitted to the server. Something like this:
$(function() {
$( "#form" ).submit(function( event ) {
var currentTabID = $("ul#myTab li.active a").attr('id');
$('<input>').attr({
type: 'hidden',
name: 'currentTabID',
value: currentTabID
}).appendTo(this);
});
});
Then, in your Django view, you can access that data via request.POST.get("currentTabID")
I want to navigate to another page after logging in with facebook. Right now I am able to log in using Facebook and stay on the same page, but i want to navigate to another page.
My .html file is
<button ion-button full (click)="loginWithFB()">Login!</button>
<ion-card *ngIf="userData; else facebookLogin">
<ion-card-header>{{ userData.username }}</ion-card-header>
<img [src]="userData.picture" />
<ion-card-content>
<p>Email: {{ userData.email }}</p>
<p>First Name: {{ userData.first_name }}</p>
</ion-card-content>
</ion-card>
My .ts file is
loginWithFB() {
this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
});
});
}
You just need to push the page using navController in the promise returned after your facebook login call:
this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']};
this.navCtrl.push(PageName, PageParametersIfAny);
});
There's two ways of pushing a page:
Importing the page directly from it's file if you haven't lazy loaded your application.
Just passing the string containing the page name if it's lazy loaded.
Like this if not lazy loaded:
import { MyPage } from 'path/to/my/page/folder';
...
this.navCtrl.push(MyPage);
or this if lazy loaded:
this.navCtrl.push('MyPage'); // There's no import
Hope this helps.
Actually i know how to do this. But something is different here. There are many posts in index page. and every post located in <li> tags. And i have voting system for each posts.
<ul>
<li class="class_li" data-id="this_posts_id">
Vote Up <button class="btn dropdown-toggle"
data-toggle="dropdown">
<span class="vote"> CURRENT VOTE </span>
<span class="caret"></span> </button>
</li>
<li class="class_li" data-id="this_posts_id">
<!-- another <li> for other posts with same tags and class names -->
</li>
<li class="class_li" data-id="this_posts_id">
<!-- another <li> for other posts with same tags and class names -->
</li>
</ul>
And my jquery code:
$('a.btn').click( function(){
var post_id = $(this).closest('li').data('id');
var vote = 1;
var ajaxOpt = {
type: 'post',
url: '/content/vote/',
data: {
'vote': vote,
'post_id': post_id,
},
success: function(data){
$(this).find('.vote').text(data.vote_new); // this does not work!
},
error: function(){
console.log('error :[');
}
};
$.ajax(ajaxOpt);
})
I tried closest() parent() and find(). All the same. Once i make it work. but that time all the post's vote values changed. Not ONLY in <li> tag's borders one.
I am stuck. Everything looks true. But something is wrong.
Thank you.
The problem is in the use of $(this) in the success callback. It is not the button, which is what your code is expecting. So you need to alter the code capture the reference outside of the success callback.
So below is the modified code:
create a local variable for the button ($this)
use sibling() and find() to get to the correct vote element
$('a.btn').click( function(){
//This will be the button - maybe call it $button if that's clearer
var $this = $(this);
var post_id = $(this).closest('li').data('id');
var vote = 1;
var ajaxOpt = {
type: 'post',
url: '/content/vote/',
data: {
'vote': vote,
'post_id': post_id,
},
success: function(data){
//This now works! :)
$this.siblings('button').find('.vote').text(data.vote_new);
},
error: function(){
console.log('error :[');
}
};
$.ajax(ajaxOpt);
});
Here's a JSFiddle showing the concept using your scenario.
I've struggled with this for hours... new to creating graph actions... why doesn't our approved graph action work? We expect that when a user clicks the "Click Here!" button that it will show that they've scheduled a blood donation on their timeline. We have a form button coded precisely as outlined in the FB tutorial, and it's on a page tab we've added to a page, but nothing happens when you click the "Click Here!" button.
The page tab in question -> http://www.facebook.com/cityofhope.donateblood/app_323470837712150
Here's the code:
<script type="text/javascript">
function postSchedule()
{
FB.api(
'/me/cohblooddonor:schedule',
'post',
{ blood_donation: 'http://www.cityofhope.org/giving/Documents/blood-donor.html' },
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('You've shared with your friends! Action ID: ' + response.id);
}
});
}
</script>
And the button:
<form>
<input type="button" value="Click here!" onclick="postSchedule()" />
</form>
Any help is appreciated! I've been going at this for hours. Is it an authentication issue? thanks in advance!
You've got a syntax error due to mismatched quotes on line 58 of your source: 'You've ...'
You could escape the literal apostrophe with a backslash, or change "You've" to "You have".
You also have a few other errors on the page. Check these out using the Javascript console on a modern browser.