Let me start off by saying my bootstrap modal load remote works fine. My particular problem is that it loads the whole remote URL as the HTML result, and I just need some specific sections from that HTML. For instance, lets say my remote URL is like this:
<html lang="en">
<head>
{head content goes here}
</head>
<body>
{some content here}
<div id="myContent1">{more content here}</div>
...
<div id="myContent2">{even more content here}</div>
</body>
</html>
So, instead of loading all above html code inside my modal, I just want to display divs #myContent1 and #myContent2.
Use Jquery ajax functions:
$( "#myContent1" ).load( "ajax/test1.html" );
$( "#myContent2" ).load( "ajax/test2.html" );
Using page fragments you can load specific divs to specific divs.
For example
$('#mainContainer').load('loadpage.html #nav1div');
Will load stuff inside your mainContainer that appear inside the div nav1div from the loaded page ('loadpage.html'), for more info check out http://api.jquery.com/load/
Related
I have a website and I want to use my dropdown menu as a separate code from any links in website.
http://www.stelianpopa.ro/photo/ancar.html
I use the code for my menu in menu.html and I integrated on website based on this example: http://api.jquery.com/load/
The codes are loaded but most of the time the drop menu doesn't work, even if appear to be loaded, it shows only the first line and not the submenu for "photo" and "video"
Any help for that?
Basically wat I want is to have my menu as an independent file and to be loaded on any html on my website as a reference, because when I want to add something in the menu I had to do it on every single html and that's why I want to be standalone, to modify once for every html.
Sorry for my bad english.
If not already, make a html file that includes your menu (dropdown).
Then, on every page that you want to use the menu, include an iframe pointing to the html file you created for your menu.
For example:
Menu.html
<html>
<head></head>
<body>
<!-- code for menu -->
</body>
</html>
Every page you want to use the menu on
<html>
<head>...</head>
<body>
<!-- content -->
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe>
</body>
</html>
Hope this works for you.
Without templating, you can use javascript to load template onto the page. I would set up a mini project for this to avoid copy-pasting, but the basics are below
In the body where you want the menu:
<div id="my-nav-menu"></div>
script:
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementById('my-nav-menu');
menu.innerHTML = 'menu html here';
});
Update
I just noticed the jquery tag, so you can use the following script instead:
$(document).ready(function() {
$('#my-nav-menu').html('menu html here');
});
I have problem with jquery.
I want change link to src when is only "document.write".
My code:
myscript.js
document.write("TEST ABCD");
test.html
<html>
<body>
<button id="example">click me</button>
<div>my site example text</div>
<div id="my_div_important">
Old test
</div>
<script>
$(function(){
$('#example').on('click',function(){
$('<script>').attr('src', 'http://example.com/script.js').appendTo('#my_div_important');
});
});
</script>
</body>
</html>
If click "#example" than in page write: TEST ABCD but all the rest is HIDDEN... URL is to same (no redirect).
When is problem?
--- UPDATE
I want to do a widget where users will use on their sites.
The panel of users want to do a preview of different sizes and therefore need to update the script SRC tag script (example.com/widget/normal/250|300 itp.)
document.write deletes all the content if your page is already fully loaded (as you do a write on the document object).
Also you should use jQuery.getScript() for dynamic loading of scripts.
I am using some JQuery to load a div from another page to the current page, the problem I am having is that the content is the div does not exist until that page has loaded.
<div id="placeholder"></div>
What I am trying to do is load the page first (So the content goes into the div) and then I want to load the div in the current page.
Currently I have something which looks like this:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div class="panel-body">
<div id="bar-chart-db" class="height-sm"></div>
</div>
<script>
$( "#bar-chart-db" ).load( "../index.aspx #placeholder" );
</script>
Is what I want to do possible and if it is, any suggestions?
you have to wrap the jquery in a document ready function:
$(function(){
$( "#bar-chart-db" ).load( "../index.aspx #placeholder" );
});
Here is something you might want to read: Document Ready Function
I'm trying to create a website, and I'm trying to figure out how to load a page.
For example:
You click on the navigator "Home" then a the bottom of the screen It loads a page witch text saying for example "Hello Word!".
Does anybody know what to do? I'm pretty sure It involves JavaScript.
To dynamically load content, you could make an AJAX call using XMLHttpRequest().
In this example a url is passed to the loadPage() function, in which the loaded content is returned.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function loadPage(href)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
}
</script>
</head>
<body>
<div onClick="document.getElementById('bottom').innerHTML =
loadPage('hello-world.html');">Home</div>
<div id="bottom"></div>
</body>
</html>
When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.
hello-world.html
<p>hello, world</p>
Ok, what you are looking for is a single page application.
There are plenty of technologies implementing it, but not that easy.
Here is a tutorial I followed for doing it : http://andru.co/building-a-simple-single-page-application-using-angularjs
If you want to go further with SPAs, you will certainly need angular templates.
It's not necessary to use Ajax calls to load html. Use them when need the server to process data successfully before loading the page, if processing was successful.
If you don't have this concern, and you just want to load the html without data processing, a simple anchor tag will suffice:
click
I am looking to find a way to have jQuery Mobile render data being loaded onto the page. I know that very similar topics has been discussed mn the past, but nothing seems to be a perfect match (or close enough to result in me finding an answer).
The issue is that jQuery mobile will dynamically apply classes to HTML elements when a page is loaded. Content being pulled in through JavaScript does not get transformed because the process is run before the JavaScript content is placed onto the page. The fix for this supposedly is to use the .trigger('create') function. It seems though that this doesn't work when you use the load() function to pull content from external pages.
I am able to get the data from the twitter.html file (example below) just fine, it just isn't being formatted via jQuery Mobile
To help demonstrate my point, I've tried to put together some starter examples of the script. Unfortunately because I am loading an external file there is no easy way to represent this issue without saving the files to your computer to test them out.
Main file (index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://jquerymobile.com/demos/1.1.1/js/jquery.mobile-1.1.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://jquerymobile.com/demos/1.1.1/css/themes/default/jquery.mobile-1.1.1.css" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$('#container').load('twitter.html');
$('#container').trigger('create');
});
});//]]>
</script>
</head>
<body>
<div data-role="page" class="type-home">
<div data-role="content">
<!-- Load the Twitter Data -->
<div id="container"></div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<li data-role="list-divider">Sample</li>
<li>Ignore this</li>
<li>And look for Twitter data above</li>
</ul>
</div><!--/content-->
</div>
</body>
</html>
File being called (twitter.html)
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function($) {
var url = "http://search.twitter.com/search.json?callback=?&rpp=10&q='jquery'";
$.getJSON( url, function( data ) {
var twitterList = $( "<ul data-role='listview' data-inset='true' data-theme='c' data-dividertheme='b' />" );
$.each( data.results, function( index, item ) {
$( "<li />", { "text" : item.text } )
.appendTo( twitterList );
});
$( "#tweets" ).fadeOut( "fast", function(){
$( this ).empty()
.append( twitterList )
.fadeIn( "slow" );
});
});
});
</script>
<div id="tweets">Loading Tweets...</div>
Can anyone provide an example of a working method to call a file in this way?
Pages that I've looked into related to this:
I have like 10 pages to reference, but I'm a noob on this site so I am limited to just 2.
http://blog.stikki.me/2011/08/18/loading-dynamic-content-in-jquery-mobile-with-jquerys-load-function/
http://blog.dkferguson.com/index.cfm/2011/3/15/jQuery-Mobile-styling-loaded-content
I've literally spent the past 7 hours trying to work this out, so any help would be greatly appreciated. I am brand new to the world of JavaScript, so please take it easy on me.
As you know, In JQM, the loaded pages are not suppose to use $(document).ready. If you are in control of the page that is coming from the external source, than please modify the function to pageInit, otherwise, you will need a way to hook into the function call that external page is making.
Try extending the functions that downloaded page is calling. In this example: $.getJSON. In the extended function, wrap success function with your function that does pageCreate after executing the success function.
JQM Reference:
You have to either trigger "refresh" event on updated elements, or "create" on parent element of newly added added elements after you've changed the HTML. E.g. $('ul').listview('refresh').