A web page is runing at client side and there is div in the page which dynamically changes it's innerHTML via ajax fn() but i get issue with jQuery fn() which is not running.
suppose this is the running web page
<html> <head>
<script type="text/javascript" src="jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="jquery-ui.min.1.8.11.js"> </script>
</head> <body>
<div id = "dynamic"> </div>
<input type = "button" id="click" />
<script type="text/javascript">
$("#click").click(function(){
// send request to server via ajax (xmlHttprequest )
// get html contents as responseText
$("#dynamic").html(responseText);
});
</script>
</body> </html>
As you can see above in the given example, if client clicks on button, a request sent to server and gets innerHTML as responseText which is put into dynamic div.
*responseText as innerHTML working : * css properties are loaded and working
<div id="myDiv"> </div>
<style type="text/css">
#myDiv { width: 100%; height:100%; background: blue; }
</style>
innerHTML isn't working : css properties isn't working if i use jQuery to load the css file
<div id="myDiv"> </div>
<script type="text/javascript">
$(document).ready(function(){
$("head").append($("<link rel='stylesheet' href='test.css' type='text/css' />"));
});
</script>
and the test.css is at server (the css properties is defined in external files to)
#myDiv { width: 100%; height:100%; background: blue; }
if the function lives in the global space
window["functionName"]();
If you've namespaced, then
myNameSpace["functionName"]();
If you are looking to dynamically add a style-sheet to the DOM then try this:
$.get('test.css', function(responseCSS)
{
$('<style type="text/css"></style>').html(responseCSS).appendTo("head");
});
Related
I'm using the following javascript to print a page then I want to redirect after either canceling or accepting the print.
<script type="text/javascript">
window.print();
window.location.replace("URL");
</script>
Everything works but when I add the window.location it adds a full blank page before the pages I'm printing.
you need to add a property in CSS #page{margin:0}
you can try this code :
<!DOCTYPE html>
<html>
<head>
<title>tp</title>
<style type="text/css">
#page{
margin: 0mm;
}
*{
padding: 0;
margin: 0;
background: red;
}
</style>
</head>
<body>
<p>test</p>
<script type="text/javascript">
window.print();
window.location.replace("http://www.google.com");
</script></body>
</html>
Although I didn't solve the problem, I fixed it by having the page open in a new tab so I can avoid a redirect altogether.
I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#js-hidden').hide();
})
</script>
There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.
Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.
PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)
$(document).ready makes it happen after full page loaded you can use
<body>
...
<div id="js-hidden"></div>
...
<script src="jquery.js"></script>
<div id="js-hidden"></div>
<script>
$('#js-hidden').hide();
</script>
Simplest thing:
<style>
.js-hidden {
display: none;
}
</style>
<noscript>
<style>
.js-hidden {
display: block;
}
</style>
</noscript>
Since you cannot use onload event on div I guess the best solution is put your js right after that div...
I'm trying to use AnyOrigin to load a url into my iframe:
Problem: It loads an empty frame, what am I doing wrong?
Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
$('#output').html(data.contents);
});
</script>
</head>
<body>
<iframe id="output"></iframe>
</body>
</html>
Anyorigin uses JSONP, so you don't load it using an AJAX call. Instead, the callback query parameter should be a function name, and you should load it like a regular script tag:
<script src="http://anyorigin.com/get?url=google.com&callback=myCallbackFunction"></script>
When the script is loaded, it will automatically execute a function with the name that you specified in the callback query parameter. Of course, for it to work you need a function defined like so:
<script>
function myCallbackFunction(myData) {
//myData.contents has your html, do something here
}
</script>
Please note that the function must be defined before the script, so either the script needs to be embedded dynamically or you need to define the function before the script.
There are a few tricky parts, such as how you were populating the iframe, and how the function callback needs to be declared, so I've included a full example here:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
$(function() {
$("#test").contents().find('html').html(myData.contents);
});
}
</script>
<script src="http://anyorigin.com/get?url=http://google.com/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>
</html>
Note that I've wrapped the call to updating the iframe's contents in a jquery document onload event. If that's not done, then the call will attempt to populate the iframe before it exists, and will silently fail.
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
I'm loading a file into a div with load() function, but after I load the data - the styles for it doesn't want to work.
For example:
index.html:
$("a ").click(
function(e)
{
e.preventDefault();
$("#Display").load('file.html');
$("#Display").show();
});
file.html:
<h1 id="title">Item number #1</h1>
<p id="content">Lorem ipsum like text...</p>
style.css:
#title {
color: red;
}
#content {
color: green;
}
After I click "a" link, the content is loaded to #Display div, then it's perfectly displayed, but the title header is not red and content paragraph is not green.
I believe that's a default behavior because when site loads at first there are no such elements and I'm loading them dynamically with jQuery. Is there a way to lazy load them and refresh style-sheet in the background somehow? Or any other tricks to help me?
Thanks a lot!
Is the stylesheet referenced in the head element of the file being loaded? If so, it won't be loaded by load because load silently filters everything but the content of the body element. If you include the stylesheet in the document from which the script runs and into which the other document will be loaded, it should work just fine.
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen />
...
<script type="text/javascript" src="...jquery.js"></script>
<script type="text/javascript">
$(function() {
$("a").click( function(e) {
$("#Display").load('file.html');
$("#Display").show();
return false;
});
});
</script>
</head>
<body>
<p>Load Content</p>
<div id="Display"></div>
</body>