I have an iframe that uploads a file to rails
I want to respond back with javascript. The format that comes in is html
I tried
<script>
// JS code
</script>
But it loaded a new page and then executed the JS
Key is to upload a file asynchronously and then do more things on the page
Gem remotipart seems nice but i want to keep dependencies low
Look into Window.postMessage() for cross-origin communication. Refer to this post Html5 - Cross Browser Iframe postmessage - child to parent? to learn how to send child-to-parent page messages.
Related
I'm using a Hubspot chat bot in a rails app that's setup with Hotwire & turbo. When the page is initially loaded a Hubspot script will inject some html into the body of the page which contains the chatbot. Once any redirect happens the body is replaced & the injected code is removed.
How can I keep the injected code present in the body. I tried wrapping the script & area where the inject code goes in a data-turbo="false", that did not work.
Turbo works by replacing part or all of the HTML body with new content. This can wipe out any modifications made to the HTML body (such as the chat widget).
Possible solutions:
Direct Hubspot to modify an HTML element that isn't being replaced by Turbo. Hubspot supports inlineEmbedSelector option that allows you to identify an HTML element ID for the hubspot widget to use. Turbo supports data-turbo-permanent which lets you tell Turbo to retain an element on the page.
Re-initialize the chat plugin after it gets wiped out. This is what would normally happen as you click around the page. Here's their documentation on refreshing the bot. EDIT: This doesn't work as the widget doesn't re-create the html elements and doens't allow subsequent calls to load()
I included an external javascript file on a jquery mobile page. The javascript file modifies some html and css snippet generated at the server. I've tried putting the jquery code that modifies the markup in the following jquery mobile events -
pageinit, pagecreate, pageshow, pagebeforecreate
But the script doesn't modify the loaded markup on page load, but on page refresh, it works perfectly. So I'm trying to find a way to make the modification take place before the page renders.
Any suggested will be gratefully valued.
I've solved my problem. I included all the external javascript and css files on the index page, and it worked well.
This is because jquery mobile loads subsequent pages through ajax, after loading the first page.
I'm fairly new to jquery mobile, and am getting an error when trying to link a file in my jquery mobile project for download. I would like a user to be able to download a .zip file from the app, but get either a page loading error, or undefined displayed in a new page. I tried using an anchor tag to link the file to download, but it doesn't seem to work right. I know jquery mobile makes use of the anchor tag, so I don't know if there is something special that needs to be done. Any help?
You are likely getting the exception when jQuery Mobile assumes the link is a page and attempts an AJAX page load. Disable AJAX loading on the link.
Link
And I have no idea what the typical mobile browser will do with a link to zip file.
I am following Ray Camdens post on ajax calls in coldfusion. I have the whole page wrapped with jquerymobile and themeroller. If I put the content on the main page, its styled properly, but if I use ajax to return the content, its unstyled.
I have tried including jquery and jquerymobile scripts in the ajax page, but then I end up getting weird loops and double submit buttons. In firebug I can see that it loads the js files in the ajax return. I also loose my focus on the submit button which is a big deal in this particular app.
Is there a way to only have the jquery a jquery mobile js files linked in the main page and then have the styling refresh after the ajax content is loaded? or will i run into a FOUC?
Fixed. used $("#result").html(data).trigger("create"); as mentioned in the comments on this page
We have an Ruby on Rail app that allows the user to save a number of video embed codes into a into our data model. The form allows the user to enter any number of embed codes, press submit and save everything to the database. The app then redirects the user to a page that has a list of all the embed codes.
This workflow works fine for IE, Safari, and Firefox.
On Chrome, however, the first time the page is loaded none of the videos appear on the page. I see the following error in the console, once for each video:
Refused to execute a JavaScript script. Source code of script found within request.
On subsequent page loads, the videos load fine and that error is not displayed.
When I view source, the page is reloaded for the view-source operation so I cannot tell if the source is coming through as expected.
When I inspect element on the block where the video should be, I see the following:
<iframe src="" width="400" height="225" frameborder="0">
<html>
<head></head>
<body></body>
</html>
</iframe>
This occurs for both the iframe style embed codes as well as for the "old-style" tag code for both YoutTube and Vimeo videos.
Related:
Refused to execute a JavaScript script. Source code of script found within request
It's how Chrome prevents XSS (cross-site scripting), as your reference above.
When you submit your embed codes, and redirect to another page to display them, Chrome sees that the submitted embed codes (via HTTP POST))and the responded embed codes are the same, so it prevents to load them and displays error in the console.
When you refresh the page, no more HTTP POST submitted (because you redirected it before), so it should display correctly.
I have same problem, and I resolved it by auto reloading the page after it redirected.
I reload the iframes via javascript (with jquery) as workarround..
I therefore store the src elsewhere cause chrome removes it..
I added the url twice as src and src2, and reloaded then with src2.
I also gave all the iframes that need reloading a special class 'webkitIframeHack'.
<script type="text/javascript">
$(function(){
if ($.browser.webkit) {
$("iframe.webkitIframeHack").each(function(){
$(this).attr('src', $(this).attr('src2'));
});
};
});
</script>
(I can't use html5 data-* attributes, i think they would be more fitted..)