Loading Profile...
How to abstract the Widget Js into an external .js file?
Hi, I am trying to abstract the js widget code into an external .js file so that it is cached/loads quicker etc. I am having problems though. I made a file called feedback.js and pasted the JS into it like this:
2
people have this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The best answer from everyone
-
Let me see if I can give a fully detailed response.
Personally, I wouldn't bother moving the invocation of the feedback widget (the second script block) into an external js file. You're only going to save 100 or so bytes with caching. If you GZip your responses, it will be even less. If you go down that path, you just need to cache feedback-v2.js in your common js file.
---
If, on the other hand, you still want to cache everything in your js, here's how you would do it.
You'd first need to copy feedback-v2.js into your common js file like above. Next you'll need to have some way to run JS after the DOM is reader. In jQuery that would be something like $(document).ready() or in prototype you'd use document.observe("dom:loaded", ...). In that code block you would include the invocation code where you create the feedback widget using new GSFN.feedback_widget().
The only thing you need to make sure about is that for your options you include a 'container' option. Normally, the feedback just uses document.write() to ouput it's HTML, but that won't work when you create the widget in an external file. So, instead you'll have to tell it where to render itself and that is where the 'container' option comes in. This option should be set to the id of an element you want to render the widget in. Preferably this element will be near the footer of the page, just like the script tags would be if you were following the preferred method. A sample call, using prototype would look like something below:
document.observe("dom:loaded", function() {
feedback_widget_options.display = "overlay";
feedback_widget_options.company = "getsatisfaction";
feedback_widget_options.container = "feedback_footer_container"
var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
});
That code assumes you have an empty html element with the id "feedback_footer_container" on every page.
-Scott
The company and 1 other person say
this answers the question
-
Inappropriate?Hi PokerDIY - Looks like you meant to post a screenshot or a code snippet but it's blank.
-
This reply was removed on 09/21/09.
see the change log -
Inappropriate?Hello Amy - I pasted JScript code in it which disappeared (it shows when I click on the header and go to the full question) - I'll edit it. -
Inappropriate?Hmm - I cant seem to edit it. Here is what I have so far:
< script src="http://www.pokerdiy.com/Portals/6/Skins/PokerDIY/feedback.js" charset="utf-8" type="text/javascript" >< /script >
< script type="text/javascript" charset="utf-8" >
var feedback_widget_options = {};
feedback_widget_options.display = "overlay";
feedback_widget_options.company = "pokerdiy";
feedback_widget_options.placement = "right";
feedback_widget_options.color = "#222";
feedback_widget_options.style = "idea";
var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
< /script >
If I move the bottom bit into the .js file too then it errors. -
Inappropriate?Any solution?
-
Inappropriate?Hi PokerDIY - I don't have the technical chops to help you so I'm getting someone from our product team to chime in. Thanks for your patience.
-
Inappropriate?PokerDIY, is your js file exactly the same as our feedback.js? Do you have the file on a public server I can see?
-
Inappropriate?Hi Thor,
No, it is not the same as there is no feedback.js? I am trying to create it - basically I took the JS widget code and put it into a JS file (to improve load times).
Yes, it is public - look at http://www.pokerdiy.com - you can see how I have put half the JS code into the external file. When I try and move the last bit into it it stops working.
Thanks -
Inappropriate?Any news?1 Comment Add a comment
This answers the question
-
Thor's out at meetings today, PokerDIY. I'm trying to get someone else in here to help you out. -
Inappropriate?Hi Amy -- I have the same issue. Any thoughts on how I can place your getsatisfaction js snippet in an external file?
Thanks,
Elizabeth -
Inappropriate?I am really not impressed with your support response time. It makes a big difference when I chose products to use on my live site.
-
Inappropriate?I'll take responsibility for this, PokerDIY, and I apologize for the delay. If you'd been interacting with our support team they would have blown your socks off. I let you down--but one of our developers is writing up a detailed response now.
-
Inappropriate?Let me see if I can give a fully detailed response.
Personally, I wouldn't bother moving the invocation of the feedback widget (the second script block) into an external js file. You're only going to save 100 or so bytes with caching. If you GZip your responses, it will be even less. If you go down that path, you just need to cache feedback-v2.js in your common js file.
---
If, on the other hand, you still want to cache everything in your js, here's how you would do it.
You'd first need to copy feedback-v2.js into your common js file like above. Next you'll need to have some way to run JS after the DOM is reader. In jQuery that would be something like $(document).ready() or in prototype you'd use document.observe("dom:loaded", ...). In that code block you would include the invocation code where you create the feedback widget using new GSFN.feedback_widget().
The only thing you need to make sure about is that for your options you include a 'container' option. Normally, the feedback just uses document.write() to ouput it's HTML, but that won't work when you create the widget in an external file. So, instead you'll have to tell it where to render itself and that is where the 'container' option comes in. This option should be set to the id of an element you want to render the widget in. Preferably this element will be near the footer of the page, just like the script tags would be if you were following the preferred method. A sample call, using prototype would look like something below:
document.observe("dom:loaded", function() {
feedback_widget_options.display = "overlay";
feedback_widget_options.company = "getsatisfaction";
feedback_widget_options.container = "feedback_footer_container"
var feedback_widget = new GSFN.feedback_widget(feedback_widget_options);
});
That code assumes you have an empty html element with the id "feedback_footer_container" on every page.
-Scott
The company and 1 other person say
this answers the question
-
Inappropriate?Ok, thank you for the detailed response.
I think the performance gain is worth it (consider that this may be one of many js scripts and on a high usage site it would make a difference.
I hadn't realized that it would be so complicated - I'll have a go and see if the added complexity is worth it. Is this not perhaps an enhancement in a future version (an external .js file as opposed to embedded JS?)
EMPLOYEE
EMPLOYEE
EMPLOYEE
