We Keep Coding

Jquery of a HTML Input Element

JavaScript code:
$(document).ready(function(){
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
})
$(document).ready(function(){
$(".btn-adddata").click(function(){
$(".email-form").show();
$(".name-form").show();
$(".btn-form").show();
$(this).hide();
$(".btn-confirm").click(function(){
email = $(".email-input").val();
name = $(".name-input").val();
$(".email-input").val()="";
$(".name-input").val()="";
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
$(".btn-adddata").show();
});
$(".btn-cancel").click(function(){
$(".email-form").hide();
$(".name-form").hide();
$(".btn-form").hide();
$(".btn-adddata").show();
})
})
})
Details of my Webpage
Initially, there will only be .btn-adddata button in the webpage.
When the user clicks .btn-adddata button, it will be hidden and three hidden forms appear in the browser. First form contains only a fieldset which further contains an input box. Same is the case with the second form. While the third form contains two buttons .btn-confirm and .btn-cancel.
On clicking .btn-cancel, the page should be back to it's original state.
On clicking .btn-confirm, the page should come back to it's original state except that the user entered values in the input fields are stored in a variable.
But actually nothing was happening when I am clicking .btn-confirm button.
I couldn't figure out what's going on.
Some one please figure out the error for me.
Thanks in advance.

First of all, you should hide the form in your HTML using inline CSS so that they don't flash and disappear.
<form style="display; none">
Then you don't need to hide them in $(document).ready(...).
Secondly, you have a mistake in your event handler. You need add 3 click handlers, but instead, you have only one click handler, which adds two more click handlers every time the first button is clicked.
$(document).ready(function(){
$(".btn-adddata").click(function(){
// insert: code to show all forms and hide this button
}); // <-- you're missing this
$(".btn-confirm").click(function(){
// insert: code to get values
// insert: code to set values to ''
// e.g. $(...).val("");
});
$(".btn-cancel").click(function(){
// insert: code for cancel button
});
});

1st: First look -input").val()="" should be -input").val("") not equals
2nd: Personally I don't prefer events inside event
3rd: You can combine selectors $(".class1 , .class2 , #id1 , #id2 , ....")
$(document).ready(function(){
var If_adddata = false; // condition to stop confirm and cancel buttons to work until the adddata click first
$(".email-form , .name-form , .btn-form").hide();
// adddata click
$(".btn-adddata").click(function(){
$(".email-form , .name-form , .btn-form").show();
$(this).hide();
If_adddata = true;
});
// confirm click
$(".btn-confirm").click(function(){
if(If_adddata === true){
var email = $(".email-input").val(),
name = $(".name-input").val();
$(".email-input , .name-input").val("");
$(".email-form , .name-form , .btn-form").hide();
$(".btn-adddata").show();
}
});
// cancel click
$(".btn-cancel").click(function(){
if(If_adddata === true){
$(".email-form , .name-form , .btn-form").hide();
$(".btn-adddata").show();
}
})
})

Clear the form/textarea after submit (emoji-picker with jquery)

In my form/textarea I use an emoji picker (https://github.com/mervick/emojionearea).
Idea is once user write some text/put some emoji and send this (“Submit”) the form will reset/clear.
My ongoing code: https://jsfiddle.net/byrvfwah/
Emoji picker works well, but I can’t clear the form after submit.
At the same time, without function which initiates an emoji-picker, the submit button clear the form: https://jsfiddle.net/9bps7f6v/3/
There are a lot of method to reset form and I already tried a lot of them:
$("#mytextarea").val('');
$('#mytextarea').trigger("reset");
$(‘#mytextarea').text('');
$("#mytextarea").reset();
$("#myform")[0].reset();
The explanations from the author of emoji-picker script not very useful:
https://github.com/mervick/emojionearea/issues/9
https://github.com/mervick/emojionearea/issues/54
https://github.com/mervick/emojionearea/issues/373
Any ideas how I can clear my form on submit?

You need to target emojionarea-editor class div and replace with empty '' string.
$(document).ready(function() {
$("#mytextarea").emojioneArea({
pickerPosition: "bottom"
});
});
$(document).ready(function() {
$("#mybutton").click(function(e) {
e.preventDefault();
$(".emojionearea-editor").html('');
});
});

It is not being cleaned because it is not a data input element rather it is a div. Inspecting the item you can see:
And has a class, so you can just clear the html:
$(document).ready(function() {
$("#mybutton").click(function(e) {
e.preventDefault();
$(".emojionearea-editor").html('');
});
});

$("#mytextarea").data("emojioneArea").setText('');

Refresh div content after click link

Prestashop v1.6 default-bootstrap theme, product-list.tpl file.
I have a button add to cart and div with some smarty code:
<a class="ajax_add_to_cart_button" href="....">
<div id="div1">{if $added}Added{else}not added{/if}</div>
Now when I click to link I want to only refresh div content.
I already try some code finding in stack but my knowledge is still not enought.
What I try and it is not work:
$(document).on('click', '.ajax_add_to_cart_button', function() {
$("#div1").load() /*also $("#div1").load("#div1")*/
});
and:
$("#div1").load(location.href + " #div1");
and few more.
EDIT, also this is not work for me:
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#div1").load($(this).attr("href")); /*and this: $("#div1").load($(this).attr("href #div1"));*/
return false
});
});
EDIT2: When I try this code is half working
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$("#div1").html("result reloaded successfully");
});
});
why half? Because text is display but only in first product, and it is no matter which one product I click, and also I try switch html() to load() or refresh() but then is not working.
EDIT3
$(document).ready(function(){
var productid = "{product.id_product}"
$(".ajax_add_to_cart_button").click(function(){
$("#div1" + productid).html("result reloaded successfully");
});
});
<div id="div1{product.id_product}">{if $added}Added{else}not added{/if}</div>
It is display info in all product, all container in product have now different id.

try following and check if it works..
$(function(){
$(document).on('click', '.ajax_add_to_cart_button', function(e) {
e.preventDefault();
$("#one").load($(this).attr("href"));
return false.
});
});
I noticed you have wrong class in your selector. please check that too.

Mmm... I see... I guess your problem is that you use the same id for all the products. The DOM 'should' have a unique ID for one element, try another way, maybe a simple class as a selector, you couldn't use the same id for all that elements :)
For example (I'm assuming that your div have mybeautifuldiv class):
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function(){
$(".mybeautifuldiv").html("result reloaded successfully");
});
});

If you're trying to do this when there is a list of products (category page etc.) then you need to target a proper div. And you might not want to use id but class in your div.
<div class="my-custom-div">{if $added}Added{else}not added{/if}</div>
Is this div inside 'add to cart' anchor?
If it is then you need to target it:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).find('.my-custom-div').html('Content updated!');
});
});
If it is not then you can traverse to parent div of product and find your custom div inside it. For example in a category page of a default prestashop theme:
$(document).ready(function(){
$(".ajax_add_to_cart_button").click(function() {
$(this).closest('.product-container').find('.my-custom-div').html('Content updated!');
});
});

Make display none all error message after 2s in JQuery

How to make display none all error message after 2s after the error message are displayed commonly?
Something like
$(document).ready(function () {
$('#error_message').show().delay(2000).fadeOut('slow');
});
So that whenever a error message is displayed, error message want to persist 2s after it want to display out.
It is difficult to change this inside every node. So I want to write the code commonly, which will have effect in every page.
So where ever error message is displayed , it want to be displayed out in 2 seconds.
Is it possible ?

If you do this on document.ready it will be executed once, not everytime you display an error message.
Implement the delayed fadeOut with an function to display the error.
function display_error(message) {
$('#error_message').html(message);
$('#error_message').show().delay(2000).fadeOut('slow');
}
If this doesn't work or is not suitable, you can also bind it to an event and trigger the event on display.
Sample
http://jsfiddle.net/28XTM/

use ajaxError event handler for show the error of all ajax calls in your project. Just paste this code to your layout page:
$(function(){
$(".error_message").ajaxError(function (event, xhr, status, error) {
$(this).html(error).show().delay(2000).fadeOut('slow');
});
});

By using setTimeout:
<div id="error_message">
Put your error message here
</div>
<button id="btn_error">Show error</button>
<script>
// Init sample
$('#error_message').hide();
function display_error(message) {
$('#error_message').html(message);
$('#error_message').show();
setTimeout(function () {
$('#error_message').hide();
}, 2000);
}
$("#btn_error").click(function() {
display_error("Show this test message");
});
</script>

To hide error using '#error_message' as id but if you have more than one elements then you should use '.error_message' as a class instead of id.
$(document).ready(function () {
$('#error_message').delay(2000).fadeOut('slow'); // For id and use $('.error_message') for class
//Or
setTimeout(function(){
$('#error_message').fadeOut('slow'); // For id and use $('.error_message') for class
}, 2000)
});​
A fiddle is here.
Never use id $("#someId") for more than one element, it should be unique instead use class $(".someClass") when you have something like that
<div class="someClass">This is an error.</div>
<div class="someClass">This is an error.</div>

Input text clear when I try to submit for a search

Hello I have the following problem. I the site http://www.telefonkoll.se when I enter a number in the search and press the button then the text clears automatically and the result page return me all the results. If I don't use the jquery code it works correctly.
My jQuery code is this:
$("document").ready(function() {
$("#mod_search_searchword").attr("value","Sök telefonnummer här");
});
$("#mod_search_searchword").live('focus', function (event) {
$("#mod_search_searchword").focus(function() {
$(this).val("");
});
});
$("#mod_search_searchword").live('blur', function (event) {
$("#mod_search_searchword").blur(function() {
if ($(this).val() == ""){
$(this).val("Sök telefonnummer här"); }
});
});
What I want to do with the above code is to clear the current text when the user click there. If it write something to still there, if not to return the initial text. It looks to work correctly but when I try to submit the data something wrong obviously happen. I don't know if it's the code or something I don't know.

Avoid reinventing the wheel. Use one of the many jQuery watermark plugins available.