I'm trying to create embeddable content similar to how twitter allows websites to embed tweets.
For example, twitter allows the user to copy paste a stub blockquote and javascript that, upon running the js, replaces the blockquote with an iframe of content.
I've done something similar (I'm using django)
<blockquote class="embedded">
<p>placeholder text</p>
</blockquote>
<script async src="{% static 'widgets.js' %}" charset="utf-8"></script>
The widgets.js script then makes an ajax call to a django view method that calls render_to_string and loads the desire HTML for the iframe. If simple HTML is returned then everything works perfectly because it merely requires something like iframe.get()[0].contentWindow.document.write(content)
But here's my problem. The HTML I want to load requires DataTables and DataTables is supposed to init a table inside $(document).ready().
Because this is iframe content, document.ready() will never be called (as far as I'm aware). At the moment I've been able to init the DataTable by placing my javascript at the very end of the HTML but there's no guarantee that the html would be fully loaded when that init call is done.
Ultimately the issue is timing. I need the dynamically generated iframe content (loaded with ajax via a django template) to execute its javascript before it's then loaded into the iframe.
Is there a way to enforce this timing?
Related
To help transition our app to Angular, we're creating an outer Angular wrapper that dynamically loads server rendered HTML. Using http.get and <div [innerHtml]="result"... in my template works fine for HTML, but it strips <script> tags. I've tried injecting DomSanitizer and using bypassSecurityTrustHtml which then renders the script tags, but still does not execute them.
I found this similar question that loop through the scripts manually and run eval on each, but this still wouldn't load external scripts, eg <script src="...
I know that jQuery's load function will do exactly what I want, but I want to know how to do it with Angular. Is it possible?
Here's my issue, I'm trying to load a FB comments module via an AJAX div. Now, it works if I go directly to the php page, but if I load it from within the div, it doesn't. I've looked at the other posts (FB javascript SDK after jquery LOAD (ajax)), but still can't seem to get it to work, looking for clarification.
If you want to see what I'm talking about, check http://azconceptphoto.com/lindsey and check out testimonials.
Ideally, on the normal part of my site, I can just load the HTML5 code and it works fine, though for some reason it doesn't remotely work via the AJAX div. And considering the posts from before are out of date (2011), I was hoping to get more feedback on this.
Based on the code from your link you are not using any of the PrototypeJS Ajax methods to get the backend script. Ajax.Updater is the method you need to use so....
Here is my suggestion
change the definition of loadXMLDoc() to
function loadXMLDoc(div, location)
{
new Ajax.Updater(div,location,{'evalScripts':true});
}
this will update the contents of div with the contents of location. Also if the response has <script> tags in it then the javascript will be parsed and evaluated (thats the option evalScripts)
I am new to AJAX,
I want to have a javascript that will make all the link(include webpage,internal link, external link) load in a lightbox when clicked. Just like Facebook, when you click the photo, it will give you a frame , without redirect you to the photo page.
Overall, I want my user to click on ANY link of my website do not redirect to a new page which need to refresh the whole page.
I want the link to be load in a frame on demand, also know as AJAX right?
Actually I just want to know this technique is called as what?? Any google search term ?? searching queries??
Any recommend article or tutorial to do this?
AJAX: Asynchronous JavaScript and XML. Your example isn't AJAX, but rather it's using JavaScript to do event binding that causes actions to take place in response to events made by the user in the browser.
You could use jQuery to bind an event to all the links of a certain type on a page. The exact implementation will depend on your HTML markup.
If, for example, you have several images wrapped in link tags:
<img src="image1.jpg" />
<img src="image2.jpg" />
You could have jQuery similar to the following (be sure to load jQuery prior to this in the page):
<script>
$('.image_link').click(function(event) {
event.preventDefault(); // stops it from doing normal link action
// and then down here you'd need JS for your lightbox library
});
</script>
Smashing Magazine has an article that might help you: Modal Windows in Modern Web Design.
Im unsure of how to approach this, should I have the html to be loaded hidden or load it from somewhere? I want to load a form in one page, and dynamic content on other pages.
The form can be saved to mongo db, and when the page loads should load the data into that form from mongo db.
Where does the html live for all the pages? I want to have a clean html5 document with lets say a content div. all content goes into that block.
Server running Django
Im want to use backbone.js for the app
any help would be appreciated
The initial page should include the basic layout of the application (header, content, sidebar, different placeholder for your views, etc.)
Then you load the application (usually with a controller) and render the different view that will replace the placeholders you had in your layout.
To render the views, I suggest to use a templating engine. With backbone.js there is already underscore.js on the page, so you can use the templating engine included (http://documentcloud.github.com/underscore/#template). You then have to load the template on the page. The easiest way is to create include a script element on the page with your template inside:
<script type="text/template" name="template1">
your template here...
</script>
And you can load it using this:
var template = _.template( jQuery("script[name=template1]").text() )
and execute with your data
var html = template(model)
You build your page with different backbone views using different template.
I hope that help!
I tried the classic ajax approach, but that throws an access denied javascript exception when trying to add a script stored on another domain.
Now, I'm sure this is possible since google populates google ads via js only; so does twitter, and the list can continue.
How I thought of it so far:
<div id="divId"></div>
<script type="text/javascript" src="http://mysite.com/script.js"></script>
The script in script.js should have changed the innerHTML attribute of the div above. Instead, I get the following message in fireBug: Access to restricted URI denied code: 1012
I googled around a bit but only found workarounds that are useless, like php proxies and such, whereas I want this widget to be copy-pasted into other peoples sites, blogs, forums, etc..
Thanks in advance for any helpful replies. :)
The behavior that you are seeing is intended and there for security reasons. You wouldn't want a third party script to make any changes to your page as that can be exploited heavily.
Instead, give your users a JavaScript snippet to embed on their page.
<script>
// do stuff here
</script>
Note that inside this snippet you can create a script tag dynamically, set the src attribute and load the actual JavaScript. This snippet that your users embed on their page has access to the entire DOM, but the script loaded externally does not.
Here's an example of the profile widget that Twitter gives out to embed on web pages:
<!-- external js, can't access or change the DOM -->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<!-- local js, does that -->
<script>
new TWTR.Widget({
version: 2,
..
..
}).render().setUser('hulu').start();
</script>
The first script tag loads the library, while the second one which actually manipulates the page is added as code directly.
I finally found a solution that doesn't involve ajax.
I simply use
<div id="objectId"></div>
<script type="text/javascript" src="http://mysite.com/getAndDisplayData.php"></script>
<script type="text/javascript">getAndDisplayData();</script>
And in getAndDisplayData.php I generate a JS script that will create my widget inside the div above. The php file also connects to the database and retrieves all required widget data.
Apparently this is how google ads works, though I am not sure. It is certain though that they don't use ajax.