I made $http request in Angular to retrieve some data.
$scope.method='GET';
$scope.url='/files/file.js';
$scope.fetch=function(){
$http({
method:$scope.method,
url:'files',
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
})
.success(function(data,status){
$scope.status=status;
$scope.data=data;
console.log(data);
console.log(status);
})
.error(function(data,status){
$scope.data=data||"Request failed";
$scope.status=status;
})
};
It all works fine and in the view I can present the data like this.
<div clasS="row" >
<div class="col-lg-2">
<h2 id="price">€ {{data[0].price.EUR}}</h2>
</div>
</div>
Then only this data point is presented. However, I want to use an ng-repeat now to instead of presenting the prices only from data[0] I want to use all from data[i]. Using
<div clasS="row" ng-repeat="i in data">
<div class="col-lg-2">
<h2 id="price">€ {{data[i].price.EUR}}</h2>
</div>
</div>
does not provide the results and does not even do any ng-repeat. I loops through but I does not show the data itself. What do I do wrong?
Cheers
If data is array of items, i variable will actually be the item instance. So just write it as ng-repeat="item in data", with {{item.price.EUR}} inside.
Related
I am using the below code. The AJAX GET is returning status code 500. I am not sure what is missing.
<div class="container pt-1" id="usersList">
<h5>List of Users</h5>
<div data-bind="users.list__template">
<ul class="list-group">
#{foreach user in model}
<a class="userList" href=/#{user._id}> <li class="list-group-item">#{user.name}</li></a>
#{end}
</ul>
</div>
</div>
$('#usersListLink').on('click', (event) => {
event.preventDefault();
AJAX('GET /usersList', 'items --> usersList.items');
$("#homepage").hide();
$("#usersList").show();
$("#addUser").hide();
});
It's hard to say just from what you shown.
But on the controllers check the route, it looks it could be flag with some role permits.
F.route('/uesrslist', get_platform, ['authorize', '#role']);
This could be different depending on how your project is created.
Is there any way to get the data inside a modal? I know that it is possible to work with this through Jquery, but I would like to know if there is any way to work with Laravel itself. In a view, we can do this:
return view ('admin/users/index', ['datas1' => $ datas1, 'datas2' => $datas2];
but for a modal, is it possible to do something like this? to send my data through the controller and within my modal I check if this data are coming empty or filled, as this answer I just want to show different things, like this:
$dep = User::query()->where('dep_link', $id)->get();
return['status' => 'success', 'dep' => $dep];
only my validation in the modal:
<div class="row" style="padding: 28px 20px;">
<div class="col-12">
#if(empty($dep))
<div class="position-relative">
<label for="rg_titular">Selecione o RG do titular (.png .jpg .pdf)</label><br>
<input type="file" name="rg_titular" class="file-input"/>
<button type="button" class="file-button">Selecionar arquivo</button>
<span class="text-arquivo">Arquivo selecionado!</span>
</div>
#else
<a href="link" target="_blank">
Visualizar RG do titular
</a>
#endif
</div>
</div>
Is there any way I can get this data inside the modal window and work with them? I just want to check if it's coming empty or not, that's all.
You can write a view composer for the modal blade file.
https://laravel.com/docs/5.8/views#view-composers
In your service provider (app, or a custom one you make)
public function boot()
{
view()->composer('myBladeFileName', function ($view) {
$activeUsers = \App\User::where('active', true)->get();
$view->with(compact('activeUsers'));
});
}
I have given a rough code to understand what I need to perform,
/app/route1/controller.js
export default Controller.extend({
test: function(id) {
$.ajax({
.....
.....
.....
}).then(() => {
set('message','successfully added');
});
}
});
/app/route1/template.hbs
<div class="ui container">
<div class="ui segment"
<button class="ui button" {{action "test" model.id}}>Submit</button>
</div>
</div>
<div class="ui container">
<div class="ui modal">
<div class="header"
Message
</div>
<div class="content"
{{message}}
</div>
<div class="actions">
<div class="ui ok button">OK</button>
</div>
</div>
</div>
<script type="text/javascript">
$.ajax({
if(message) {
$('.ui.modal').modal('show');
}
})
</script>
If I set a message in controller then, I have to show this message in the MODAL. The Ajax command that I've written is not correct., Please help to solve this issue.
Thanks in advance
First, you must not use <script> tags with ember. This won't work as expected and is in no way supported.
If you have to manually access DOM you should use the didInsertElement of a component.
Are you absolutly sure you want to build your modal yourself? There are many addons providing a nice API for modals. If you can use one of them. If you cant you basically have to write your own modal component.
I will not instruct your in detail how to do this, because this seems not to be your primary question.
Now about your test function. first you seem to try to use it as an action:
{{action "test" model.id}}
however for this you must place the function under the actions hash.
Next this line is wrong:
set('message','successfully added');
you either must use this.set('message','successfully added'); or set(this, 'message','successfully added');
Then you can display your message like this:
{{#if message}}
{{#modal-dialog
onClose=(action (mut isShowingBasic) false)
}}
{{message}}
{{/modal-dialog}}
{{/if}}
And it will work as expected.
I sent to my bootstrap modal this content with Ajax:
<div class="list-of-players text-center">
<div class="list">
#foreach($team->players as $player)
<a class="player_choose" id="player_id_Standard_{{$player->id}}">
<div class="player">
<span class="p_name"><span class="flag-icon {{$player->nationality->flag}}"></span> {{$player->fullname}}</span>
</div>
</a>
#endforeach
</div>
</div>
But then when I want to choose some element of this modal window by this code:
$('.player_choose').click(function () {
$('.modal').modal('hide');
});
It doesn't work. What can be a problem? Maybe js don't see "player_choose" elements after ajax?
Yes. Your script executes before you get this element with ajax. You should use event delegation. This should work:
$(document).on('click','.player_choose', function () {
$('.modal').modal('hide');
});
I have a statistical panel which displays the last registered users. I want to implement a AJAX call to upload the panel without having to reload the full page.
I have the following code in my view:
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
<div class="mt-comment">
<div class="mt-comment-img">
<g:if test="${user?.avatar}">
<img src="${createLink(controller:'controllerUser',
action:'image', id: user?.id)}" />
</g:if>
<g:else>
<img class="img-circle"
src="${resource(dir: 'img/profile', file: 'user_profile.png')}"/>
</g:else>
</div>
<div class="mt-comment-body">
<div class="mt-comment-info">
<span class="mt-comment-author">${user?.username}</span>
<span class="mt-comment-date">
<g:formatDate date="${user?.dateCreated}"/>
</span>
</div>
<div class="mt-comment-text">${user?.email}</div>
<div class="mt-comment-details">
<g:if test="${user?.enabled}">
<span class="mt-comment-status label label-sm label-success circle">
</g:if>
<g:else>
<span class="mt-comment-status label label-sm label-info circle">
</g:else>
<g:formatBoolean boolean="${user?.enabled}"/>
</span>
<ul class="mt-comment-actions">
<li>
<g:link controller="user" action="edit" id="${user?.id}">Edit</g:link>
</li>
</ul>
</div>
</div>
</div>
</div>
</g:each>
Also, I have a button when it is clicked calls the AJAX function. The Ajax function receives the data successful in JSON format. From there, I don't know upload my g:each tag.
I have tried the remoteFunction of Grails to use the upload attribute, but an error appears: No javascript provider is configured and I have searched the solution but anything works me.
The AJAX call:
$('.button').click(function() {
$.ajax({
url: URL,
success: function(data) {
console.log(data[index]);
console.log(val.username);
console.log(val.dateCreated);
console.log(val.email);
console.log(val.enabled);
console.log(val.avatar);
console.log(val.id);
},
error: function(){
},
});
Thanks for helping me.
Instead of Using JSON Data, You can do this using grails templates and jQuery load method. Here is a quick POC.
Template (_userComments.gsp)
This will act as a reusable view which can be called via AJAX or can be included directly in other views.
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
.....
</div>
</g:each>
View (main.gsp)
Our Main View.
<div class="userComments">
<!-- When the Page is Loaded, We need render this without an Ajax Call -->
<g:render template="userComments" model="['lastUsers':lastUsers]"/>
</div>
Javascript
$('.button').click(function() {
$( ".userComments" ).load( "user/userComments" );
});
Controller
We are defining two methods one for the main view and one for the ajax call.
def index() {
def lastUsers = User.list();
render(view:'main', model: [lastUsers: lastUsers])
}
// Ajax Call
def userComments() {
def lastUsers = User.list(); // what ever your fetch logic is
render(template:'userComments', model: [lastUsers: lastUsers])
}