last day (14 days later) » 

8:48 AM
Hi, sorry about that
couldnt find you in the chat rooms for some reason
 
Hi
Now, I guess, you are getting some error in the console
 
firstly thanks for taking the time to pop into the chat room and helping me, trying to get my head around Ajax in rails
 
and that error must be from the server side
You are welcome :)
Can you please tell me, what is the error, so I can help you on this
 
well im trying to incorporate the ajax call within a animation function, originally i was trying to use .load(), this is what i was originally using
$(document).ready(function() {
//Portfolio filters
$('#portfolio-grid').mixitup({
effects: ['fade','scale'],
easing: 'snap'
});

//Portfolio project slider
function initProjectSlider() {
$('.project-slider').flexslider({
prevText: "",
nextText: "",
useCSS: false,
animation: "slide"
});
};

//Portfolio Project Loading
$('.open-project').click(function(){
var projectUrl = $(this).attr("href");

$('#project-content').animate({opacity:0}, 400,function(){
//$("#project-content").load(projectUrl);
$('#project-content').delay(400).animate({opacity:1}, 400);
Ill look for an error in the console
so for now i have removed all of this just to append _gallery.html.erb to #project-content
 
ok..
I believe, in your index page.
<ul id="portfolio-grid">
<% @galleries.each do |g| %>
<li class="mix <%= g.category.name %> mix_all">
<% g.gallery_images.take(1).each do |i| %>
<%= image_tag(i.photo.url(:gallery_portfolio_home), class: 'open-project') %>
<%= link_to "", gallery_path(g), remote: true %>
<% end %>
<div class="project-overlay">
<i class="fa fa-plus-circle fa-3x"></i>
<span class="project-name"><%= g.title %></span>
<span><%= g.category.name %></span>
</div>
</a>
</li>
<% end %>
</ul>

<div id="project">
<div class="col-md-6">
Now upon clicking, the link it calls the show action using UJS. If it is not redirecting, then UJS is working
It is working means, now the error must be in the show action or show.js.erb or _gallery.html.erb .
So please check the error, so that we can fix that one
 
8:56 AM
ok so there are no redirects
how can i debug this ?
 
Please click the link. Then check in your rails server console. If any thing wrong, it ll be appeared over there
Or you can check in the developer tool, in the browser. Upon clicking the link, it will call a request and it ll be shown in the developer tool console. If the request status is 200 OK. If not you can get the error
 
I am clicking the link but there are no errors in the rails console or the developer console, its like the link is not firing at all
 
Please confirm, in your show action,

def show
@gallery = Gallery.find(params[:id])
end
And if yes, then replace the link in the index, <%= link_to "Show gallery", gallery_path(g), remote: true %> and click on the "Show gallery" link
 
show action is as you have stated, i have replaced and clicked the link, still nothing happens
no errors and nothing in developer console
 
Do you have <div id="project-content"></div> in your index.html.erb?
 
9:08 AM
yes i do
Im assuming the content of _gallery is supposed to appear within my #project-content div
 
Upon clicking the link, anything happens, in the rails server console or in the developer tool?
yes, it should work...
 
nothing at all, i even put this in my custom.js file

$('.open-project').click(function() {
console.log('clicked');


});
but nothing outputted in console
 
Please paste the code of your index page..
 
<ul id="portfolio-grid">
<% @galleries.each do |g| %>
<li class="mix <%= g.category.name %> mix_all">
<% g.gallery_images.take(1).each do |i| %>
<%= image_tag(i.photo.url(:gallery_portfolio_home)) %>
<%= link_to "", gallery_path(g), class: 'open-project', remote: true %>
<% end %>
<div class="project-overlay">
<i class="fa fa-plus-circle fa-3x"></i>
<span class="project-name"><%= g.title %></span>
<span><%= g.category.name %></span>
</div>
</a>
</li>
<% end %>
</ul>
<!-- End Portfolio Grid -->
<!-- Ajax Loaded Portfolio -->
 
Everything seems alright ... OK.. please try by removing the class from the link. I guess, some other javascript function may be there for that class.
@Richlewis, you there?
 
9:24 AM
sorry, yes im here, will try that now
 
please let me know
 
ok so that hasnt made a difference
 
ahhh... that's not expected.. OK.. try removing remote:true, is it redirecting or not?
 
its not even redirecting now??
strange
 
then please confirm, you are testing the same index page, where you made the changes.. sometimes we do such things.. :)
 
9:34 AM
yes definitely, there is only one anyway so cant make that mistake :-)
 
ok.. then try restarting the server. we have no other option left.
and change the link to <%= link_to "VIEW GALLERY", gallery_path(g), remote: true %>
 
ok we are redirecting now
 
now, please add the remote:true and check the same
 
redirect was working off this <a href='<%= gallery_path(g) %>' class="open-project">
as soon as link_to added, it does not redirect
 
are you using rails 4?
 
9:39 AM
yes
 
<a href='<%= gallery_path(g) %>' class="open-project" data-remote="true">
 
ok i will try that
 
rails 4 is having a feature turbo-link, I ve not used rails 4 much.. But I guess, it might create the issue for the UJS.. need to check
 
well ive removed turbolinks, but success we are now getting content in the project-content div :)
next thing i wanted to try was incorporate the animation that was previously there
 
Ohh.. great... after a long time
 
9:42 AM
thank you for your patience
 
welcome.. even it s great to know that works
 
do you think it was the data-remote syntax?
 
For the animation, you can add that in the show.js.erb
 
as its a js file yes
how would i set that out?
 
Look, =link_to should works.. But its strange, its not working in your end.. SO we have added the html anchor tag.
show.js.erb

$('#project-content').html("<%= j render '/galleries/gallery'%>")
// over here you can animate as you like
 
9:45 AM
ill re try the link_to as your right there is no reason it should not work
 
yes, sure.. please try..
 
if you wouldnt mind, this is the js i have
//Portfolio Project Loading
$('.open-project').click(function(){

$('#project-content').animate({opacity:0}, 400,function(){

$('#project-content').delay(400).animate({opacity:1}, 400);
});

//Project Page Open
$('#project-extended').slideUp(600, function(){
$('#project-extended').addClass('open');
$('html, body').animate({ scrollTop: $(".portfolio-bottom").offset().top }, 900);
}).delay(500).slideDown(600,function(){
$('#project-content').fadeIn('slow',function(){
if ($('.project-slider').length > 0) {
i need to remove the click function?
 
yes, click should be removed
Now you have the gallery's content in the #project-content div
 
wow it works :)
 
Great..
 
9:49 AM
though now something very strange
within the ajax call i have a flexslider loaded for the images. but it is calling them twice
so in my example i have 2 images, but 4 are being returned
 
ajax is being called 2 times while clicking that link?
 
seems to be being called twice yes
 
It happens, when jquery has been loaded twice.
 
would the ajax request call jquery again?
 
No but check in your html file, I guess somehow jquery file has been added twice in your application.
I dont think your ajax request is being called twice.. It is something else...
 
10:02 AM
cant see anything there? can you?
 
no nothing wrong there
look.. are you sure @gallery.gallery_images should return 2 records?
please check in the db, there might be possible, there are 4 records from where 2 records is having photo and other two are blank for that gallery id
 
this is what is being requested
no blank requests as far as i can see
 
In the last record, there is a class='clone', how it is being added to that li tag?
Richlewis, it is somehow related to flexslider. Please check that
 
ll take a look
 
OK.. thanks Richlewis.. Nice talking to you.. I ve to go now... catch you later.. have a great evening. :)
 
10:17 AM
thank you so much for your help
 

last day (14 days later) »