We Keep Coding

Find then execute a dynamically loaded JavaScript method

I have a piece of HTML that contains some JavaScript
<div id=’abc’> Hello World</div><script> myfunction() { alert (“hi”);}</script>
This is loaded/injected into a target div that is in an iFrame, via an Ajax call that gets the above html.
<iframe id=’myiFrame’><div id=’targetDiv’></div></iframe>
So I’d have something like
<iframe id=’myiFrame’><div id=’targetDiv’><div id=’abc’> Hello World</div><script> function myfunction() { alert (“hi”);}</script></div></iframe>
This all works
My question is. How do I execute myfunction() at some later point in time. How do I find/reference the embedded JavaScript.
I know there are a lot of ifs and buts in this question. Please assume the DOM is ready etc.
I will try to execute myfunction() from an already loaded piece of JavaScript
(function(myframework, undefined ) {
myframework.ButtonClickMethod = function()
{
//this is the call to the dynamically loaded method
//but how do I find / reference this method
myfunction();
}
}(document.myframework = document.myframework || {} ));
Note: myframework.ButtonClickMethod is called from a button click at a time well after all HTML and script has been loaded.
The problem is also complicated by the fact that I cannot control where the piece of injected HTML/Javascript is placed. It has to go into the target div.
I can use JQuery, but prefer vanilla JavaScript.
Also, please ignore any typos in the question, I typed it in Word, it's put ' in etc. It's the mechanism of how to do it I'm interested in.

A less than appealing solution would be to use jQuery to select the script tag html contents. Then use something likethis answer to make it into its own function.

Cannot use css() on dynamically created div in custom plugin

I have recently taken up learning how to make a jQuery plugin. This is my first attempt at just creating something that is very simple. I am still relatively new to jQuery and have come into a bit of a bind when it comes to selecting dynamically created content. In this scenario I am attempting to select a div I created within the plugin.
I have made a jsFiddle here.
I have perused many posts about selecting dynamically created div's and most of them are solved either using on or a callback function. And I am not sure that those can be applied in this situation.
I think the issue occurs at this point in the code:
$element.append("<div class=\"gifLoader\"></div>");
$gifLoader = $element.find('.gifLoader');
$gifLoader.css("bacground-image", "url(\"" + plugin.settings.gifSrc + "\")");
plugin.settings.callback.call(this);
Is there some way I can use a callback function like you would with methods like fadeTo? Also, if anyone cares to comment. I would really appreciate some feedback on the layout of my plugins. I don't fully comprehend what it is I am doing when making a plugin, I am just hoping to learn how to use Javascript and jQuery without the coding looking so clunky. (Before I just had anonymous functions within anonymous functions)

You have one typo, and one error: bacground-image => background-image, and src() => url()
Change
$gifLoader.css("bacground-image", "src(\"" + plugin.settings.gifSrc + "\")");
To
$gifLoader.css("background-image", "url(\"" + plugin.settings.gifSrc + "\")");

When you are creating a dynamic element using javascript or jquery, that element does not reflect in your DOM straight away. If you take a look into the HTML that is generated using the developer tools you'd find before: and after: tags appended with your HTML.
The best way to realize the problem is to either specify the background-image when you are creating the div like:
$("#element").append("<div class='gifLoader' style='background-image: url('" + plugin.settings.gifSrc + "')'></div>");
Otherwise if you are looking to change the background-image on some kind of user interaction, you can go for this:
$("#element").append("<div class='gifLoader' id='someID' someEvent='transform(someID)'></div>");
And then have function transform() defined somewhat like:
function transform(elementID) {
$("#" + elementID).css("background-image", "some image URL");
}

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!

Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

Specifying the HTML page that a jQuery selector refers to?

I'm trying to write jQuery code to count the number of <img> elements contained on a site. The site is comprised of 4 separate HTML pages, all in the same folder on the server. Only one of these pages, "pics.html", loads the .js file that needs to perform this function (pics.html is the only page that needs to know how many images are on the site).
It's easy to get the <img> elements from pics.html, since pics.html is the page that loads the script:
var numImgs = $('img').length;
...but I'm confused as to how I would perform this same function in reference to a different page. Is it possible to specify the HTML page that the selector refers to?
I tried this, as a wild guess:
var numImgs = $('test.html:img').length;
Unsurprisingly, it didn't work. I googled for the answer, but couldn't find a solution - or if I did find one, I suppose I didn't understand it well enough to realize that it was the answer.
Thanks for any help you can offer!

To select an object from an external file, you'll need to use $.load().
Reference: http://api.jquery.com/load/

Try this
$(document).ready(function(){
$('#myDiv').load('/remotePage.html #TargetDiv', function () {
var elements = $('.class', this).length;
alert(elements);
});
});

how can I detect page when I compile all javascript to one file

I compile all my javascript for different pages into one file, so I have to identify page for my all.js. I can put a hidden element in my pages and let javascript detect this element, but I don't like this solution, are there any other ways to do this?

You could go by the url using location.href (or another field from the location object).
However, a better approach is using a data- attribute on the body tag, e.g. <body data-page="whatever"> and then using $('body').data('page') to retrieve the value.

If you script is based on pages, then compiling them into one script is a bad idea, load the file separately, it will be lighter and definately increase some performace.

I am not sure, why do you need this, but in general it is not good practice to change dynamicaly change content of javascript file, since you are disabling javascript cacheing, what can be performance issue later.
Any way, you can solve it from other side, what about using all.js just to detect the page, where are you and then you can use this information, to load right javascript file dynamicaly, like in the following example
document.write('<script src="'+location.pathname+'.js"></script>');
Which will load same file as you are on, just with .js extension. So for example on index.html page it will load index.html.js file

I almost always use MVC frameworks and tend to put my action and controller as classes on the body element
<body class="main_controller index">
Which lets you do things like this:
$(document).ready(function(){
//Only for lessons#search
if (!$(body).hasClass('lessons search')) {
return;
}
function close_style_filter_box() {
$('#style_filter_box').slideUp();
}
});
$(document).ready(function(){
//Only for main_controller#index
if (!$(body).hasClass('main_controller index')) {
return;
}
function do_something_else_on_this_age() {
....
}
});

Another way is using javascript variable:
var PAGE = 'page1';