This is the first time I'll try to move all the script from html file to an external Javascript file because I think it will be more organized to separate display from script codes.
So originally I have
html
<body>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle" >Menu</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
Which I tried to translate or move to an external file.
html
<body>
Menu
<script src="myjsfolder/externalJavascript.js"></script>
</body>
externalJavascript
function showHideMenu(){
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
}
I know this may look like a silly question but I just can't get it correctly. But I know I need to move the script outside. Everything works correctly when inside the html file.
Thanks.
You need to
Not add the onclick=... to your HTML
Wrap your Javascript in the other file in `$(document).ready(function(){//your code here//});
Edit
as nnnnn pointed out, since you are including the file inside the <body> tag instead of the <head> tag (where I normally put my scripts) then you don't really need the $(document).ready() wrapper.
$(document).ready(function() {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Menu
<!-- <script src="your-file.js" type="text/javascript"></script> -->
</body>
Edit 2
Using the onclick syntax would look something like this.
//your-file.js
function menu_toggle_click(e) {
$("#wrapper").toggleClass("toggled");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Menu
<!-- <script src="your-file.js" type="text/javascript"></script> -->
</body>
Related
Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin tÃtulo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>
It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.
Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>
My javascript isn't currently working. I guess while I'm at it, is there any programs that I can use that can essentially give me errors made so that I am able to trouble shoot myself?
Javascript...
<script type="text/javascript" src="/js/jquery-ui.min.js">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
Button used to fadeout...
<button class="button">Respond</button>
HTML That I want to fade out...
<div id="ticketTable">
<table border="1" width="1000" class="transparent">
<tr><th width="15%">Ticket</th><th width="15%">Queue</th><th width="15%">Severity</th><th width="15%">Created</th><th width="15%">Creator</th><th width="25%">Subject</th></tr>
</table></div>
Your code seems fine but the way you are including your .JS file (and later initializing behaviour) seems incorrect.
Try adding this to your page's <head> tag, and change your JS <script> tag like this:
<head>
<script type="text/javascript" src="/js/jquery-ui.min.js"></script>
<!--other script and also external css included over here-->
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(){
$("#ticketTable").fadeOut( 'slow', function(){
});
});
});
</script>
</head>
DEMO: JS Fiddle
I am using a script to make tables in html sortable. The script is here- http://www.kryogenix.org/code/browser/sorttable/. I want the text which sorts the html table to be clicked automatically when the i loaded. The autoclick script i am using is this-
<head>
<script LANGUAGE='javascript'>
function autoClick(){
document.getElementById('sort').click();
}
</script>
</head>
<body onload="autoClick();">
<table><tr><th><p id="sort">Click here to sort the table</p></th>...
The problem is that this is not working and i am confused that why this isnt working.
--------------------EDIT------------------
Sorry for this but actually i was typing something wrong in the body onload statement. Thus the script i was using was correct.
Where have you defined your event?
Because I see juste one function in your onload.
Below, a little example which work fine:
<html>
<head>
<script type='text/javascript'>
var init = function()
{
document.getElementById('test').addEventListener('click', function() {
alert('Auto test is ok');
}, false);
};
function autoClick(){
document.getElementById('test').click();
}
</script>
</head>
<body onload="init(); autoClick();">
<button id="test">Test</button>
</body>
</html>
It's always safer to use Jquery library. Just include the latest Jquery library on your header section of the page:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and this function Should solve your issue:
$("#sort").live('click');
I think you missed the class name in the table
Please add your table tag with class name called "sortable".
help me please to figure out what I'm missing.
That's my html named "test.html"
<div id="div-test">
lalalalaal
<ul>
<li>Hi</li>
<li>By</li>
</ul>
</div>
And that's another html file in the same directory, that contains this:
<div id="result"></div>
<script type="text/javascript">
$(function() {
$("#result").load("test.html");
});
</script>
But it doesn't load anything.
however, this works fine:
<div id="result"></div>
<script type="text/javascript">
$(function() {
$("#result").html("i see this text");
});
</script>
When i need to load data regularly i just create a function to load dynamically so i can either call it when i need, or when the page is done loading
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
function loadContent(divName,pageURL) {
$("#" + divName).load(pageURL);
}
$(document).ready(function() {
loadContent('createArea','create_login.php');
});
</script>
</head>
<body>
<div style="float:left;width:500px;min-width:500px;min-height:200px;">
<div id="createArea" name="createArea"></div>
</div>
</body>
</html>
As noted below, this will not execute locally unless you're running a WAMP server. Also the paths to the files you are loading may need to be relative if they are not residing in the same directory as the page with this code.
If you use Chrome or IE9, try monitoring XHR network calls to see what
really happens. On chrome, you monitor XHR calls by
Clicking on F12
Click network button
Click on XHR label at the very bottom of the console.
With the console open, exec the page whose code doesn't work and check if there's an actual data exchange.
Hope it helps
try this:
<div id="result"></div>
<script type="text/javascript">
$(function() {
$("#result").load("/test.html"); // add "/"
});
</script>
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.