Develop Reference

Insert HTML Content from URL into HTML (form, div, iframe, ...)

I want to display the result of this URL
http://api.openweathermap.org/data/2.5/weather?q=Berlin,de&mode=html&appid=...1
which looks like
https://i.stack.imgur.com/WWRoD.png
how can I insert the HTML content from the URL directly into an iframe or div?
Thanks!

If you already are able to get that response html, all you need to do is insert it onto the page
document.getElementById('mydiv').innerHTML = "<p>some html</p>"

This could easily be achieved by PHP.
<?php
echo file_get_contents("ENTER URL HERE");
?>
You could do this via JavaScript, but that would require making an AJAX request to get the HTML and then inserting it into the DOM. I don't think that this would be the best method as the page would have already loaded without the code and then asynchronously adding it to the page. Depending on how it is meant to be viewed, I think this would lead to a poorer UX.
Edit
To download the HTML asynchronously, you should use .get(), instead of .load().
$.get("URL", function(data) {
$(".mydiv").html(data);
});

How to stop a php element from loading on a specific page

So... the website i'm working on have three elements that they use on every webpage, the header, footer and a side element (sideLeft). I can access all the files and can even create templates for the post I want to make. The problem is it auot loads those 3 elements so I was hoping that there is a snippet of code that I can implement either into the element file or on the template that would cause it to not laod the sideLeft.el.php element just for that specific webpage?

Why not simply not including the part you don't want to be loaded on that page?

Get the pagename from the url and put condition in sideleft.el.php to not render.
<?php>
$urlPath = $_SERVER['REQUEST_URI'];
if(strpos($urlPath, 'pagename') > 0)
{
// dont display
}else{
//display
}
</?>

Event firing one page affecting another page

I have two pages, say page1.jsp and page2.jsp and a common javascript file script.js.
I have an onclick call in page1.jsp like this:
<td>004</td>
and this method is in script.js defined as:
<script>
function onTab_ServiceTypes() {
// Here I want to hide a div of page2.jsp, like this
$("#div_of_page2JSP").hide();
}
</script>
How can I do this?

you can't do that if both pages are independent(page2 is loaded via a page reload).
What you can do is to store the clicked state using a cookie/web-storage(local storage/session storage) then when the second pages is loaded check the state of the stored value and then hide/show those elements.

If I understand your question right this is not possible. You won't be able to manipulate elements not within the current DOM with JavaScript. You could probably pass a variable in your URL like page2.jsp?hideDiv=true (You would have a better name for this variable...) when you click the link and navigate to page2.jsp and hide div on page load.

Change Page for jQuery Mobile between two html files

I'm trying to make a simple site with two pages, "Search" and "Results".
At first, I had a multi-page template working fairly well. I would change the page, and on page change I would use ajax to get the results. The problem was that I wanted to be able to load the results page without first going back to the search page.
I want to pass parameters to the results page via the querystring so that I can have something like this:
search.html + "some search terms" -> results.html?q=some+search+terms
The problem is that I can't seem to get anything to work right when I split up the html into two files.
I try calling
$.mobile.changePage("results.html?q=" + escape(search))
on the search page, but the $(document).ready function is not firing. I kind of get why it doesn't, since changePage is loading the second page into the DOM?
I also tried manually redirecting, in which case the $(document).ready function does fire on results.html, but using the back button or going back to the search page doesn't fire THAT $(document).ready.
I tried wiring up the pagechange function to search.html, assuming that this would fire when I load the second page, but nothing happened.
Does anyone have suggestions as to how I would pull this off? Or the best way to get the results page to act more independent of the search page?

I've been bitten by this too, it really isn't a good idea to pass parameters through the query string and it makes jQueryMobile behave in an odd way.
Instead I've been using sessionStorage which works perfectly. You could also use a cookie.

I'm not 100% sure where you're actually having issues, but here is some important jQuery Mobile specific info that can help you.
First, read the big yellow section at the top of this page: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
document.ready does not fire when a page is brought into the DOM from an external document. Instead you need to use event delegation and the page-events specified in the link above. Most likely you want to use pageinit as a replacement for document.ready.
Then read the top section of this page: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html (the part about $.mobile.changePage()).
The important part about the second link is that you can pass data via the $.mobile.changePage() function like so:
$.mobile.changePage('results.html', { data : { q : search } });
You can even set the type option to post so there will not be a query-string sent (this should ensure you don't get multiple of the same page in the DOM at a time).
$.mobile.changePage('results.html', { data : { q : search }, type : 'post' });
Another fix would be to manually add the data-url attribute to the <div data-role="page" id="results"> page. When you grab a page like this:
$.mobile.changePage("results.html?q=search+term+here");
It's data-url gets set to: results.html?q=search+term+here. If you manually set the data-url to results.html then you can navigate to the page like this:
$.mobile.changePage("results.html", { data : { q : 'search+term+here' } });
Which will look first for the data-role="page" element that has the data-url attribute set to results.html before re-loading the pseudo-page via AJAX.

Thanks for the input guys. I used a plugin that allows me to use faux-query parameters in the hash for a multi-page layout.
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
I just added this in and ran the search on page change, getting those page parameters for the search.

How can I turn this click event function into one that is called automatically when the div loads?

I perform a function which loads content into a div. I am using innerHTML, I GET a php file, which updates the innerHTML of the div with the php file's content.
This div contains another div inside it with the class and id of "tweet". This div is updated with actual tweets of a specific hashtag, passed to the function through a $variable
It works fine when it is simply an onclick event, such as this:
<p>activity</p>
<div class="tweet" id="tweet"></div>
However, what I want to do is have it automatically load tweet('') once the "tweet" div has loaded.
The tweet(hashtag) function is:
function tweet(hashtag) { $("#tweet").load('tweet.php?hashtag='+hashtag); }
which loads a php file that calls the jquery tweet function.
jQuery(function($){
$(".tweet").tweet({
avatar_size: 32,
count: 3,
query: "<?echo $hashtag;?>",
loading_text: "loading tweets...",
refresh_interval: 3
});
});
Based on the hashtag passed, it shows 3 tweets.
The hashtag is called when the page is loaded, as a session variable.
It all works fine when I click the link. What do I need to do to have this load automatically. so that I don't need to click the link? I have tried a number of autorefresh options but couldn't quite get it. I would really appreciate assistance.
I know that, if this was just a regular page being loaded, I can simply use $(document).ready and call the jquery function. However, due to the way the div is populated with the new php file contents, it doesn't work. I have tried a few times using autorefresh intervals, window onload, etc. They don't seem to work either.

There are two ways to try this:
Run the code somehow from the function which you call to load the div. (Guaranteed to work. You may even put together some kind of plugin concept. "eval" may be useful.)
Add a tag after the div. If things work as you hope, that code will execute immediately.