Just what it says. I'm trying to do some simple drop down filtering with jquery, and my function doesn't get executed on page load. Here's what I've checked:
added a console.log to verify
used document.ready to call function
It's getting loaded through sprockets in app.js
it's listed in dev console, and I don't get any resource not found errors
Here's the crazy part : everything works perfectly after one refresh. Console.log comes back and reports the listener has been attached to the select element and everything is roses.
Any ideas why?
EDIT here's the entirety of the js (there may be a better way of doing this, also open to suggestions):
//unrelated JS
$(document).ready(function(){
$("#user_state_code option").unwrap();
$state_copy = $("#user_state_code").children().clone(true);
$("#user_country_code").change(function(){
console.log("state filter called");
filterStates($("#user_country_code").val());
});
$("#user_country_code").change();
});
function filterStates(countryCode){
$("#user_state_code").html(
$state_copy.get().filter(function(d){
var currCountry = String(d.value);
return currCountry.slice(0,2) == countryCode;
})
);
}
Epilogue
Here's what needed to be fixed (thanks to #Rain who put me in the right track, and prompted me to find this amazing resource: Rails 4 turbo-link prevents jQuery scripts from working
var ready = function() {
$("#user_state_code option").unwrap();
$state_copy = $("#user_state_code").children().clone(true);
$("#user_country_code").change(function(){
console.log("state filter called");
filterStates($("#user_country_code").val());
});
filterStates($("#user_country_code").val());
};
function filterStates(countryCode){
$("#user_state_code").html(
$state_copy.get().filter(function(d){
var currCountry = String(d.value);
return currCountry.slice(0,2) == countryCode;
})
);
}
$(document).ready(ready);
$(document).on('page:load', ready);
Related
$("#subpanel_title_documents").click(function(){
alert("clicked");
alert("loaded");
$("#documents_cases_create_button").click(function(){
alert("clicked");
setTimeout(function(){console.log("undefined");},1000);
alert("test");
setTimeout(function(){
if($("#account_id").attr("data-id-value") != ""){
alert("account");
setTimeout(function(){
var idAccount = $("#account_id").attr("data-id-value");
var nAccount = $("#account_id").text();
alert(idAccount);
alert(nAccount);
$("#account_id_c").val(idAccount);
$("#accounts_c").val(nAccount);
},500);
}else{
$("#subpanel_title_contacts").click();
alert("subpanel open");
setTimeout(function(){
var idcontact = $("*[data-module='Contacts']").data("record-id");
var nomecontact = $("*[data-module='Contacts']").data("module-name");
alert(idcontact);
alert(nomecontact);
$("#contact_id_c").val(idcontact);
$("#contacts_c").val(nomecontact);
$("#Documents_subpanel_full_form_button").click();
},1500);
};
},1000);
});
});
I'm trying to populate some fields on SuiteCRM after some actions.
This code works well on Mozilla Firefox but not on Google Chrome. After second Alert ( alert("loaded") ) stops working on Chrome.
Can anyone understand what is the issue?
You should include some more details, like in which module/detail view/edit vew/popup are you trying this.
For instance in the account module this ID documents_cases_create_button doesn't exist.
Furthermore, I haven't found evidence that this documents_cases_create_button exists in the SuiteCRM official repo.
If you are doing something custom, please specify.
also, if you are loading content using AJAX, and that AJAX is executed at the same time that $("#subpanel_title_documents").click(function(){ is Clicked, then the DOM object documents_cases_create_button might not be there quite yet.
If you don't know, the set a timeout before setting this listener
$("#subpanel_title_documents").click(function(){
console.log("Documents Clicked")
setTimeout(function(){
console.log("Just waited 3 secs for dom to finish loading AJAX content")
$("#documents_cases_create_button").click(function(){
console.log("I finally got the event I wanted");
})
},3000);
})
If that was the issue, then your option will be to set some kind of Observer. (thats what I do for AJAX loaded content when there are no native callbacks).
I just recently started working with Meteor and Iron Router, so I'm having some issues.
I am looking to have a very basic website and am nearly there but when it comes to reusing one of the templates for various directories, the page doesn't refresh which causes it to show the previous page despite the URL showing the correct page.
Once I hit refresh on the browser then the page will actually reload with the correct page, but I would rather not have to always refresh the page and would like to simply just have to click on a link and get the correct information.
I have attempted some of the solutions that I have seen pertaining to similar issues, but they all seemed to be a bit more unique than mine. I have included my .js file from meteor.
Router.route('/', function () {
this.render('iotprofiler');
});
Router.route('index.html', function () {
this.render('iotprofiler');
});
Router.route('/device(.*)', function () {
//document.location.reload(true);
this.render('profile');
});
if(Meteor.isClient){
//this code only runs on the client
var directory = Iron.Location.get().path;
var start = directory.lastIndexOf("/");
var stop = directory.search(".html");
var parseddir = directory.slice(start + 1,stop);
console.log(parseddir);
Template.iotprofiler.helpers({
'device': function(){
return DeviceList.find();
}
});
Template.profile.helpers({
'iotdevice': function(){
return DeviceList.find({model: parseddir});
}
});
}
Your problem is that parseddir is not reactive.
A solution is to follow the doc rendering template with data for iron router.
Just give parseddir as data to the profile template when you render it and in your helper use this.parseddir to get the actual data.
Note: Please see edit at the bottom after reading this question.
This issue is only happening in IE 11, and only started occurring after a recent Windows update. There were 5 updates, one of which was specific to IE, so I uninstalled that one. However, the issue still exists. Before I consider rolling back the remaining updates, is there something inherently wrong in my code? The following is inside the document ready function:
$('#leftmenu>li').click(function () {
var clickedId = this.id;
$.ajax({
url: "Session/Index/",
cache: false,
success: function (result) {
if (result.length > 0)
{
performListItemAction(clickedId);
}
else
{
window.location.href = 'Home/Index/'
}
}
});
});
And the following is the performListItemAction method (a separate function not in document.ready):
function performListItemAction(item)
{
alert("clicked");
$(".tabui").each(function ()
{
$(this).hide();
});
$(".listitem").each(function ()
{
$(this).css("background", "transparent");
});
$(document.getElementById(item)).css("background-color", "#C8C8C8");
var targetId = $(document.getElementById(item)).data('target');
var target = $(document.getElementById(targetId));
target.show();
}
The alert clicked never appears when this problem happens, and that is how I concluded the ajax call is not working.
A few other notes:
This issue isn't happening on Firefox.
This only happens if I directly login to the page with a direct URL. If I log in via the application's home screen, and then go to the page that uses the above javascript, the issue doesn't occur.
Thank you.
EDIT: I just now see that the same issue is now occurring in Firefox as well. It's just much less frequent.
After trial and error, I think I fixed the issue by adding a forward slash to the beginning of each of the URLs, and added the type: "POST", to the ajax call. I don't know why it was working fine before, but now this works in all my attempts.
I am familiar with the Turbolinks issue, but it seems my fix is not working.
I have this:
var ready = function () {
$('.add_to_cart').click(function (e) {
e.preventDefault();
var pid = $(this).attr('data-pid');
$.post('/cart/'+ pid, function(data){
var data = JSON.parse(JSON.stringify(data));
$('#items-in-cart').text(data['cart_size']);
console.log(data);
});
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
My javascript won't trigger on document load. I have to refresh. I have done this fix on other pages, and it worked. What else should I try / look for?
EDIT:
I am using jquery (through the jquery-rails gem, 3.1.2)
I found this error in jquery:
Uncaught TypeError: undefined is not a function
ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
.apply( matched.elem, args );
Found a reference to this 'bug' here.
Edit 2:
Here is my html.slim:
=link_to "Add to Cart", "#", class: 'add_to_cart', data: {pid: #product.id}
If I get rid of that line, the rest of my javascript functions work in the ready block on page load. If I keep it, I get the Uncaught TypeError.
Edit 3:
I removed turbolinks from my app and it works fine. I'd like to keep turbolinks, but at this point it's my only solution.
You need to bind the click event since the content is loading via ajax, do this
$('body').on('click', '.add_to_cart', function(e){
// js code
});
I'm trying out phantomjs for browser testing and am having a few issues. My current code is below...
var page = require('webpage').create();
page.open('http://address.com', function(){
console.log('page opened');
page.evaluate(function(){
console.log('inside page eval');
varname.varaction(13633);
})
if (jQuery('#bcx_13633_iframe_overlay').is(':visible')){
console.log('it is visible');
} else {
console.log('it is not visible');
}
console.log('made it to exit');
phantom.exit();
})
I've tried using includeJS with a link to jQuery and wrapping that around everything between page.open and phantom.exit but it seems to stall out and skip that portion. I have custom actions located on the site that I can call in the console if i visit it as called in the code listed above, however, it tells me that it can't find the variable name for that either. Anyone with phantomjs experience have any tips on how to fix this?