I have to reference my two html documents in divs to a primary html and I can't get my other htmls to render.
This is my script in the head:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
These are the divs in the body:
<div id="left"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#left').load("left.html");
});
</script>
<div id="right"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#right').load("right.html");
});
</script>
Move your script to the header:
<script type="text/javascript">
$(document).ready(function(){
$('#left').load("left.html");
$('#right').load("right.html");
});
</script>
Then ensure that your relative URIs are correct. Are both left.html and right.html in the same folder on the server as the page that requires them?
Related
I have index.php in which I would like when the user clicks the button "Click" it to redirect to "newpage.php" but also for another page "Click.php" to be loaded into the div "content" within the newly loaded "newpage.php".
Similarly I would like for when "Click Also" is clicked for the user to be redirected to the same page "newpage.php" but a different page "ClickAlso.php" to be loaded into the same div "content".
index.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location.replace("newpage.php");
});
$(document).on('click', '.clickmealso', function() {
window.location.replace("newpage.php");
});
});
</script>
</head>
<body>
<div>
<button class="clickme">Click</button>
<button class="clickmealso">Click Also</button>
</div>
</body>
</html>
newpage.php
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Try this solution:
index.php
change your document ready event to redirect to newpage.php using url params. For this example I used a parameter named 'page'.
$(document).ready(function() {
$(document).on('click', '.clickme', function() {
window.location = ("newpage.php?page=click");
});
$(document).on('click', '.clickmealso', function() {
window.location = ("newpage.php?page=clickAlso");
});
});
newpage.php
Define what happens once the page is accessed. This is where things get a bit more interesting. Each time this page (newpage.php) loads, it looks for the parameter 'page' in the URL and extracts its value. The parameter's value is then assigned to a variable I called $pageToGet.
After that we check whether the value is equal to 'click' or 'clickAlso' and we display the content accordingly using require.
<?php
$pageToGet = $_GET['page'];
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="content">
<?php
if ($pageToGet == 'click') {
require('Click.php');
} elseif($pageToGet == 'clickAlso') {
require('ClickAlso.php');
}
?>
</div>
</body>
</html>
Be sure to have your files: Click.php and ClickAlso.php in the same directory for this to work.
Good Luck
I downloaded jQuery UI 1.10.3.
And it comes with an older version of jQuery which is 1.9.1.
And I have a later version of jQuery: 1.10.2.
But jQuery UI seems does not like to work with 1.10.2...
Is there anyway to make it works?
Or I should just live with it..
<script src="js/jquery-1.9.1.js"></script>
<!--
<script src="jquery-1.10.2.min.js">
-->
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
<script src = song_Selector.js>
</script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
Codes are above, without the <html> tag.
When you are loading the script, you've forgotten the end tags, and you've also forgotten your <head> tags if this is the whole document:
<!-- <script src="js/jquery-1.9.1.js"></script> -->
<script src="jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<script src = song_Selector.js></script>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
<body>
<p id="demo">Click the button to do something.</p>
<button onclick="draw_Progress_Bar ()">Try it</button>
<h2 class="demoHeaders">Progress Bar</h2>
<div id="progressbar"></div>
</body>
What happened was actually the following when you uncommented jQuery 1.10.2:
<script src="jquery-1.10.2.min.js">
<script src="js/jquery-ui-1.10.3.custom.js"></script>
</script>
As any text inside a <script> tag is ignored with an src attribute set and will not be parsed, this will not be loaded.
Before, it would have worked fine as it would have simply been the following:
<script src="js/jquery-ui-1.10.3.custom.js">
</script>
</script>
... with the text inside the tag being ignored, as there is a src attribute (with this having no effect).
you can this by function load script
function loadscript(url){
var doc = document.getelementbytagname("head");
var script = document.createlement("script") ;
script.url = script
}
How can I reload Reddit buttons with jquery? I have load more ajax function and Reddit buttons don't appear when loaded via jquery. I tried to use:
$.ajax({ url: 'http://www.reddit.com/static/button/button2.js', dataType: 'script',
cache:true});
This is the actual button attached to each post:
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
Thanks
You can accomplish this by updating the Reddit iframe's "src".
$('some-surrounding-div-here').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
Here it is in a full working example:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#refresh_reddit_button').click(function(){
$('#reddit_button_container').find('iframe').attr('src','http://www.reddit.com/static/button/button2.html?width=51&url=http%3A%2F%2Fdomain.com%2Fpost-num');
});
});
</script>
</head>
<body>
<input id="refresh_reddit_button" type="button" value="Refresh Reddit">
<div id="reddit_button_container">
<script type="text/javascript">
reddit_url = "http://domain.com/post-num";
</script>
<script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
</script>
</div>
</body>
</html>
I need to do the following:
When access mysite.com check if another page X contain div id "intro", if so, redirect mysite.com to mysite.com/search. If page x does not contain div id, load mysite.com.
I tried this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#result').load('Page2.html #intro');
});
</script>
page with div id :
<div id="intro" style="display: none">My sample content</div>
This is it ?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>
<script type="text/javascript">
jQuery(function($)
if ($('#result').load('page2.html #divID').length === 0){
window.location.href = "redirect.html";
}
</script>
What I am trying to accomplish is, using jQuery, dynamically replace the content (generated from another javascript) of div tag with id="Test".
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
$("#Test").html('<b>test content</b>');
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
As you can see,
$("#Test").html('<b>test content</b>');
replaces the html code of div tag with id="Test" with html code
<b>test content</b>
this works perfectly fine. I am getting rendered html as
begin
test content
end
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function TestScript(){
document.write('<b>test content</b>');
};
</script>
<script type="text/javascript">
$(function(){
$("#Test").html(TestScript());
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
Here,
$("#Test").html(TestScript());
replaces the html code of div tag with id="Test" with generated html from javascript
TestScript()
I am getting rendered html as
test content
It replaces the entire content of the html file. How to resolve this problem?
Kindly help.
Thanks,
John
Try this:
<script type="text/javascript">
function TestScript(){
return '<b>test content</b>';
};
</script>