Response title
This is preview!
new to jquery & help needed - first script works only in chrome! not safari and not firefox
in Getting Started
•
12 years ago
hi all,
i am new to jquery and this forum. i hope this is the right forum to post as i don't want to post on multiple forums to confuse people.
i am working on a few scripts (basically putting together examples i've learned in javascript: the missing manual) that will turn the links in a home page to load pages from the same server. there are two such links in the page now. i want the home page (with the links as navigation menu) to load those links in a separate <div> on the same page without moving to those linked pages.the first link leads to a page with another javascript linked to it that performs form submission. the second link leads to a page that has another javascript that returns a list from the database using getJSON. for some reasons, the completed pages work just as i had planned in chrome, but not in safari and firefox. all browsers running the latest version. hope someone here can help. many thanks!
errors:
in safari, the home.html displays ok and content of add.html loads when the link is clicked. but content of list.html won't load when clicked. actually, something does happen. whatever was displayed in the content area disappeared when the link is clicked.
in firefox, admin.js doesn't work at all. when a link is clicked, the browser will move to that page without staying in home.html. i have firebug installed and it reports jQuery is not defined in all the javascripts i downloaded from jquery! as for my admin.js it says $ is not defined ! i have no idea. because the same codes in the other browsers (with the exception of chrome) are at least working as if jQuery is working.
codes:
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="js/ui/css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/ui/development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="js/home.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#home">home</a></li>
<li><a href="add.html" id="formLink"name</a></li>
<li><a href="list.html">name list</a></li>
</ul>
</div>
<div id="content"></div>
</body>
</html>
home.js
$(document).ready(function() {
$('#tabs a').click(function() {
var url = $(this).attr('href');
$('#content').load(url);
return false;
});
}); // end ready
add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/add.js"></script>
</head>
<body>
<div id="form">
<form id="add_name" method="get" action="php/add_name_ajax.php" autocomplete="off">
<div>
<label for="first_name">first name:</label>
<input id="first_name" name="first_name" type="text" required/>
</div>
<div>
<label for="last_name">last name:</label>
<input id="last_name" name="last_name" type="text" required/>
</div>
<div>
<input type="submit" name="" value="next" />
</div>
</form>
</div>
</body>
</html>
add.js
$(document).ready(function() {
$('#add_name').submit(function() {
var formData = $(this).serialize();
$.get('php/add_name_ajax.php', formData, processData);
function processData(data) {
if(formData!=='failed') {
$('#add_name').html('<p>updated</p>');
} else {
if(formData == 'failed') {
$('#add_name').prepend('<p>error</p>');
}
}
} // end processData
return false;
$('#add_name').prepend('<p>success!</p>');
}); // end submit
}); // end ready
list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/list.js"></script>
</head>
<body>
<div id="list"></div>
</body>
</html>
list.js
$(document).ready(function() {
$.getJSON('php/list_ajax.php', function(data) {
var items = [];
$.each(data, function(i) {
items.push('<tr><td>' + data[i].first_name + '</td><td>' + data[i].last_name + '</td></tr>');
});
$('#list').html('<table><tr><td>'+items+'</td></tr></table>');
});
}); // end ready
1
