I am using phonegap, and this code loads perfectly in my android mobile.But When i click the button it does not shows the text.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
</script>
</head>
<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>
</body>
</html>
I don't think that JQuery is being loaded into the page.
You have referenced it as
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
which says use whatever protocol the current page is being server from. On a mobile device you are being served from file:// so the actual request the browser makes to fetch the script is:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
You need to specify the scheme you want to use or else include it in the PG project itself.
When working with mobile devices, it is greatly recommended that you use the mobile version of jquery, jquery.mobile.js
Then you can use vclick and everything works fine:
Normalized event for handling touchend or mouse click events on touch
devices.
$(document).ready(function(){
$("#btn1").vclick(function(){
$("#test1").text("Hello world!");
});
});
try using this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).on('pageinit', function(event){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">
</script>
</head>
<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>
</body>
</html>
Instead of doc ready use pageinit of jQuerymobile if developing for mobile apps.
Related
Can someone help me? I wrote simple code in javascript and it wont work for some reason. I tried to figure out but i cant see why. I have downloaded jquery and it is all ok with it, also i tried only javascript code and still same problem. Browser is ok it load jquery and javascript on file i made earlier but doesnt load on this.Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js">
$('#btn').click(function f() {
console.log(1);
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
<head>
<title>Proba</title>
</head>
<body>
<button id="btn">Click</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(
console.log(1);
))
})
</script>
</body>
Try like this :)
You are binding your event handler, before the browser was able to parse your HTML. So #btn element is not in the DOM yet at this point.
Either wrap you code inside document.ready or move the script to the bottom of the body tag.
1st Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function() {
$('#btn').click(function f() {
console.log(1);
});
});
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
2nd Approach
<head>
<title>Proba</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$('#btn').click(function f() {
console.log(1);
});
</script>
</body>
Have you verified "jquery-3.3.1.js" really exists in the current directory? Try instead loading the script through a known host, like Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
EDITED: Added working code. Note button checking must be done when document has finally loaded.
<!DOCTYPE html>
<html>
<head>
<title>Proba</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function() {
console.log(2);
});
})
</script>
</head>
<body>
<button id="btn">Click</button>
</body>
</html>
I want to call a partial html page using jquery. I have seen this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.1.0.min.js"></script>
<script type="text/javascript"> $('#result').load('Ajax/test.html'); </script>
<title>Home</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
and in the path Ajax/test.html i have this test.html:
<h1>Hey World</h1>
The problem is it does not load the Hey World into the main page. Also, there is no error in console.
What is the problem?
As with $('#result'), jQuery is unable to find the element as DOM is not ready hence jQueryObject.load method is never invoked.
Wrap your script in $(document).ready or Place your <script> as last-child of <body>(Just before closing body tag(</body>))
There are also DOMContentLoad or window.onload events which makes sure that DOM is loaded but IMO, placing <script> just before </body> is easier option.
<div id="result"></div>
<script>
$('#result').load('test.html');
</script>
You are trying to append to an element that yet does not exists.
Try adding your code in a $(document).ready(), and just before the </body> closing tag.
Like this:
<script>
$(document).ready(function(){
$('#result').load('Ajax/test.html');
});
</script>
</body>
Try changing your <script> tag to include a document.ready:
<script type="text/javascript">
$(document).ready(function () {
$('#result').load('Ajax/test.html');
});
</script>
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$("#myBtn").on("click",function(){
alert('myBtn Clicked');
});
</script>
</head>
<body>
<button type="button" id="myBtn">Sample</button>
</body>
</html>
For the above mentioned code click event is not firing. I used JSFiddle it works fine.
It works fine in case of delegation. The code I used for delegation is below
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).on("click","button",function(){
alert('myBtn Clicked');
});
</script>
</head>
<body>
<button type="button" id="myBtn">Sample</button>
</body>
Help me in solving this....
Read http://docs.jquery.com/How_jQuery_Works
So for you it would be:
$(document).ready(function(){
$("#myBtn").on("click",function(){
alert('myBtn Clicked');
});
});
Put your code inside document.ready()
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myBtn").on("click",function(){
alert('myBtn Clicked');
});
});
</script>
</head>
<body>
<button type="button" id="myBtn">Sample</button>
</body>
</html>
Now in second case your code worked because document is loaded first in the page and attaching may be done to it without document.ready but at that time html element may be loading so event can't be attached to them
Try to put it on Initiliaze function. Maybe javascript of jquery is not loaded
$(function () {
$(document).on("click","button',function(){
alert('myBtn Clicked');
});
});
Simples: your DOM isn't loaded yet when you are adding the listeners! Make sure the DOM is loaded first by either
use the ready event
move the script tag to the end of your body
$( document ).ready(function(e) {
// add listeners here
});
I'm having a hard time using setReadonly of CKEDITOR. I want to use setReadonly when the Editor is already loaded and ready to be used. I tried using instanceReady:
var editor;
CKEDITOR.on( 'instanceReady', function( ev ){
editor = ev.editor;
editor.setReadOnly( true );
});
but this does not work, I tried using buttons like the sample is using and it works fine. Is there anyway to setReadonly automatically when the editor is ready to be used?
Thanks
It might be better to create it as readOnly instead of waiting for it to finish and then tell it to restart as readOnly.
For example
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid', {readOnly: true} );
</script>
</body>
</html>
Fiddle demo
Here you can see how does it work!! For me works right.
http://ckeditor.com/latest/samples/readonly.html
It's simple, use disabled tag in textarea.
Example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea name="messageid" id="messageid" disabled="disabled">
abc
</textarea>
<script type="text/javascript">
CKEDITOR.replace('messageid');
</script>
</body>
</html>
I write some html and js to a iframe,not working in IE7/8/9,the error message is:$ is not defined?
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8" />
<script type="text/javascript">
window.onload=function(){
var data='<html>\
<head>\
<meta charset="utf-8">\
<title>Demo</title>\
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><\/script>\
<script type="text/javascript">\
$(function(){\
alert("abc");\
});\
<\/script>\
<\/head>\
<body>\
</body>\
</html>';
window.frames["code_result"].document.open();
window.frames["code_result"].document.write(data);
window.frames["code_result"].document.close();
}
</script>
</head>
<body>
<iframe id="code_result" frameborder="0" class="frame_result" name="code_result"></iframe>
</body>
</html>
who can tell me why?thanks
update
this error only show in IE78/9,it work well in Chrome and FireFox
It's not the code loading the I frame content. It's ie's loading order. Simply wrap your I frame script in a window onload function so it allows jquery to load first. Tested and working in ie.
Add:
$(document).ready({
alert('123');
});
You will need it load jquery in the I frame before running code. JQuery hasn't loaded yet.