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');
});
Related
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 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])
}
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.
My html
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
My javascript code :
$('[data-toggle="tabajax"]').click(function (e)
{
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
return false;
});
I have given links for tabs respectively. But i couldnt render those links in the page when a tab is clicked..
Could anyone please help me out of this.
Seems to work fine for me:
JSFiddle
The only code that I added to yours (aside from using some gists for the ajax calls) was putting the tab panes inside a <div class="tab-content">.
I have two tabs generated by jquery-ui. I do something in the Tab1 and on a button click, there is an AJAX call which displays the results in Tab2.
So I want to change the active tab on button click ( after the ajax call finishes ). Can I do so?
I've created a jsFiddle here
I tried onclick='$("#tabs-2").trigger("click")
'> but it didn't do anything.
As info (in case someone stumbles upon this later and gets an error on the select method) - In jQuery-UI 1.9+, the select method was deprecated.
(http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method)
Use the option method, example:
$("#tabs").tabs("option", "active", 2);
Use onclick='$("#tabs").tabs( "select", "tabs-2" )'
http://jqueryui.com/demos/tabs/#method-select
js fiddle
http://jsfiddle.net/maheshvemuri/M7Fdu/
Here is JS part of the code:
$(document) .ready(function() {
$("#tabs").tabs();
$(".btnNext").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
});
$(".btnPrev").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
});
});
Here are the "a href" tags to be added in your tabs div
Example:
<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
You have to make the trigger call to "a" inside the "li", not direct to the tab "div" like it's done.
<div id="tabs">
<ul>
<li><a id="lnk1" href="#tabs-1">tab1</a></li>
<li><a id="lnk2" href="#tabs-2">tab2</a></li>
</ul>
<div id="tabs-1">
<button type="button" id="clicktab2" onclick='$("#lnk2").trigger("click");'>
go to tab2
</button>
</div>
<div id="tabs-2">
tab2 content
</div>
</div>
Example:
http://jsfiddle.net/Tf9sc/152/
Also you can try
$(window).load(function(){
$('#tabs-2').trigger('click');
});
that's because you cannot trigger call the tabs() in ready mode. document.ready is executed earlier than window.load.