document.ready not firing? - javascript

This is NOT a case of not having jQuery loaded, but I do feel like I'm missing something else that's simple... On this staging site: https://hidden-tundra-8656.herokuapp.com/orders, once the page finishes loading, the "Camping & backpacking" should be auto-selected.
This is the code:
$(document).ready( function() {
console.log("about to trigger initial click")
$(".category-selector[data-id='"+gon.category_to_start+"']").click()
})
It's definitely not happening. Any thoughts? The only thing that I can think of is that the category-selectors are interpolated from Ruby, see view code below, so maybe that's causing it?
<div class="row">
<% #item_categories.each do |ic| %>
<div class="col-xs-6 category-box">
<div class="row category-row">
<div class="col-xs-12 table-display category-selector text-center" data-id="<%=ic.id%>">
<span class="labeler-response table-cell-display">
<%= ic.name %>
</span>
</div>
</div>
</div>
<% end %>
</div>
A little bit more info.
The console.log in the code is not triggered, and gon.category_to_start is defined. ALL of the other jquery on the page is working perfectly.
On this page, it is loading the application.js and a separate orders/new.js that contains the code in question. It loads jquery first, then application.js then new.js. For argument's sake, I just tried to load the code snippet into application.js and it didn't work there either. This works fine in local server.

If you're using Turbolinks (default if you setup a rails project), you should use page:load as an event.
$(document).on("page:load", function() {
console.log("about to trigger initial click");
$(".category-selector[data-id='"+gon.category_to_start+"']").click();
});
NOTE:
If you're in production mode, please make sure that you run bin/rake assets:precompile to keep your assets up-to-date.

The issue seems to be with this line
$(".category-selector[data-id='"+gon.category_to_start+"']").click()
There is no reference to gon.category_to_start so probably data-id is getting some undefined value.
Also you can check if the console.log is logging any value
"Camping & backpacking" should be auto-selected.
But I am seeing category-selector is on a div element. Do you mena to select the div, since auto-selection works on checkbox or radio button

Why include the data-id in the selector?
You can $('.classname').trigger.('click') on document ready

facepalm answer: precompile assets

Related

Angularjs: Get document.querySelectorAll in ng-include

I'm trying to get the reference of my button in a ng-include! But it doesn't work. (I load my script.js in my index.html).
Code in my script.js:
buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ))
Code in my ng-include controller:
<div id="st-trigger-effects" class="column">
<button data-effect="st-effect-3" class="pushmenutest">Push</button>
</div>
For your information, when i put my 'div' code directly in the index.html it Works! I don't know why, when i put my code in the ng-include view it doesn't work. Certainly, because the 'DOM' hasn't be loaded ?
I tried inserting script.js at the end of the file. But I have the same result.
I'm trying to use this library : http://tympanus.net/Development/SidebarTransitions/
If that line is by itself and not within say an angular context. It will run before the ng-include is done. Therefore the querySelector won't find the element.
I guesstimate this is the case because you say if you include the in the .html directly it works.
Is there a reason why you need to get a hold of the button like that and can not use ng-click?
If you give us a bit more information we can help you further.

Load HTML within AJAX call

I'm having some difficulty with a Javascript function I am writing. The basic function of the script is that when a specific AJAX function is called and returns successful, it loads some HTML from a file and inserts that HTML into a on the main page and then (once loaded), fades in the parent div.
jQuery.ajax({
type: "POST",
url: "fns/authenticate.php",
data: dataString,
success: function (data) {
if (data=='1') {
jQuery("#authlogin").fadeOut(500, function(){
$(this).remove();
jQuery("#result").load("fns/logic.html", function() {
jQuery('#authtrue').fadeIn(1000);
});
});
} else {
jQuery('#details-error').fadeIn(200);
}
}
});
return false;
Now the AJAX seems to function properly, in that it will execute under the correct conditions and fade out and in the correct divs, the problem seems to be that the content isn't being loaded from logic.html or it is not being bound to the #result div correctly.
The main page's html looks like:
<div id="authlogin">
<!-- HTML form -->
</div>
<div id="authtrue" style="display: none;">
<div id="result"></div>
</div>
Any help would be much appreciated.
This is one of those things that you must troubleshoot yourself, because we do not have access to your fns/logic.html and therefore cannot test fully.
However, some thoughts:
(1) The basic logic of your .load() success function seems correct. Here is a jsFiddle that approximates the AJAX success function's logic. I substituted .html() for .load() because jsFiddle cannot do ajax. Anyway, assuming that .load() is doing what it should, that part should be working.
(2) You may already know this, but note that .load() is shorthand for $.ajax() -- as are .post() and .get(). You might find $.ajax() easier to troubleshoot as the code block is more structured. As a general rule, troubleshooting the shorthand constructions is slightly more abstract/difficult than troubleshooting $.ajax()
(3) Use developer tools in Chrome (press F12 key) to verify that the contents of logic.html have been inserted into the #result div. You might find, as I did in playing with my jsFiddle, that the contents were injected but the #authtrue div remained hidden. At least you will know that the logic.html document has been found and contents inserted. Knowing exactly where the problem is, finding/fixing the rest might now be trivial.
(4) Does your logic.html file include unnecessary header information? If so, you can strip it out by only inserting the BODY of the document, or a top-level containing div. See this section of the jQuery docs:
jQuery("#result").load("fns/logic.html #container", function() {//CALLBACK IN HERE});
(5) It would be a smart idea to create a test document that just and only loads the logic.html document, using various methods:
Method A: Using PHP (or whatever server-side language you use)
<div id="authlogin">
<!-- HTML form -->
<input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
<div id="result"><?php include 'logic.html'; ?></div>
</div>
Method B: Using load()
HTML:
<div id="authlogin">
<!-- HTML form -->
<input type="button" id="mybutt" value="Click Me to Start" />
</div>
<div id="authtrue" style="display:none;">
<div id="result"></div>
</div>
jQuery:
jQuery('#authtrue').show();
jQuery("#result").load("fns/logic.html");
(6) Ensure you do not have a typo in the destination element jquery selector: If no element is matched by the selector — in this case, if the document does not contain an element with id="result" — the Ajax request will not be sent. (from the docs)
I managed to fix this myself, thanks to the help of everyone here. It ended up being a browser caching problem. As soon as I cleared the cache everything magically worked.

Cant run any JS related thing. MVC page

#model TripGMap.Models.PhotoModel.Photo
<div>
<dl class="dl-horizontal">
<a id="single_1" href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" title="Singapore from the air (Andrew Tan 2011)">
<img src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_m.jpg" alt="" />
</a>
</dl>
</div>
#section scripts
{
<script>
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title: {
type: 'float'
}
}
});
});
</script>
}
This is my View. I cant run any js here. As you can see i am trying to run a fancybox on my image but it's not working. It's just sending me to the image source ;/. What am i doing wrong?
I already tried to delete #section scripts thing and so on. Still JS doesnt work. I even added some connections on the View.
Any suggestions? What's wrong? What am i missing?
Thanks for any advice!
Is your js code even outputted in HTML source?
Look at the console, is there an error? If so it should tell you what's wrong.
You included jQuery before or after your code? If after, your code will not work since jQuery is not even initialized when you try to access it via $.

Knockout + Ajax Content results in multiple binding error

I have built a web application with multiple pages. Some of them are Knockout-driven.
I am trying to apply some Ajax-optimized page loading and stumble over the following issue.
Say I have the following general page structure
<body>
<div id="content">
</div>
</body>
And the following view, which is using Knockout. I include the call to applyBindings inline for being able to load the right ViewModel for every view.
<section id="editor">
<ul data-bind="foreach: items">
....
</form>
</section>
<script>
ko.applyBindings({items: {}}, $("#editor").el)
</script>
I load the view asynchronously into div#content for example using JQuery.load("editor.html #content")
The first page load works fine, but when navigating away (again using JQuery.load) from this view and coming back again I receive the error:
You cannot apply bindings multiple times to the same element.
I have already tried to apply ko.cleanNode but with no success. What am I missing? The #editor node should be removed from the DOM when other content is shown. So I really do not understand how to clean bindings or reinitialize knockout.
Note: I do not want the old data, I want to initialize the Bindings like on a freshly loaded page
Could you test your $("#editor").el in console? It doesn't work in standard jQuery.
If your $("#editor").el returns undefined, your ko.applyBindings({items: {}}, $("#editor").el) is essentially binding to window.document.body.
You may try
ko.applyBindings({items: {}}, $("#editor").get(0));
...
// call cleanNode before loading new page.
ko.cleanNode($("#editor").get(0));
$("#content").load( "newpage.html" );
if your bindings in "editor" section doesn't change,i suggest you to load(AJAX) only json data from server,and replace(modify) your viewModel in the browser,in that way knockout will refresh the dom automaticly.

How to auto-translate a section using google translate tools?

This is more like a auto-click link problem. But my problem is this link is generate by google's script.
http://translate.google.com/translate_tools
If you choose "translate a section" , there will be a link generate inside the goog-trans-control class
Original script:
<div class="goog-trans-section">
<div class="goog-trans-control">
</div>
Original Text here.
</div>
Script code after execute (Check Component):
<div class="goog-trans-section">
<div class="goog-trans-control">
<div class="skiptranslate goog-te-sectional-gadget-link" style="">
<div id=":1.gadgetLink">
<a class="goog-te-gadget-link" href="javascript:void(0)">
<span class="goog-te-sectional-gadget-link-text">Translate</span>
</a>
</div>
</div>
</div>
Original Text here.
</div>
How would I auto-click (or execute) the Translate link after this page is totally loaded?
For some reason, jsfiddle is not working with my script, though I still post this for your convenience.
http://jsfiddle.net/Wb7tE/
Really appreciate for your time and help.
Edited:
I tried Google translate API, but there is a limitation of 5000 words at a time.
My translations include whole html with tables and scripts, so it reach the limit with no exception.
I have a similar problem, and I solved it temporally like this
google_initialized = false;
function google_auto_translate()
{
if(google_initialized)
{
$('a.goog-te-gadget-link')[0].click();
}
else if(google.translate)
{
google_initialized = true;
setTimeout(google_auto_translate, 500);
}
else
setTimeout(google_auto_translate, 100);
}
window.onload = google_auto_translate;
but on slower connection, in 50 % of time google doesn't load on time, and script already clicks before loading is done. So if anyone know any other way to do this, via some events or something similar please add it here...
P.S. Don't use Google Translation API it's Deprecated and will be removed till the end of this year.

Categories