<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Collapse content</title>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true
});
$("#tabs-2").load("something.html");**
});
$(function() {
$( "#datepicker" ).datepicker({maxDate: new Date(1997,11,31)});
});
</script>
</head>
<div id="tabs">
<ul>
<li>Alienware and Alpha</li>
<li>More About</li>
<li>Contact Us</li>
</ul>
<div id="tabs-1">
<p>blah blah</p>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div> <br>
<div id="mini">
<p><span class="italics">Please complete the form</span></p>
<fieldset>
<form id="appForm" action="submit.php" method="post">
**Some form details here (avoided to make the post more readable)
</form>
</div>
</body>
</html>
here is my something.html code:
<html>
<head>
<title>Ajax tab 2 </title>
<meta charset="utf-8">
</head>
<body>
<p>This is p2!!</p>
</body>
</html>
I've already had a thread about this, but none of the suggestions were useful. So Im making another one. .load method does not produce any results at all. Intially i thought this was some sort of browser issue, hence i tried all possible browsers and even tried it on different OS's just to be sure. But it still doesn't work. There is no error displayed. In fact there is nothing from 'something.html' displayed on tab2(i.e "More about") at all. In brief, the .load method does not really load anything from 'something.html'
UPDATE: SOLUTION: this does not work locally, it works just fine when both the index file and 'something.html' are uploaded onto a server
If "something.html" is a file you've created yourself, maybe try to include that file as a link <link href="something.html"> in the header. Not sure if it's going to work but try.
When dealing with jQuery Ajax usually the url is where the server access the data. Get it? You probably have an external file so you try as mentioned above.
Surely somebody mentioned this in your other post... but you probably have to enclose it in a $(document).ready(. Otherwise, the javascript could execute before the #tabs-2 element loads.
$(document).ready(function(){
$("#tabs-2").load("something.html");
});
Check out the documentation for more info.
I have some notes about your question:
If you are testing, running your files with file protocol (opening your files with the browser) AJAX (XMLHttpRequest) will not work in some browsers, such as Chrome. But if you start your local server on localhost for example, your AJAX requests will work properly.
When loading partial content, you should not include it as a full HTML document, so get rid of the <html> and <body> wrappers for your partial content. something.html only should contain: <p>This is p2!!</p>
If you are including scripts that depends on DOM elements at <HEAD> then you should add the defer attribute to your <script> tags, OR move your <script> tags at the end of <BODY> OR you should wrap your code to run when the DOM is ready:
$(document).on("ready", function() { /* CODE HERE */ });
// Shorthand for $(document).ready()
$(function() { /* CODE HERE */ });
Related
The below Jquery does not run within my browser even though the syntax is correct( checked via online syntax checker) and the functions do run (tested with pure JS). Why is it that so?
I apologize in advance if the answer to this question is rather simple but after 15min of googling I could not arrive at an answer.
JAVASCRIPT:
document.getElementById('overlay').addEventListener('click', function( {
closeLightBox()
});
function closeLightBox() {
$("#overlay").fadeOut(1000);
}
function lightbox(x) {
}
HTML
<!DOCTYPE html>
<html>
<head>
<title> Lightbox </title>
<link rel="stylesheet" type="text/css" href="lightboxcss.css">
</head>
<body>
<div id = "overlay"> </div>
<img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">
<br><br><br><br>
<p> RANDOM TEXT STUFF </p><br><br>
<p> 328ueekfuuirgh40t43h8hohro8ht </p>
<script src="lightboxjs.js"> </script>
</body>
</html>
I assume that javascript code is located in your .js file "lightboxjs.js". Did you include the jQuery library anywhere?
If you don't, start by adding this line <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> before including your custom javascript file.
$(document).ready(function(){
//page is ready
$("#overlay").on("click",function(){
this.fadeOut(1000);
});
});
You cannot add an eventlistener if the dom isnt loaded. Also dont forget to include jquery before executing the upper script
...
Where are you calling the jquery lib? You need to load the jquery just above lightboxjs.js and may as well use jquery syntax to listen to the #overlay click event.
Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.
Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
I try run the following code in Firefox 27.0.1 and Chrome 30.0.1599.114 on a machine with Kubuntu Linux, and nothing happens.
The html page is part from a web application based on Spring MVC framework, and was placed in the folder WEB-INF/jsp. Someone can find any error in the code below?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$('a').click(function() {
alert("clicou em um link");
});
</script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>
You don't say what your "errors" are, but my guess is you've left out the document ready handler, so by the time your selector is run, the elements are not ready in the DOM yet.
$(function() {
$('a').click(function() {
alert("clicou em um link");
});
});
You are selecting all the a elements that exist at the time the script runs (all zero of them since the script runs in the head and all the a elements exist in the body) and doing stuff to them.
Move the script to just before </body> or create a function and run it on DOM ready.
jQuery(function () {
$('a').click(function() {
alert("clicou em um link");
});
});
… then there will be actual a elements you can manipulate.
You need to wrap your code inside DOM ready handler $(document).ready(function() {....}) or shorter form $(function() {.... }) to make sure all of your elements are properly added to the DOM before executing your jQuery code.
$(function() {
$('a').click(function() {
alert("clicou em um link");
});
});
My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>