Simple Jeditable Problem - javascript

I just started with Jeditable and for 3 hours now it seems I can't figure it out. This tutorial should have been piece of cake:
http://www.appelsiini.net/projects/jeditable
, but it turned out to be a little pain in the a$$. I've put the jquery.js and jquery.jeditable.js in the same directory with the main page. This is my code (it seems like the code tags won't do the trick, so I'll give you only the important blocks):
the header contains
<script type="text/JavaScript"
src="jquery.js"></script>
<script type="text/JavaScript"
src="jquery.jeditable.js"></script>
<script type="text/JavaScript"
$(document).ready(function() {
$('.edit').editable('#');
});
and the body of my html contains:
<div class="edit" id="div_1">Edit me</div>
And that's about it. It should give me an editable form when I click the "Edit me", but nothing happens. Where do I go wrong ? Thanks in advance.

I don't know if this is a typo in the question or your actual code but check this line:
<script type="text/JavaScript"
$(document).ready(function() {
$('.edit').editable('#');
});
it should be
<script type="text/JavaScript">
$(document).ready(function() {
$('.edit').editable('#');
});
</script>

Are you trying to send the ajax to the same page you are on? If so, replace the '#' with window.location.href and you should be good to go.

Related

Javascript autoclick not working

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".

Get an alert box to popup at the jquery event $(document).ready in smarty template

I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});

Missing } in XML Expression

I am trying to change our site to load a Header through jquery using the .load() function but to do so I need to set the Title of the page.
From another StackFlow question it was suggested to do something as simple as
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
When i do this I get the firebug error
Missing } in XML Expression for that line in the script
I am sure there is probably an easy solution but it is certainly escaping me.
I've just tested this out here, please see if you have created your html document in the same way. Code as below.
<html>
<head>
<title>Old Title</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
document.title ='Name Changed to Protect the Innocent';
});
</script>
</body>
</html>
I found what the problem was. This script was in the middle of another script block which was causing the error.
Thanks for all the help.

$(document).ready in javascript

I am new to javascript and jquery. I want to use $(document).ready to register some event handlers. For example, code like this, and my question is what javascript libraries do I need to refer to at the head of the page in order to use $(document).ready? Appreciate if anyone could provide me a simple easy to use sample to learn $(document).ready.
<script>$(document).ready(function()
{
// function implementation internals
});
</script>
thanks in advance,
George
All you need is the jQuery library.
http://www.jquery.com
You can either download the library and include it from your own server or you could use one of the many CDN's which provide the library. For instance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// do something useful
});
</script>
Google keeps copies of a bunch of libraries on their servers, which are pretty reliable.
Just add the following to your <head> section, and place your snippet somewhere below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
In summary,
Put the <script> tag provided by sje397 in the <head> section of the page, which provides the only library you need... jQuery.
(Alternatively: <script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script>)
Read http://docs.jquery.com/Tutorials:How_jQuery_Works
And you should be good to go.
<html>
<head>
</head>
<body>
<div id="someElement">Click Me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#someElement').bind('click', function(event) {
// event.preventDefault(); // you might want to do this if your event handler has a default action associated with it (e.g. a link that gets clicked with an href)
// do stuff on your event (change click to whatever you need)
});
});
})(jQuery);
</script>
</body>
</html>

jQuery event binding inconsistently

I thought I understood jQuery, evidently not. Why, in this example, does the first textbox register clicks but not the second?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4
/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min"/>
<script type="text/javascript">
captureKeys = function(event)
{
alert("foo");
}
$(document).ready(function()
{
$('#UsingJQuery').bind('keyup', function(){alert('bar');});
});
</script>
</head>
<body id="contentText" >
<input type="text" id="UsingPlainJavaScript" onkeyup="captureKeys()"/>
<input type="text" id="UsingJQuery"/>
</body>
</html>
EDIT: OK, I've fixed the typo but it's still not working..
This is asking for trouble:
<script type="text/javascript" src="jquery-1.4.2.min"/>
You need a </script> to have a valid markup
<script type="text/javascript" src="jquery-1.4.2.min"></script>
That is a big NoNo and might be the reason for your problem. Another thing is, there is no .js in your filename? Make sure that your jQuery lib has the correct name aswell.
Reference: http://www.w3.org/TR/xhtml1/#C_3
Because the ID of the second input element is UsingJQuery (capital U), not usingJQuery.
$('#UsingJQuery').bind('keyup', function(){alert('bar');});
should do it.
Update:
The error must be somewhere else, your code is correct. See: http://jsfiddle.net/H2xye/
Maybe you did not include jQuery correctly:
src="jquery-1.4.2.min.js"
you are missing .js at the end of the path. At least this is the standard naming, maybe you renamed it.
The error console should tell you more.
Update2: See jAndy's answer regarding the </script> tag. This is probably the other problem!
Please change
from
<script type="text/javascript" src="jquery-1.4.2.min"/>
to
<script type="text/javascript" src="jquery-1.4.2.min.js"/>

Categories