I am currently working on a chat system experiment, and have run into an issue.
This is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function getUpdates() {
$('#updates').load('chatlister.php', function() {window.alert('Load was performed.');});
}
setTimeout(getUpdates(), 1000);
</script>
</head>
<body>
<p>The updates are:</p>
<div id="updates"></div>
</body>
For some reason, the jQuery .load() function is not loading anything into the "updates" <div> section of the page. I checked chatlister.php and made sure that it had output, and I also made sure that the two files are in the same directory. I am very new to jQuery, so please bear with me. What did I miss?
You need to wrap your code in this
$(document).ready(function(){
// Code here
});
Because the code is never being executed, either that, or your php is wrong.
You should have a look at jQuery AJAX
You have to wait for the DOM to be created so run only after the document is ready:
$(document).ready(function(){
$('#updates').load('chatlister.php', function() {window.alert('Load was performed.');});
});
If you want to run it every seconds:
$(document).ready(function(){
var getUpdates = function() {
$('#updates').load('chatlister.php', function() {window.alert('Load was performed.');});
}
setInterval(getUpdates, 1000);
});
Related
I have this very simple html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/app.js"></script>
<script src="js/model/dinnerModel.js"></script>
<script src="js/view/exampleView.js"></script>
</body>
</html>
And the javascript files that are included in the bottom are:
app.js:
$(function() {
var model = new DinnerModel();
var exampleView = new ExampleView($("#exampleView"));
});
dinnermodel.js:
var DinnerModel = function(){
// some js stuff
}
exampleView.js:
var ExampleView = function () {
// more js stuff
}
This runs fine for me, and my question is: why? When app.js is included in its script tag, dinnermodel.js and exampleView.js have clearly not been loaded yet, so I should get an error in app.js saying that DinnerModel is not declared, right?
Because $(function() {}) waits until dom is ready and that means the other scripts have loaded before the code inside it gets executed
Great question.
It works because you're waiting for the document to be ready, please refer to this website. https://learn.jquery.com/using-jquery-core/document-ready/
Doing $( document ).ready(function() { or $(function() { is the exact same thing.
By the time the page executes the function inside $() the whole content was loaded and ready to use.
//index.php
<head>
<script src="/js/test.js"></script>
<style></style>
</head>
<body>
<script>
callalert();
</script>
</body>
//test.js
function callalert() {
alert('Allertt');
}
eg: i change the fn completely to: callalert(msg) {
var msg;
alert(msg);
}
//and html to:
callalert('Hello!');
//and it wont change, it still says "Allertt"
Anything would be appreciated!
So recently i've tried to implement some javascript libraries to a webpage. But html wont call anything from other js files. I tried many things, calling simple functions from js files, and somtimes it works but when I delete the test, function the page will display the same result as the functions is still there. It will take a long time for it to respond to the changes of the js.
I even tried from diffrent devices.
Anything would be appreciated!
Edit: When i posted this i modified the function from 'Allertt' to 'Hello!'.
Now, that I checked after 5hrs the script is updated. Also, yes this is running online on a server.
I have prepared an example for you, which works perfectly:
HTML FILE
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<script>
myFun();
</script>
</body>
</html>
External JS
function myFun(){
alert('test');
}
This calls myFun from external file, on every refresh, like it should.
I'm new to jQuery, so this should be a simple question.
As far as I understand, I can bind a method to listen to an event, such as the click of a button, using
$('#buttonID').bind('click', function (){//some code});
However, this isn't working for me, so I must be doing something wrong.
This is my simple html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
</body>
</html>
Apart from loading jQuery files, it loads file test.js, which looks like this:
// JavaScript Document
$('#SignIn').bind('click', function() {alert('hi');});
Is that not enough for binding? I was hoping this would fire an alert dialog, but it doesn't, it seems the callback is not executed at all.
What is wrong here? Both files (html and js) are located in the same directory, and Google Chrome does not complain about anything in the JavaScript console, so from that end, everything should be fine.
Thanks for all help!
Wrap your code in document ready handler. It accepts a function which executes when DOM is fully loaded.
As you are using jQuery 1.3
$(document).ready(function() {
$('#SignIn').bind('click', function() {
alert('hi');
});
});
For jQuery 1.7+,
$(document).ready(function() {
$('#SignIn').on('click', function() {
alert('hi');
});
});
Additionally, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
$(function(){
$('#SignIn').bind('click', function() {alert('hi');});
})
Try
$(function(){
$('#SignIn').click(function() {alert('hi');});
});
Move your Javascript to the bottom of the HTML page, right above the closing body tag.
That way the DOM is ready when it is loaded, and there's no need for $(document).ready() calls.
https://developer.yahoo.com/performance/rules.html#js_bottom
You may want to include your JavaScript files at the very bottom, and everything should work as expected. It is recommended to do this and to include CSS files at the top (head tag). For more information see link included by #Grim...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</body>
</html>
$( "#target" ).click(function() {
//Write some code here
});
You can try this.
$(document).ready(function(){
$('#SignIn').on('click', function() {alert('hi');});
});
You can use this.
$(document).ready(function () {
$("#SignIn").click(function () {
alert('demo');
});
});
Scenario: You have a script that users can place on their website and when they click on it, it redirects to my website then calls a function only after they have successfully been redirected to my website and the function is part of my website, so there shouldn't be any problem with the same origin security policy.
So is the scenario possible?
EDIT
Ok now that I know that it can be done, I run into a pickle doing this.
function main(){
$(document).ready(function($){
window.location.href = 'http://www.example.com/michael';
theclient.chat();
});
}
I want theclient.chat() to be called after example.com/michael is loaded but it's not working.
UPDATE 2
function main(){
window.location.href = 'http://www.reflap.com/michaelnana';
$(document).ready(function(){
theclient.chat();
});
}
So will this work?
You have to call that function on your own site in the following block:
Source page:
function main(){
window.location.href = 'http://www.example.com/michael';
}
Target page (http://www.example.com/michael):
$(document).ready(function(){
theclient.chat();
});
To be clear: this will be called, if you type the URL of the page too and not only after a redirect.
You should add a URL parameter when you do the redirect, if you want to call it only after a redirect.
UPDATE:
You cannot call a function on the original page, after the redirect has been done.
On your target page, if you include the jQuery library, use this code:
$(document).ready(function(){
theclient.chat();
});
The ready() method makes sure the page (http://www.reflap.com/michaelnana) is rendered before running your JavaScript.
I've included 3 sample files that should serve as a skeleton for what you're trying to do.
www.external-site.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>3rd Party Page</title>
</head>
<body>
<script type="text/javascript"
src="http://www.example.com/michael/embed.js">
</script>
</body>
</html>
www.example.com/michael/embed.js
// load jQuery, keep it in our scope
// I'll not explain how this works but if you're making an embed
// script for other sites, you must make sure to encapsulate all
// your dependencies such as jQuery.
loadDependencies(function($) {
// document onload
$(function() {
// create a button that redirects to example.com/michael
var button = $('<a>').text('click me').click(function() {
window.location.href = 'http://www.example.com/micahel';
});
// insert that button after this script tag
var src = 'http://www.example.com/michael/embjed.js';
$('script[src="' + src + '"]').after(button);
});
});
www.example.com/michael/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Landing Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="theClient.js"></script>
<script type="text/javascript">
$(function() {
// all visitors to this page will trigger this call, not just
// the ones who came from the script embed. If you want to
// differentiate I'd recommened adding a query paremeter to
// the redirect and reading it there.
theClient.chat();
});
</script>
</head>
<body>
</body>
</html>
I have a page that looks like this..
<!DOCTYPE html>
<html>
<head>
<title>JQM</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script>
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
I am adding html in dymanically from the server in the content area. The problem is that when I add the content dynamically, the jquery function that I created statically on the page doesnt engage..
<script>
$(function(){
$('[data-role="list-divider"]').toggle(function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
</script>
If I add the html statically all the code works fine and everything is good. My question is how do I make this jquery available to run once html is added to the page from the server?
I DID THIS AND IT WORKED, is there a more elegant way using .on or is this fine?
//got html blob
deferred.success(function (res) {
$(function () {
$('[data-role="list-divider"]').toggle(function () {
$('.' + $(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
}, function () {
$('.' + $(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
});
Since the jquery is currently ran when the document is ready and your content is not loaded yet it won't find the elements and wire-up the events. Adding your script to the ajax.success should solve your problem.
looking at your code, I don't see where you're loading the content dynamically. But if you want that script to run. You should try a document.ready() in front of that script
You can't bind event handlers to elements that haven't been created. Check out this:
http://api.jquery.com/on/
Try this:
$(function(){
$(document).on('toggle', '[data-role="list-divider"]', function(){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});
Haven't tested it though. For on('click') this usually works.
What you do is you bind the 'toggle' trigger to the whole document ( $(document) ) and then check on what element is was triggered. This way you can detect elements that were created after the initialization of the DOM.
You have to use jquery .On() method to attach even handlers to contents dynamically added to pages. Check this - .on
Some thing lik this might work (didn't test) :-
$(function(){
$('[data-role="list-divider"]').on('toggle' ,function(event){
$('.'+$(this).attr('data-link')).addClass('show');
$(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');
},function(event){
$('.'+$(this).attr('data-link')).removeClass('show');
$(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
});
});