I have had to use some js code in order to make a plugin work correctly with my word press website that uses ajax to load pages.
The code allows the search plugin to be used without reloading pages when clicking a result (the search uses ajax too), as before using this code ajax page loads would not happen.
The code:
let newContent = document.querySelector(".asl_r");
let pjax = new Pjax({
cacheBust: false,
elements: "a", // default is "a[href], form[action]"
selectors: ["title", "#header nav", "#aside", "#footer", "#content"]
});
pjax.refresh(newContent);
});
let container = document.documentElement || document.body,
config = { attributes: false, childList: true, subtree: true, characterData: false };
dom_observer.observe(container, config);
This does work and search results are loaded using ajax when clicking a result.
The only issue I seem to have now is when checking the chrome dev console I can see the following error many times:
(index):228 Uncaught ReferenceError: Pjax is not defined at MutationObserver.<anonymous> ((index):228:14)
My js knowledge is minimal, but I have tried to define the Pjax function to remove the error without success.
I am just looking for any help I can get to fix this code and remove the error it is creating.
Thank you to any that can offer some advice.
There's no object called Pjax provided in the core JavaScript API. So if you're trying to use a function defined in another script make sure that the script is loaded first before you try to invoke any function from it.
Related
I'm getting the "Uncaught TypeError" in a custom file that's initializing flexNav with this object:
function setupFlexnav() {
// flexnav setup and options
//var isIE = false || !!document.documentMode;
//if (!isIE) {
$(".flexnav").flexNav({
'animationSpeed': 0,
'transitionOpacity': false,
'buttonSelector': '.menu-button',
'hoverIntent': true,
'hoverIntentTimeout': 100,
'calcItemWidths': false,
'hover': true
});
//}
//other custom code follows, but error is thrown on $(".flexnav").flexNav
}
//initialize flexnav
$document.ready(function () {
setupFlexnav();
});
The 'setupFlexNav()' method is called elsewhere in this file, and is wrapped up in $document.ready() {...}, which should stop flexNav() from being called until jQuery has been loaded.
BundleConfig is loading jQuery-1.10.2.js before my jquery.flexnav-custom.js script, but is loading a jQuery-1.11.3.js file after these 2 files.
I would wonder if loading 2 versions of jQuery on the same page would cause the "Uncaught TypeError" to be thrown, but this code has been unchanged for 6 months in Source Control. I haven't been getting this flexNav() error until today, so something else must be causing the error besides the initialization of flexnav. I just don't know that something is. What would cause my given code to start throwing this error? THANKS!
After looking over my code one more time, I realized that the order of my scripts was indeed causing the issue. The old version of jQuery (1.10.2) loaded before jquery.flexnav-custom.js, which is fine, but the new version (1.11.3) loaded after these scripts. I omitted the older file, loaded the newer file before the flexnav script, and rebuilt the project. The error went away.
I am aware of the another question like this on stackoverflow and have looked at it, but it doesn't answer/resolve my situation that I'm having from which the error has occurred.
I'm trying to make both scripts, embed.js (plugin) & more-content-arrow.js (my script) work properly on the page when the document loads. When and if I remove either script, one or the other will work but not both scripts together. When the page finishes loading first, it will load the more-content-arrow.js properly, then when it is trigged again by a scrolling event, it will give off this error message in the console browser:
VM249 embed.js:2 Uncaught TypeError: ((fe.event.special[s.origType] || (intermediate value)).handle || s.handler).apply is not a function
at dispatch (VM249 embed.js:2)
at m.handle (VM249 embed.js:2)
I tried to resolve it by adding a jQuery.noConflict();, but that doesn't work as I assume it could be a conflict between the two scripts. The only way I found out to get rid of the error message is removing one of the two scripts file or removing $.getScript(...), but I don't want to do that. I want to be able to keep both scripts running properly in the page.
JS:
$(document).ready(function(){
//jQuery.noConflict();
$.getScript("more-content-arrow.js", function(){
alert("arrow script loaded and executed.");
});
});
I recreated a jsfiddle with the uncaught type error here:
https://jsfiddle.net/wr6cc2ct/2/
Your error appears it be in your more-content-arrow.js file, you were passing an integer as a third argument which is not a handler, here is the jquery doc for .on()
$(window).on('scroll', function () {
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}); // <--- removed integer here.
Update
Alternatively, you can use event.stopPropagation(); along with re-ordering the jquery.unevent.js script after the ember.js script.
$(window).on('scroll', function (e) {
e.stopPropagation();
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}, 800);
I am trying to call my function "initialize" in the navigated page using GeckFX(version 33),
I have tried the following actions:
_wb.Navigate("javascript:void(initialize());");
and
using (Gecko.AutoJSContext context = new AutoJSContext(_wb.Window.JSContext))
{
var result = context.EvaluateScript("initialize();", _wb.Window.DomWindow);
}
both didn't work.
the first one didn't even return an error, the second one returned the following error message:
Error HRESULT E_FAIL has been returned from a call to a COM component.
I am performing those actions in the "DocumentCompleted" event handler.
Is there something I am missing?
my guess is that it didn't finish loading the page as when I stop in debug mode I don't see the web page from within this even handler(only when i continue it appears)
any ideas how to make it work?
thanks.
I have found the issue,
I should have used:
Application.DoEvents();
and then call
_wb.Navigate("javascript:void(initialize());");
Using default mixitup configuration $('#id').mixitup(), I am adding a filter button dynamically by appending html code for button <li> tag. And calling the same function again instantly after adding html code to the page, in order to make the new button work. After clicking some filter buttons on the page (even if I don't press the new one) animation effects break and on the browser console I see:
Uncaught TypeError: Cannot read property 'left' of undefined error.
The error occurs on line 937:
$toshow.each(function () {
var data = this.data;
data.tX = data.finalPos.left - data.showInterPos.left; //HERE
I saw on documentation how to add new images to the list by using jquery after method, but there are no explanations about how to dynamically add filter buttons and initialize them on the fly.
Is the described behaviour expected?
That means I am doing something wrong. Then, how to initialize the new filter button correctly?
I am using Mixitup 1.5.6 (latest) with jQuery 1.10.2 (Also tried with jQuery 2.0.3).
Thanks in advance!
Your problem is that either data.finalPos or data.showInterPos is undefined. console.log data after you define it to see if you even have those keys
$toshow.each(function () {
var data = this.data;
console.log(data); //here
data.tX = data.finalPos.left - data.showInterPos.left;
I've been working with JavaScript and i need to call a function from another .js file.
The code works most of the time, but sometimes it gives me the error "Object has no method odometer". I've even put the code inside a call to getScript() to make sure it's loaded before it tries to call the odometer() function, but I'm still getting random errors.
Heres the code:
var updateDisplay = function(){
console.log("refreshing Odometers");
$.getScript("/odometer.js", function(){
$.getJSON(
'/getData',
{
product: '',
unit: unitSelection(),
period: salesPeriod(),
reportBegin: $("#datepickerfrom").val(),
reportEnd: $("#datepickerto").val()
},
function(data){
$(".odometer").odometer({
odometerData:data
});
});
});
};
I am getting an error on this line:
$(".odometer").odometer({
odometerData:data
});
It says "object has no method odometer".
I am using the Play framework for development and I've already imported jQuery and my other JavaScript files in the HTML page.
Here's my JS import order:
jquery
odometer.js (even i use getScript, i've put it there just to make sure)
main.js (which the given code resides in..)
What am I doing wrong?
Thanks for helping....
I think
$(".odometer").odometer({...})
is called before odometer extends to jQuery, flow may be like this
$(".odometer").odometer({...}); // first called
$.fn.odometer = function(){...}; // later it was extended to jQuery
seems like its a problem with ajax caching settings.
i've found the answer from this question:
jquery ajax bug
after adding
$.ajaxSetup({ cache: true });
the getScript works fine. thanks for spnding your time guys :)