Since 2 days I'm trying to solve a really strange issue. On first Visit of my rails web app loads a picture, but if you click on Home in the navbar to get to the same page, the picture doesn't load. If you reload the page after this, it appears again.
For you to see yourself
I am totally clueless on how to solve this and whats the cause..
You use turbolinks.
try to put your js-slider code like this
$(document).on('turbolinks:load', function() {
$( document ).ready(function() {
// your js-slider code here
})
});
or just put this in application.js and require owl-carousel from aplication.js
try to add below code for home link like:
<%= link_to('home', home_path, data: { no_turbolink: false}) %>
Related
I'm having trouble to find the correct way to do this. In my landing page I got a inner link like this:
Destacados
When I click on it, the page go to the #destacados id, but all the javascript stop working, so the carrusel just dies. I'm not sure if this can help, but when I click the link, the address bar change to /myapp/#destacados ... may be it has trouble routing that... any idea??
Thanks
Can you show how you are binding the click event to your <a> ?
Just tested with JQuery (could be without)
<a href='#destacados'>Go To Destacados Section</a>
<script>
$(function () {
$("a[href='#destacados']").click( function () { console.log('clicked'); });
});
</script>
The focus goes to the anchor and clicked is printed
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
Hi everyone,
it's now my fourth try to implement history.js in a Rails app. I have one approach that is running quite okay, but the code is so ugly. Today again I looked at the code and thought: How can I make this better, easier, more DRY?!
What I have done so far (and working quite okay, not perfect):
Set remote: true to my links
jquery-ujs fetches the js.erb
My HTML looks like:
<body>
<div id="content">
some content with buttons, etc.
</div>
</body>
The js.erb contains:
History.pushState(
{
func: '$(\'#content\').html(data);',
data: '<%= j(render template: "news/index", formats: [:html]) %>'
},
'test title',
'<%= request.url %>'
);
And then history.js takes the function and gives it the data. So it replaces the content-div with the new generated code. And it also updates the URL. This code I have to put in every(!) js.erb file.
My last thoughts to make it a bit less ugly were:
Set remote: true to my links
When a link gets clicked it fetches some js.erb which replaces the content-div
All links with data-remote="true" will get a ajax:success-handler
On ajax:success the new URL gets pushed to history.js
But there's still one problem within. Then I have JavaScript code:
$(document).on('ajax:success', 'a[data-remote="true"]', function() { ... });
The problem is: ajax:success never fires if I replace the div-tag where the link (that should fire the event) was in.
Maybe someone can solve my problems...
Or is there a better way?
I only use jquery-ujs and pushState, popState.
See my answer here:
https://stackoverflow.com/a/27532946/345996
what about:
History.Adapter.bind(window, 'statechange', function() {
var state = History.getState();
...
});
I'm using the beforeSend event as global listener for all data-remote to change the handle the history of the browser.
I prefer the beforeSend because I want the link to change as soon as it is clicked, regardless of the result of the ajax request...
$(document).bind('ajax:beforeSend', function(event,data){
history.pushState(null, '', event.target.href)
});
This solve your problem because the event is fired before any modification to the DOM is done.
Have you tried turbolinks ?
It will be default in Rails 4.
I am trying to use ajax to load sometag , but my appended code is not being enhanced by JQM.
I tried $(this).trigger('create') and $(this).trigger('updatelayout') but It still not working.
Then I tried to call ajax by function jquery mobile support: $.mobile.changePage()
my code:
$.mobile.changePage({url:'/', data:'add_new_tag=true', type:'GET'}, 'slide', false, true)
in action index: I render 'index.html'
I have checked it in firebug and see response is right (expected) . But I see nothing change in my browser.
Did I miss something ? I hope to recieve your help . Thank you :D
I have never been able to get the trigger('create') method to work for me either. Maybe someone else *cough (Jasper) can help me out with that part of the answer. I may be able to help you with your changPage code though.
Try this for changePage instead:
$.mobile.changePage( '/',{
data: "add_new-tag=true",
type: "get",
transition: "slide"
});
I am using Jquery Ui panels.([http://code.google.com/p/ist-ui-panel/][1])
While loading the application, everything is fine like collasible, draggable etc.
But i want to make the panel collapsible while clicking on some links.fo ex:
This code will run when the form is loading....
$('#myNews').panel({
'collapsible' :true,
'stackable':false,
});
The html
<div class="panel" id="myNews" >
<h3>Poll</h3>
<div>Some content</div>
</div>
I want to make 'collapsible' :false when clicking some link.... like this
$('#click1').click(function() {
$('#myNews').panel({
'collapseType':'slide-right',
'collapsible':false,
});
});
the code is running without any error, but the '#myNews' not getting affected when clicking the '#click1' link.
Need some help pls.
Thanks in advance
I'm the one behind ist-ui-panel, and Jesse was right — by now the only way for you is to use 'destroy' method somewhat like:
$(document).ready(function(){
$('#click1').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({
'collapsible' :true,
'collapseType':'slide-right',
'stackable':true
});
}
});
$('#click2').bind({
'click': function() {
$('#myNews').panel('destroy');
$('#myNews').panel({'collapsible': false});
}
});
});
Notice, you should explicitly destroy previous panel before making a new one.
If you read the uncompressed source code for that widget, it appears that what you are doing is only meant to be used to create panels, not to modify them afterward.
The underlying software is either buggy or I don't understand it. So you'll have to hunt down some bugs, but you can use the 'destroy' method on that widget to reset the div completely, and then make it a panel again, like so:
$('#myNews').panel("destroy");
$('#myNews').panel(...
As I said, it's buggy or I don't quite get it - there's an error raised by the destroy call which you have to catch, and subsequent calls to make new panels do make panels, but they aren't completely correct.