Function won't run on page load - javascript

I have changed the a function to load on page load but it will not do it.
The original code which runs with a link:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: text });
});
Welcome,
This chat is awesome
My code which should run on page load:
function updateBannerText(text) {
smartsupp('banner:set', 'bubble');
smartsupp('banner:update', { text: "{$Artikel->cName}" });
}
window.onload = updateBannerText;
I have changed updateBannerText(text) to updateBannerText() but it was not possible to run it.

The problem is that the Smartsupp widget itself only starts to load on the page load, so your window.onload function runs before the widget is properly initialized and thus has no effect. You can test this by delaying the banner update, which should have an effect:
window.onload = function () { setTimeout(updateBannerText, 5000) }
To get around this, you should attach your startup code to an appropriate Smartsupp widget event, say, the rendered event for updating the banner:
smartsupp('on', 'rendered', function() {
updateBannerText('whatnot')
})

Related

about Extjs afterLayout

I added a listener in the code like:
listen: {
afterLayout: function(){
doSomething...
}
}
the function is to render the html tags. But it does not work when the page loaded. I need to force rendering the page like change the size of browser will it work. I wanna know why. "afterLayout" should work automatically after the page loaded right? Or do I miss something?
You are using a wrong config. Instead of listen: { use listeners: {
Here is an example for you: https://fiddle.sencha.com/#fiddle/16gu
Ext.application({
name : 'afterRender Test',
launch : function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
listeners: {
afterRender: function() {
this.update('<div style="width:300px; background-color:red; padding:10px;">Added via afterRender listener</div>');
}
}
});
}
});
I think the event your searching is afterrender.
Afterlayout only fires when the window size change and not on the load.
afterrender event match after the layout of the interested component is loaded.
so you should try with this:
listen: {
afterrender: function(){
doSomething...
}
}
If you must call the same function in all the cases call it on afterrender and on afterlayout
I think your problem can solve viewport.
wrap your application in this component. viewport will listen to window size change and automatically re size it's child elements (your application)

Filepicker - Modals opens on page load

I'm integrating Filepicker into a form on a web page. Everything is working fine but I cannot stop the modal from opening by itself on each page load. I can't find a way of disabling this.
Here's the set up I'm playing with at the moment:
<script>
// Set up the API key
filepicker.setKey("XXXXXXX");
filepicker.pickAndStore(
// picker_options
{
openTo: 'COMPUTER',
services: ['CLOUDDRIVE','COMPUTER','DROPBOX','FACEBOOK','GITHUB','GOOGLE_DRIVE','GMAIL','SKYDRIVE','URL','FTP','CLOUDAPP'],
maxSize: 20971520,
},
// store_options
{
},
function(Blobs){
console.log(JSON.stringify(Blobs));
},
function(error){
console.log(JSON.stringify(error));
},
function(progress){
console.log(JSON.stringify(progress));
}
);
</script>
Same thing happens on codepen so it's nothing in the rest of the page that causes it.
Since you're picking a file, you should have the action of the pickAndStore function within the function called when you click a button to activate it.
var button = document.getElementById('filePick');
button.onclick(function() {
filepicker.pickAndStore({
//etc.
});
});

Exit Intent function is working, but no modal is popping up as expected

I'm putting an exit intent feature on my wordpress website and am having an unusual problem.
After loading in the script via wp_enqueue_script in functions.php, I then put the below function in my scripts file. It pulled in just fine.
After I access inspect element in chrome the console is indeed printing 'ouibounce fired'. However, nothing afterwards is working and no modals are popping up.
Also, just to eliminate another possibility,styles for the below ouibounce have been loaded into my styles file.
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 1,
callback: function() {
console.log('ouibounce fired!');
}
});
body.on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
Thanks for your help in advance!
Well I figured it out.
My filewatcher on my styles file was not compiling due to a sass-cache file. I restarted my editor and it worked just fine.

Jquery page event order

I am using the dyna tree jQuery plugin. I have added some data to each node that I retrieve using the in built functions, this is working fine.
$(document).ready(function () {
// Loads tree
$("#TreeManGrp").dynatree({
initAjax: {
url: "/Terminals/Refresh/"
},
onActivate: function (node) {
if (node.data.href) {
window.open(node.data.href, "_self");
}
},
persist: true,
noLink: false,
fx: {
height: "toggle",
duration: 200
},
success: function (node) {
alert("Done");
}
});
});
When a user clicks a node, it will reload the page, and the clicked node is given a flag of active.
Dyna Tree has this function to get the active node
var node = $("#TreeManGrp").dynatree("getActiveNode");
I want to get the active node on page load, so stuck this in document.ready. The issue seems to be that as the function runs in document ready the active node hasn't actually been set to active.
I did a bit of research and $(window).load(function () { is meant to load after document.ready, yet the node is always null still.
If I call getActiveNode on a button click it is fine, as I assume the dyna tree has done its part and set the node to active.
Any ideas?

Google Analytics Event Tracking: __utm.gif never finishes loading

I have a requirement to track downloads of PDF files in my site.
I am using my own plugin to achieve this: https://github.com/rsleggett/Quick-Event-Tracking
However, underneath all it does is call the trackEvent function with the correct parameters. My problem is that when tracking the PDF download the event is fired but never finishes loading:
Here's my code:
Track lots
<script>
$('.track-pdf').gaTrackEvent({
category: 'Download',
action: 'PDF',
labelAttribute: 'href',
useEvent: true,
event: 'click'
});
</script>
Here's what I see in the Network panel for firebug:
This request never completes and this doesn't seem to be recorded in Google Analytics.
Does anyone have any ideas why?
I have tried adding a delay before changing the document.location like this:
Track lots
<script>
$('.track-pdf').gaTrackEvent({
category: 'Download',
action: 'PDF',
labelAttribute: 'href',
useEvent: true,
event: 'click',
complete: function (elem, e) {
setTimeout(function () { document.location = $(elem).attr('href') }, 100);
e.preventDefault();
return false;
}
});
</script>
This seems to work - the request completes if I look at it in fiddler. However, this feels hacky and I don't really want my downloads to open in the same window (it breaks my requirements anyway).
Any ideas?
You can use javascript to remove the node which contains __utm.gif

Categories

Resources