i've a search field and when i search for something and nothing is found, i show a message for user, but when has content to show, the message error appear for 3~4 seconds and after this time the message is disappear and the result of search appear...
my html:
<div>
<h2>Search page</h2>
<div class="container clearfix" ng-controller="restaurantsDataCtrl" group-by="category">
<restaurants-gallery ng-show="restaurants.length" category="{{list.category}}" restaurants="{{list.restaurants}}" ng-repeat="list in restaurantsByCategory">
</restaurants-gallery>
<p ng-show="!restaurants.length">Message nothing found.</p>
</div>
</div>
what i need is set a time for this message appear and when this time is ended angular will know if show or not the message.
One thing you could do is create a flag to indicate whether your data request has started:
$scope.completed = false
then in the callback for your data request set that flag as true:
...
$http.get(...).then(function(response) {
$scope.completed = true;
$scope.restaurants = response.data;
}
if you combine that with your conditional to see if there are in fact no restaurants you can be guaranteed the message will only show up after you've tried to get data and nothing came back:
<p ng-show="!restaurants.length && completed">Message nothing found.</p>
Here's a small working example of that idea: http://plnkr.co/edit/IYtSKMHco52rHGWTT55W?p=preview
Related
I have a value extracted from JIRA API showing a total for a particular project.
When I print the value, I can see the correct values and these are clearly being stored in the variable.
I want to add these values to a template page in a <p> tag, but no matter what method I try, it just doesn't render.
Could someone please advice? :)
views.py
# Emergency Changes Query
jira_emergency_changes = jira.search_issues('labels = new-emerging-audit AND resolution = Unresolved').total
# Open Issues Query
jira_open_issues = jira.search_issues('project = UTILITY AND status = Open').total
# Open JIRA Ticket Total Query
jira_open_tickets = jira.search_issues('project = "UTILITY" AND status not in (Closed, Completed, Resolved) ORDER BY created DESC').total
template.html
<div class="row-fluid">
<div class="col-lg-4">
<div class="card card-body">
<h4 class="card-title">Emergency Changes</h4>
<p class="card-text">{{jira_emergency_changes}}</p>
</div>
</div>
</div>
First of all, my question might be a duplicate question to this one: Need html checkbox to be checked by mysql result but I do not understand the answer - the op didn't post any code and I don't see how to fit the suggested code into my case because I need to get the values from SQL (?).
Here all the data:
I have an HTML form with checkboxes, which stores the values as for checked as "1" and unchecked as "0" into an SQL database on submit of the form. Now I want to make it so that it (on page load) pulls data from database and populates the form's checkboxes when the same user comes back to the page. (I know my code is faulty in some places, I still need to resolve quite some things on this project) for right now, what I want to solve is to get the SQL to output the result to existing HTML checkboxes (not create new checkboxes or new HTML form).
Note: my HTML form and my php form are in two separate files and they cannot be merged (I don't know if that makes a difference).
All checkboxes in the form are empty by default. I am using Ajax in my form so that on pageload the userid is passed to a php file which then runs the SQL Query to pull up "1" if the checkbox should be checked and "0" if it should be left unchecked.
Here the piece of HTML which is relevant to the case:
<input type=text id="userid" name="userid" value="">
</div>
<div class="grid">
<div>
<div class="grid-item">
<img src="image.png" alt="">
</div>
<div class="grid-item-title">
<h2>Title</h2>
</div>
<div class="grid-item">
<p>
<input type="hidden" name="owns[item1]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">I own this<br>
</p>
</div>
</div>
<div>
<div class="grid-item">
<img src="image.png" alt="">
</div>
<div class="grid-item-title">
<h2>Title 2</h2>
</div>
<div class="grid-item">
<p>
<input type="hidden" name="owns[item2]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">I own this<br>
</p>
</div>
</div>
This is the Ajax code I am using:
document.addEventListener("DOMContentLoaded", function myFunction() {
var x = 3 //replace with user ID
$.ajax({
url: 'libraryRequest.php',
method: "post",
data: {"userid": x }, // sends id to PHP
dataType: "html",
async: false,
success: function(data){
$('#content').html(data); // currently this overwrites all HTML on the page...
},
error: function (xhr, ajaxOptions, thrownError) {
var errorMsg = 'Ajax request failed: ' + xhr.responseText;
$('#content').html(errorMsg); // currently this overwrites all HTML on the page...
}
})
});
And this is the PHP code I managed to put together sofar:
$userid = 0;
$userid = $_POST['userid'];
if ($userid != 0) { //only execute if there is a user id
$userquery = "SELECT * FROM libraryG WHERE userid =$userid"; //find if userid exists
$result = mysqli_query($con, $userquery);
if(mysqli_num_rows($result)>0) { //if user id exists run this code to pull the data
$sqlupdate = "SELECT * FROM libraryG WHERE userid = $userid";
mysqli_query($con, $sqlupdate);
if ($result->num_rows > 0) {
while($row = $result->fetch_row()) {
print json_encode($row); // edited
}
} //if user id doesn't exist in db or there is no user id - do nothing
}
Each checkbox value is stored in a separate column in SQL.
I have been on this for hours now but in most cases the similar questions I found are explaining solutions for C# or ASP which I have never used and being kinda new in everything I try to avoid those things I don't know anything about if there is a way to do it otherwise.
I am working with an angular 6 application, in the HTML template I have some code as per below, just showing the table cell part of the array, also the table is built using divs.
<div class='table_small'>
<div class='table_cell'>Status</div>
<div class='table_cell'>
<p class="status" >{{incomingData.status}}</p>
</div>
</div>
Please note here that "data" is an array (*ngFor) and is being used in row data and there are multiple data in the table.
Now I have a situation wherein there is a button inside the table rows to cancel the particular order, when the user clicks in, a pop up/modal asks for user confirmation, if the user opts for 'Yes' it would change the status field value to "cancellation is in process" temporarily before it hits the service, once there is a successful response from the customer it would change the station to "cancelled".
I am really not sure how to do the cancellation within the table cell here, if anyone can give insight on this please do.
Thanks
You could pass the element to the function and edit its status:
<div class='table_small'>
<div class='table_cell'>Status</div>
<div class='table_cell'>
<p class="status" >{{incomingData.status}}</p>
</div>
<div class='table_cell'>
<button (click)="showCancelModal(incomingData)"> Cancel</p>
</div>
</div>
And then in the component something like this:
showCancelModal(incomingData) {
// logic for showing modal and retrieving user response
if( response === 'yes') {
incomingData.status = 'Cancel in progress';
yourService.cancel(incomingData)
.pipe( finally(() => incomingData.status = 'Cancelled') )
.subscribe();
}
}
I have an issue that I don't understand, and if anyone can help, I would appreciate it.
I am using Ionic2 with Meteor/MongoDb.
I have a cursor:
private messages: Mongo.Cursor<Message>;
On the server I do an insert:
Messages.insert({
chatId: chatId,
senderId: senderId,
content: content,
readByReceiver: false,
createdAt: new Date()
});
It triggers an observable as expected:
this.messages.observe({
added: (message) => this.addMessageToLocal(message)
});
private addMessageToLocal(newMessage: Message): void {
// here I print the message, and it is as expected
}
Also, I do a forEach through the messages, and they are all populated as expected.
Issue
My problem is in the html. I loop trough the messages cursor. It displays each item as expected. Until I add a message (as above). Then the new message from the html is undefined.
<template ngFor let-message [ngForOf]="messages">
<div *ngIf="!exists(message)" class="message-wrapper">
<div *ngIf="message.changeDate">
<center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
</div>
<div [class]="'message message-' + message.ownership">
<div class="message-content">server:{{message.content}}</div>
<span class="time-tick">
<span *ngIf="message" class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="message && message.readByReceiver && senderId == message.senderId">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</template>
The final message item in the loop (the new one added), is undefined. i.e. In the *ngIf="!exists(message)" function called from the html, I print the message, and its's undefined.
So in the html I loop over the messages Cursor, and the new one is undefined. However, if even in the same function (exists()), I loop over the messages Cursor again, just to test it, none of the items are undefined.
Question
Please can anyone suggest what I can do to not have the last item in the Cursor as undefined?
Thanks
UPDATE
I am getting something I don't understand.
When I call a function from the html as follows, message is not undefined:
{{ formatMessage(message) }}
But if I call a function as follows, it is undefined:
*ngIf="!exists(message)"
I solved this by using:
changeDetection: ChangeDetectionStrategy.OnPush,
But I still think there may be a bug in Angular
I have a news list under which there are a load of News Items. I'm trying to get the page name of the news list to display on each news item but this code isn't cutting it. I get an error saying "Umbraco.Web.Models.RenderModel' does not contain a definition for 'AncestorOrSelf'"
I want this to use levels rather than nodeID so it's reuseble on other pages. This is what I've got so far:-
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "BasePage.cshtml";
var sectionTitle = Model.AncestorOrSelf(2).pageName;
}
<div id="contentHeader">
<div class="row contentHeader">
<div class="col-md-6 page-title no-left-pad">
<h1>#sectionTitle</h1>
</div>
<div class="col-md-6 no-right-pad">
Use our CareFinder
</div>
</div>
</div>
#RenderBody()
Any advice appreciated as I can't find any reason for the error anywhere.
Thanks
I think what you should be looking for is:
Model.Content.AncestorOrSelf(2).Name
Model returns a RenderModel object but what you want is the IPublishedContent object which you will find in the Model.Content property.
You should of course perform a null check before attempting to access the name e.g.
if(Model.Content.AncestorOrSelf(2) != null)
{
sectionTitle = Model.Content.AncestorOrSelf(2).Name;
}
Try using
Model.Content.AncestorOrSelf or Model.Content.AncestorsOrSelf
The available input variables are int (level) and string (NodeTypeAlias)