jquery- jeditable not working - javascript

basically what I want is simple, when people onclick, the field become editable.
After they change the value, press Esc at keyboard/ or click outside , to save the record.
I'm not sure why it's not working. Documentation seems not complete... Anyone got idea on how this work?
The documentation page: http://www.appelsiini.net/projects/jeditable
Here I post my existing code here for guys to review.
testing.html
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$(".click").editable("jeditabletest.php", {
indicator : "<img src='indicator.gif'>",
tooltip : "Click to edit...",
style : "inherit"
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
.editable input[type=submit] {
color: #F00;
font-weight: bold;
}
.editable input[type=button] {
color: #0F0;
font-weight: bold;
}
</style>
</head>
<body>
<b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should
</body>
</html>
jeditabletest.php
<?php
echo "hehehe"
?>
does anyone know what's wrong? I tried so many times, it just not working at all. All related library files are already put in.

To enable submitting the form when user clicks outside do the following:
$(".editable").editable("http://www.example.com/save.php", {
onblur : "submit"
});
Submitting when pressing ESC is generally a bad idea since ESC is universally reserved for canceling. If you really really want to do this you need to edit Jeditable code. Search and edit the following in jquery.jeditable.js:
/* discard changes if pressing esc */
input.keydown(function(e) {
if (e.keyCode == 27) {
e.preventDefault();
reset.apply(form, [settings, self]);
}
});

yeap: i recommend http://valums.com/edit-in-place/
It uses div's contentEditable property. You may want to look into that before you start using it.
jrh

I ran your code and it seemed to work fine. I think the reason why it's not working for you is that this .html page needs to be run from a web server like http://localhost/mypage.html.
The jeditable plugin is making an AJAX call to the server whenever you try to save the edited text and for the AJAX call to work you need to run the page from a server.
Hope this helps!

Related

Swapping two style-sheets CSS file using Javascript

I am writing a web-app for a mobile device, what I am doing is to change dynamically the css and store that option for the user, I have been looking all night long, googling methods and way to achieve my objective but nothing worked for me.
This is the type of button that I am using, and here comes up another problem, because I wasn't able to Check and Uncheck the checkbox.
HTML
<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet()">
The only thing that worked fine for me is this:
<head>
<link id="pagestyle" rel="stylesheet" type ="text/css" href="default.css">
<script type="text/javascript">
function swapStyleSheet(sheet) {
document.getElementById('pagestyle').setAttribute('href',sheet);
}
</script>
</head>
and in the body
<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet("Second.css")">
But this is not dynamically because once the user taps the button is not able to go back and I am not sure that works on a mobile device
Any suggestion how to proceed?
You forgot the quotes around Second.css
onclick="swapStyleSheet('Second.css')"
Without quotes, it's a syntax error (but your console is already telling you this).
Here there is an exemptional link that shows step by step how to how to switch two CSS sheet-file
But for the type of input, I am not sure how you can do
I would not recommend to change your stylesheets like this.
Here are my reasons why:
Loading another file will probably cause a "hard" transition between your two styles. You writing a mobile web-app, so imagine someone with unstable internet connection loads your application. Your web-app will be unstyled for a couple of seconds.
Browser needs to load another file (if you want to switch back, it will probably load the original file again, depending on cache settings)
Can be solved much easier with .scss for example (but also with plain .css). I have got an example for you down below. You can even add transitions, so your changes are much more pleasant.
function rotateStyle () {
document.body.id = document.body.id == 'alternate' ? '' : 'alternate';
}
body {
background-color: #FFFFFF;
color: #000000;
/* you could also add transitions */
transition: background-color 2s;
}
body#alternate {
background-color: #000000;
color: #FFFFFF;
}
<body>
<!-- your content -->
<button onclick="rotateStyle()">Change your style</button>
</body>

How to copy to clipboard from a input box?

I am building a website in html, php, javascript, etc. In that I want to add a specific button, after button clicked the words from input box should get copied into clipboard. I have tried by using Zeroclipboard but I could not.
I have used the following code and added jquery.zclip.js and jquery-1.8.0.min.js to the same directory. Welcome for any suggestions.
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script src="jquery.zclip.js"></script>
<style>
#dynamic { font-size: 15px; height: 28px; width: 357px; }
</style>
<script>
$(document).ready(function(){
$("a#copy-dynamic").zclip({
path:"ZeroClipboard.swf",
copy:function(){return $("input#dynamic").val();}
});
});
</script>
</head>
<body>
<input type="text" id="dynamic" value="Copy me !!" />
Copy Now
</body>
I recently had to deal with ZeroClipboard; the docs are not the greatest.
First you need to add the source script to the head of your html document:
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.js"></script>
I used a CDN, but I'm sure it works fine if you have a local copy.
Then in your javascript, in global scope:
ZeroClipboard.config( { swfPath: "whateverpath/ZeroClipboard.swf" } );
Then you need to bind the swf to the element you want to use to trigger copying:
var copyButton = document.getElementById('thingThatCopies');
var copyclient = new ZeroClipboard(copyButton); //can be array
It should work from there, but in case you want to add a user notification, there are some events you can work with:
copyclient.on("ready", function(readyEvent) {
//is ready
copyclient.setText(window.location.href);
//in this instance, set the text to copy to the url of the current page. You can set it to anything with this function
copyclient.on("aftercopy", function(event) {
//copied
//this is the place to add a user notification
}
}
Hopefully that gives you enough of a start to adapt it to your project.

iPhone/Android browser occasionally follows link href instead of jQuery onclick event

I have a mobile web gallery page where I have a CSS floated "next" link. The CSS float property causes the link to have a display: block behavior on it. A jQuery touchstart event is bound to the link. When the user clicks on the link, the Javascript code bound to that touchstart event advances the gallery by one slide via Ajax. In other words, there is no page refresh.
However, I noticed that occasionally when I touch an area of the link's block space that is not the link text itself, the browser follows the href and causes a page refresh (because the URL has changed) instead of executing the Javascript code bound to the touchstart event.
Has anybody seen this before? Is there a way to fix this?
I simplified it down to this code below, and it still happens, although much less frequently.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Test</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.cont { width: 320px; }
.next { border-left: 1px solid #000; float: right; text-align: right; width: 65px; }
.msg { clear: both; width: 200px; }
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('.next').bind('click touchstart', function(event) {
event.preventDefault();
if (event.type == 'touchstart') {
$(this).unbind('click');
}
$('.msg').append('<p>Click!</p>');
});
});//]]>
</script>
</head>
<body>
<div class="cont">Next</div>
<div class="msg"></div>
</body>
</html>
I tested this on my iPhone and it seems to work. For some reason after registering a touchstart event you are unbinding the click events. Is there any reason for that?
When you click on the text of the link all it seems to register is indeed touch start, so unbinding click does not break things. I do believe, however, that when you touch outside the text link, but still within the block space it registers both a touchstart and click, so at this point you have already unbound click and it works as a regular link.
You should notice, that on your first click outside the bounds it never goes to yahoo.com. It's only the subsequent once that do that.
So in essence what you need to do is remove that unbind, as so:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('.next').bind('click touchstart', function(event) {
event.preventDefault();
$('.msg').append('<p>Click!</p>');
});
});//]]>
</script>
Is there any reason why you would want to unbind click?

Infobox display on click

I've searched for 3 hours now and cant find a solution. All im after is when you click on an input field in a form, an infobox at the side reveals itself. I tried messing about with jQuery and just couldnt get it to work even though im sure the code is correct (aren't we always lol).
Anyway id appreciate any solution.
My attempt at jquery/css/html looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
.infoBubble {
visibility:hidden;
color:#000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
</script>
</head>
<body>
<form action="process.php" method="get">
<div class="row">
<span class="label">Description: </span>
<input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
</div>
</form>
</body>
</html>
Firstly, your JavaScript is being executed before the document has finished loading, meaning the input field does not exist. Attach your code to jQuery's ready event to prevent this from happening.
$(function() {
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
}
Secondly, an element hidden with visiblity: hidden will still take up space in the layout. Usually you would use display: none to make it seem as if the element were not there at all. Either way, you can use the show method to make the element visible.
CSS:
.infoBubble {
color: #000;
display: none;
}
JavaScript:
$('.infoBubble').show();
Thirdly, it is possible that your users focus the input without clicking on it (e.g., by pressing tab)! By using the focus event instead of click you can show the message regardless.
$('.box').focus(function() {
$('.infoBubble').show()
});
In addition to the above, you can also use the blur event to hide the message when the user no longer has focus on the input (when they click elsewhere, or tabbing out of it). All together you end up with something like this:
$(function() {
$('.box').focus(function() {
$('.infoBubble').show();
}).blur(function() {
$('.infoBubble').hide();
});
}
Try the following:
$('.box').click(function (){
$('.infoBubble').toggle();
});
By the way. The css-property to hide/show something is not visibility, but display. For example:
display: none;
or
display: block;

disable/enable right click on a particular part of the html body

i want to disable right click on the webpage but i want enable right click on textarea. Hey wat is this provide answers dont post lot of comments on right click (lol). i dont care if people would see my source code, thats nt the point ... i just want to know how one can enable right click only in the textarea while disabling the rest
so any1 here know the javascript function that would perform the job ??
is the below code possible ??
<html>
<head>
<title> Your Title </title>
</head>
<body oncontextmenu="return false;">
<textarea oncontextmenu="return true;">
</textarea>
</body>
</html>
-thanx in advance
-miss subanki
To enable right click on a particular element on the body while disabling the right click on the rest of the body (in html), you wil have to put the required element (whose right click you want to enable) into an iframe. And disable the right click on main body like this....
Main Body
<html>
<head>
<title>Your Title</title>
</head>
<body oncontextmenu="return false;">
<iframe src="frame1.html">
</iframe>
</body>
</html>
frame1.html
<html>
<body>
<textarea> Your text, u can right click here </textarea>
</body>
</html>
if anyone else has a better answer please post it here, thanx everyone.
What about: http://www.dynamicdrive.com/dynamicindex9/noright2.htm
But there's not much point disabling right click, it's easy to bypass and get content.
http://www.quirksmode.org/js/events_properties.html#button has probably all the information you need. You get the click event and test to see which keycode it is. Then choose to return false or true depending on where the click came from.
I have found one solution:
document.superListener = document.addEventListener;
document.addEventListener = function(type, listener, useCapture){
if(type != 'contextmenu')
document.superListener(type, listener, !!useCapture);
};
from here:
https://stackoverflow.com/a/3009161/3649420
You can disable the right click using javascript to keep the honest people honest. But the not so honest people can easily reverse this. If you are interested read on "oncontextmenu" property of html elements.
let divs = $("div");
divs.each(function(i, v) {
$(v).on("contextmenu", function() {
return false;
})
})
$(".no").off("contextmenu");
body {
background: black;
}
.yes {
width: 100px;
height: 100px;
background: tomato;
text-align: center;
}
.no {
width: 100px;
height: 100px;
background: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="yes">No Click</div>
<div class="no"></div>
<div class="yes">No Click</div>
<div class="no"></div>
<div class="yes">No Click</div>
The off() method removes event handlers that were attached with on().
jsfiddle => https://jsfiddle.net/dare444/we91t5gd/183/

Categories