Asynchronous loading of form in bootstrap modal from external script - javascript

I have an issue loading a form in a bootstrap modal. I am using a service called Formstack to embed a form into my website. The embed code provided to me uses an external script to load the proper CSS, HTML, and JS into my page. The problem is that I am getting 10K+ warnings in my browser console once the page is loaded. All the warnings are the same. Each warning reads:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
Here is a link to that javascript file: https://trustdale.formstack.com/forms/js.php/business_contact
Looking at the external javascript, EVERY line begins with document.write. I dont know if it matters, but I am loading the form in a bootstrap modal. Also note that the form loads totally fine... unless I'm missing something. How would I load my form without all the warnings?

I figured it out... I dont quite understand it yet, but I stumbled upon this https://github.com/krux/postscribe, which seems to make my code work. I created an empty div in my modal with an id of #formCode, then placed this section of code in my footer:
<script>
$( function(){
postscribe('#formCode', '<script src={!! $contact_form !!}><\/script>');
});
</script>
$contact_form only contains the value of my script "src" attribute.
Again, dont know how it works, just does. Maybe someone could elaborate

Related

avoid script to load multiple times for ajax's content

I load my content using ajax, says it's content.html. So in content.html there's a script tag. I found a problem with this approach. I do a console.log('debug') within content.html, and load it with ajax, and it trigger every time. How to do a flag to prevent that?
Note that I can't load the js of content.html in global scope dude to some plugin conflicts.
It's only an idea... since we didn't see anycode yet...
And I'm still not sure what the problem really is.
If you want to leave this script in content.hmtl but disable it when called by layout.html.
You could do something like this in layout.html:
$("script").each(function(){
if($(this).attr("src")=="[particular source]"){
$(this).remove();
}
});
Or use an id if there is no src attribute.
This has to run after you got the ajax result....
I faced with the same issue.
Chrome load the js many times with unique VM files and execute all of them when the html in ajax is loaded.

jQuery not loading on website

Please follow this link: click
The problem is that jQuery is blocked by something or is just not loading. For example, when pressing the "click here if this was helpful" button or when typing something in the search bar, nothing happens. I've done some research and something which can block jQuery is "js/universal/custom.js" which is loaded, but either if it still loads or not, jQuery still doesn't work for those elements.
I don't understand why. Waiting for your answers! :D
Because you load jQuery AFTER the files that need it. Move it to the top of the includes.
Since you have inline JavaScript in the body that references jQuery, you will need to add the script reference into the head.
Also your HTML is invalid, you have divs inside of your head tag.
If you look at the developer console (F12 on most browsers), you'll see a bunch of errors that say that jQuery is not defined. You need to put the jQuery tag before any of your other scripts are declared, preferably (really best practice) in the .
jQuery, however, is loading. It is just loading after you're other scripts have been loaded and executed.
You can test this by opening the developer console and typing
$('#but_full28').bind('click', function() {alert('Clicked');})
When you click on the "click here if this was helpful" div, it'll give you an alert.
TLDR: Add the jQuery script tag before all of your other script tags in the head and you'll be all good.

3rd Party Script Breaking my JS

I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)
Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!
The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.

Site not loading completely when external script fails

I have a script on my site from easypolls.net which is basically a voting poll but if for example their site is down, or there is a problem loading the script then the rest of the content on my site isn't loading.
Here's the script:
<script type="text/javascript" src="http://www.easypolls.net/ext/scripts/emPoll.js?p=5075b1e0e4b08bb807c01061"></script><a class="OPP-powered-by" href="http://www.objectplanet.com/opinio/" style="text-decoration:none;"><div style="font: 9px arial; color: gray;"></div></a>
So how can I fix this, is it normal javascript issue? or am I doing something wrong?
The script is inside a div in the body section.
If you are currently referencing this script in the HEAD of your document, then you might try adding that script tag right before the closing BODY tag.
I would use js library such as yepnope.js to make an asynchronous call to that js file with errorTimeout property set 2-4 sec? and if it cant be retrieved you can always notify user in corresponding callback functions. Display message, hide the poll? or what ever you want with js/jQuery or similar.
There is some good information about this issue by Steve Souders
Are you trying to load your site in IE? Because IE breaks sometimes when a script file doesn't load properly.
Also try this:
<script type="text/javascript" src="http://www.easypolls.net/ext/scripts/emPoll.js?p=5075b1e0e4b08bb807c01061"></script>
Add a closing bracket to the end of the script. This is good practice, and might solve some problems

ASP.net: ClientScript.RegisterClientScriptBlock fires before jQuery is loaded

Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.

Categories