I've a form and button, which after clicked should display a message. The problem is that now the message is shown just once for the first click. Could anybody explain me what am I doin wrong?
JQUERY:
function post_comment(id) {
x = "#c" + id;
$(x).click(function () {
$('.login_modal_message').fadeIn(500);
$('body').append('<div id="overlay"></div>');
$('#overlay').fadeIn(300);
return false;
$('#overlay, .close').live('click', function () {
$('#overlay , .login_modal_message').fadeOut(300, function () {
$('#overlay').remove();
});
return false;
});
});
};
HTML:
<form id="c408" method="post">
<textarea class="comment_input" name="comment" placeholder="Write your comment here...">
<input id="post_id" hidden="hidden" value="408" name="post_id">
<button class="comment_button" onclick="post_comment(408)">Send</button>
</form>
How do you trigger this? Because you are using a function for something an eventhandler could do
$('.openName').click(function(event) {
$('.login_modal_message').fadeIn(500);
$('body').append('<div id="overlay"></div>');
$('#overlay').fadeIn(300);
//return false;// Never return false unless you know what you are doing:
event.preventDefault()
});
$('#overlay, .close').live('click', function(event) {
$('#overlay , .login_modal_message').fadeOut(300 , function() {
$('#overlay').remove();
});
//return false;// Never return false unless you know what you are doing:
event.preventDefault()
});
The order of fadeins is a bit weird, I cant figure out wether this is what you want. First the message comes, than fade a background?
You should bind the event handler to the form itself and catch the submit. Like so:
UPDATE with full jQuery
function post_comment(id) {
x = "#c" + id;
$(x).submit(function() {
$('#overlay').fadeIn(300);
return false;
});
}
$('#close-modal').on('click', function(event) {
event.preventDefault();
$('#overlay').fadeOut();
});
HTML
<form id="c408" method="post">
<textarea class="comment_input" name="comment" placeholder="Write your comment here..."></textarea>
<input id="post_id" hidden="hidden" value="408" name="post_id" />
<button class="comment_button" onclick="post_comment(408)">Send</button>
</form>
<div class='overlay' id='overlay'>
<div class='login_modal_message' id='login_modal_message'>
<p>Message</p>
Close modal
</div>
CSS
#overlay {
background: rgba(0, 0, 0, 0.85);
bottom: 0;
display: none;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
}
.login_modal_message {
background: white;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 200px;
}
Update: Added Codepen sketch.
Related
I work with virtual keyboard, and i stuck, so problem is, in my view i have few input field for which i need put some data use virtual keyboard.
So when i tap in to input field, i capture id, and send for keybord file with setup, but i received error.
Code:
var idElement;
let Keyboard = window.SimpleKeyboard.default;
let keyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button)
});
document.querySelector("#" + idElement).addEventListener("input", event => {
console.log("#" + idElement);
keyboard.setInput(event.target.value);
});
console.log(keyboard);
function onChange(input) {
document.querySelector("#" + idElement).value = input;
//console.log("Input changed", input);
}
function onKeyPress(button) {
console.log("Button pressed", button);
console.log("#" + idElement);
if (button === "{shift}" || button === "{lock}") handleShift();
}
function handleShift() {
let currentLayout = keyboard.options.layoutName;
let shiftToggle = currentLayout === "default" ? "shift" : "default";
keyboard.setOptions({
layoutName: shiftToggle
});
}
var modal = $('.modal');
$('.show-modal').click(function () {
modal.fadeIn();
});
$('.close-modal').click(function () {
modal.fadeOut();
});
$(function () {
$('.dataInput').click(function () {
idElement = $(this).attr('id');
});
});
.simple-keyboard {
max-width: 850px;
}
.modal {
background-color: #dbd9d9;
display: none;
position: fixed;
padding: 40px;
width: 50%;
height: auto;
border-radius: 5px;
box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.7);
}
.close-modal {
color: #000;
text-decoration: none;
float: right;
position: absolute;
top: 10px;
right: 20px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/css/index.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<input type="text" class="dataInput" id="poBarCode" placeholder="Enter number">
<input type="text" class="dataInput" id="operationBar" id="opBarcode" placeholder="Enter number">
<input type="text" class="numbQuan dataInput" id="quantityParts" placeholder="Enter number">
<input type="text" class="dataInput" id="nestNumber" placeholder="Enter number">
<div class="modal">
<a class="close-modal" href="#">X</a>
<div class="simple-keyboard"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/simple-keyboard#latest/build/index.min.js"></script>
So as u can see from my example i fetch input field ID, and send in to scripti which call keyboard.
And i recived error.
idElement is undefined when you're calling document.querySelector("#" + idElement)..., which makes the querySelector call return null, which you're then trying to call addEventListener on.
I have simple div with one element:
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
When I click on #drop-zone I want to trigger input manually. I'm trying like this:
jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type="file"]').trigger('click')
})
The main problem is that I'm getting an endless loop of clicks as my manual click trigger listener on parent element.
Make sure that the element clicked was the drop-zone by checking the id of the target. When jQuery emulates an event it will pass the same this reference but will not pass the event, so just check if the event is set.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone" && event.originalEvent) {
$("#drop-zone>input").trigger("click");
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
You could also just trigger the event manually.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone") {
$("#drop-zone>input")[0].click();
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
Maybe this is what you want:
var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
var mtarget = document.elementFromPoint(x_m, y_m);
if (mtarget.id === "drop-zone") {
var input = $(this).find('input[type="file"]');
var h = false;
if ($(input).is(":visible")) {
input.hide();
} else {
input.show();
h = true;
}
console.log("You clicking, the #drop-zone, input.visible =>", h);
} else {
console.log("You clicking the input.");
}
})
$('body').mousemove(function(evt){
x_m = evt.pageX;
y_m = evt.pageY;
});
#drop-zone {
height: 40px;
width: 250px;
background-color: #8b5fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none; background: green;" multiple="multiple">
</div>
On Click Of the Try Again Button , is it possible to show some processing happening on the device
My jsfiddle
My code as below
$(document).on("click", ".getStarted", function(event) {
// Simulating Net Connection here
var a = 10;
if (a == 10) {
$('#mainlabel').delay(100).fadeIn(300);
$('#nonetconnmain').popup({
history : false
}).popup('open');
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
});
$(document).on('click', '.nonetconnmainclose', function(event) {
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
$(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) {
$('#mainlabel').hide();
});
With my code , the functionality is working , but it seems that the application is not doing any action
So my question is it possible to show any indication (For example , delay , progressbar , anything )
Here ya go
$(document).on("click", ".getStarted", function(event) {
$.mobile.loading("show", {
text: "",
textVisible: true,
theme: "z",
html: ""
});
// Simulating Net Connection here
var a = 10;
if (a == 10) {
setTimeout(function() {
$.mobile.loading("hide");
$('#mainlabel').fadeIn(300);
}, 1000);
$('#nonetconnmain').popup({
history: false
}).popup('open');
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
});
$(document).on('click', '.nonetconnmainclose', function(event) {
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
$(document).on("popupbeforeposition", "#nonetconnmain", function(event, ui) {
$('#mainlabel').hide();
});
.popup {
height: 200px;
width: 150px;
}
.popup h6 {
font-size: 1.5em !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet" />
<div data-role="page">
<div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a">
<div class="popup_inner popup_sm">
<div class="popup_content" style="text-align:center;">
<p class="">Please check net connectivcty</p>
<label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check</label>
</div>
<div class="popup_footer nonetconnmainclose">
<a class="">Try Again</a>
</div>
</div>
</div>
<button class="getStarted btn btn-a get_btn">Click Here</button>
</div>
You can use a small function (with time as parameter) and use jQuery animate() to create the process effect like below.
var updateProgress = function(t) {
$( "#p" ).css("width",0);
$( "#p" ).show();
$( "#p" ).animate({ "width": "100%" }, t , "linear", function() {
$(this).hide();
});
}
Do notice that the time that is chosen when calling updateProgress() is relevant with the delay and the fade in effect of the text message
updateProgress(3500);
$('#mainlabel').delay(3400).fadeIn(600);
Check it on the snippet below
var updateProgress = function(t) {
$( "#p" ).css("width",0);
$( "#p" ).show();
$( "#p" ).animate({ "width": "100%" }, t , "linear", function() {
$(this).hide();
});
}
$(document).on("click", ".getStarted", function(event) {
var a = 10;
if(a==10)
{
updateProgress(3500);
$('#mainlabel').delay(3400).fadeIn(600);
$('#nonetconnmain').popup({history: false}).popup('open');
event.stopImmediatePropagation();
event.preventDefault();
return false;
}
});
$(document).on('click', '.nonetconnmainclose', function(event) {
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
$(document).on("popupbeforeposition", "#nonetconnmain",function( event, ui ) {
$('#mainlabel').hide();
});
.popup {
height: 200px;
width: 400px;
}
.popup h6 {
font-size: 1.5em !important;
}
#p {
border:none;
height:1em;
background: #0063a6;
width:0%;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" rel="stylesheet"/>
<div data-role="page">
<div data-role="popup" id="nonetconnmain" data-dismissible="false" class="ui-content" data-theme="a">
<div class="popup_inner popup_sm">
<div class="popup_content" style="text-align:center;">
<p class="">Please check net connectivcty</p>
<div id="p"></div><br>
<label id="mainlabel" style="margin:100px auto 60px auto;color:Red; line-height:40px;font-size:medium;display:none">Please check </label>
</div>
<div class="popup_footer nonetconnmainclose">
<a class="">Try Again</a>
</div>
</div>
</div>
<button class="getStarted btn btn-a get_btn">Click Here</button>
</div>
Fiddle
Probably when you click on try again , you can have a setinterval triggered which can check for online connectivity and when found can close the popup and get started again, also when we do retries in the interval the progress can be shown as progressing dots..
Below is the code, i haven't tried to run the code, but it shows the idea
$(document).on('click', '.nonetconnmainclose', function(event) {
var msgUI = $("#mainlabel");
msgUI.data("previoustext",msgUI.html()).html("retrying...");
var progress = [];
var counter = 0 ,timeout = 5;
var clearIt = setInterval(function(){
var online = navigator.onLine;
progress.push(".");
if(counter > timeout && !online){
msgUI.html(msgUI.data("previoustext"));
counter=0;
}
if(online){
$('#nonetconnmain').popup('close');
$(".getStarted").trigger("click");
counter=0;
clearInterval(clearIt);
}
else{
msgUI.html("retrying" + progress.join(""));
counter++;
}
},1000);
event.stopImmediatePropagation();
event.preventDefault();
return false;
});
Sure,
try appending a loader GIF to one of the div and remember to remove the same when your process is finished.
Kindly refer to StackOverflow
And try appending this
$('#nonetconnmain').append('<center><img style="height: 50px; position:relative; top:100px;" src="cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/…; alt="loading..."></center>');
This will append a loader to your HTML to show some kind of processing.
When I'm typing a login or password, tooltip appears with one or more sentences.
Every tooltip has the same z-index, but I want to change it to higher when I'm focused at adequate input and bring it back at blur event, but I might have 10 inputs with many options in tooltip. Is it possible to write function without using ID of tooltip?
$(document).ready(function() {
$('input').focus(function() {
$('div.tooltip').addClass("active");
});
$('input').blur(function() {
$('div.tooltip').removeClass("active");
});
$('#login').keyup(function() {
var th = document.getElementById('login').value;
if (th.length < 6) {
$('#result').css('display', 'inline');
var ex = $("#too_short").text();
if (!ex) {
$('#result').append('<p id="too_short">Too short password.</p>');
}
} else {
$("#too_short").remove();
}
if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')) {
$('#result').css('display', 'inline');
var en = $("#forb_char").text();
if (!en) {
$('#result').append('<p id="forb_char">Forbidden characters</p>');
}
} else {
$("#forb_char").remove();
}
});
$('#pwd').keyup(function() {
var th = document.getElementById('pwd').value;
if (th.length < 6) {
$('#result1').css('display', 'inline');
var ex = $("#too_short1").text();
if (!ex) {
$('#result1').append('<p id="too_short1">Too short password.</p>');
}
} else {
$("#too_short1").remove();
}
if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')) {
$('#result1').css('display', 'inline');
var en = $("#forb_char1").text();
if (!en) {
$('#result1').append('<p id="forb_char1">Forbidden characters</p>');
}
} else {
$("#forb_char1").remove();
}
});
});
.tooltip {
position: absolute;
border: 2px solid red;
display: none;
margin-left: 250px;
background: blue;
z-index: 1;
color: white;
}
.active
}
z-index:999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form" id="form" method="post">
<div id="result" class="tooltip"></div>
<span> Write login: </span>
<input id="login" name="login" type="text" />
<br/>
<div id="result1" class="tooltip"></div>
<span> Write pwd: </span>
<input id="pwd" name="pwd" type="text" />
</form>
<!-- How to addClass active to proper div.tooltip? -->
Something like this? :
http://jsfiddle.net/9n2db67u/22/
Your code is very messy. Try to use TidyUp when posting jsfiddle links..
$('input').on('click', function () {
$('.active').removeClass('active');
$(this).prevAll('div').addClass('active'); //.css('z-index', '20000');
});
Im trying to gather the images selected, take their values, put them into an array, and then push them to a mysql database.
Here is my current code
$(document).ready(function() {
var startfind = $("body").find('.on').val();
var awnsers = $('.on').map(function() {
return $(startfind).text();
}).get().join(',');
$("img").click(function() {
$(this).toggleClass("on");
});
$('button').click(function() {
alert(awnsers);
});
});
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
.on {
padding: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" value="1">
<br>
<button>Submit</button>
I can't get the alert to show the values of the items selected.
You can trigger an event when you click on an image
Then listen on that event, an update the answer
use answer when you need it
an I change a little in your html code, that change img's value attr to data-value
============Here is the code and jsFiddle=======================
$(function(){
//catch this values, because you will use these for more than one time
var answers = [];
function getAnswers(){
answers = []; //empty old answers so you can update it
$.map($('.on'), function(item){
answers.push($(item).data('value'));
});
}
//init the answers in case you use it before click
getAnswers();
$(document).on('click', 'img', function(e){
e.preventDefault();
$(this).toggleClass('on');
//trigger the state change when you click on an image
$(document).trigger('state-change');
});
//get answers when event was triggered
$(document).on('state-change', function(e){
getAnswers();
});
$('#btn-show').click(function(){
alert(answers.join(',') || 'nothing was selected');
});
});
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
.on {
padding: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" data-value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" data-value="1">
<br>
<button id="btn-show">Submit</button>
Please check this code.
$("img").on('click',function() {
$(this).toggleClass("on");
});
$(document).on('click', 'button', function() {
var awnsers = $('.on').map(function() {
return $(this).attr('value');
}).get().join(',');
alert(awnsers);
});
Working fiddle - http://jsfiddle.net/Ashish_developer/6ezf363a/