I have code snipe that works great the problem started when i had to add datepicker on top of it.
working sample:
<td
id="test_<?php echo $id; ?>"
title="Double click to edit"
class="editable"
name="ExpiryDate_<?php echo $id; ?>"
>
<?php echo $Expiry_Date; ?>
</td>
<script>
$(document).ready(function () {
$(".editable").dblclick(function () {
var OriginalContent = $(this).text();
var pieces = $(this).attr("name");
ID= pieces;
var count = 1;
$(this).addClass("cellEditing");
count += 1;
$(this).html("<input id='t1_"+count+"'placeholder='Click to open calendar' type='text' value='' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var option = confirm('Are you sure u wanna change');
if(option){
..
//Call the server side file to communicate with database.
//send do some staff mostly send GET xmlhttp.send();
..
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
</script>
to add datepicker i add under:$(this).children().first().focus();
var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
origFocus.focus();
});
and
This datepicker works great I can get dapicker to show dynamically, click on date without editable field closing on me and on datepick widget get close focus return to editable field and i can click Enter key==13 so I can send date to server using GET, problem is when I click anywhere on page widget just reopens I tried a lot of tweaks to make it go away but I really don't know what to do i'm stuck.
What I would like to mention the site use bootstrap v3.1.1 and jquery 1.11.1
Fiddle
Added fiddle, if I remove
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
Then I can't leave editable field but if I leave that part of code I can't make datepick to work. After picking date it should be focus on editable field again so user can click enter to send GET
Maybe you should provide some fiddle, but from what I can see the wrong line of code is:
var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
origFocus.focus();
});
You shouldn't set focus on origFocus variable, because doing that you re-apply focus on the element. Just try these options:
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
document.activeElement.focus();
});
or
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
document.activeElement = null;
});
or just not setting the blur handler at all.
EDIT
Ok, i cleaned it up a little. Hope it helps
jsfiddle
Related
I have a form where small labels are displayed above each field, once the user adds a value to that field.
This for is sometimes loaded with some of the fields being pre-populated.
How would i check on page load if any of the form fields have a value and if so, have the label visible?
Here's my current code for displaying labels once a field has a value:
$('.form-control').blur(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
on page load try this:
$('.form-control').each(function() {
if( $(this).val() ) {
$(this).prev().show();
}
});
$(document).ready(function(){
$('.form-control').each(function(){
if($(this).val() != ''){
$(this).prev().show();
}
});
});
On document ready, for each .form-control, if the input's value is not blank, do whatever code you would to show the label.
Using focusout Event wouldn't be much of an overkill, would it?
<script type="text/javascript">
(function ($) {
$(document).ready(function (e) {
// ALTHOUGH BLUR IS OK, ONE COULD SIMPLY BIND THE .form-control CLASSES TO THE focusout EVENT
// THIS ENSURES THAT THERE IS A HIGHER LIKELIHOOD THAT THE FIELD IN QUESTION ONCE HAD FOCUS
// WHICH MAY IMPLY THAT THE USER ALSO INTERACTED WITH THE FIELD IN SOME WAY...
$('.form-control').each(function(elem){
var objElem = $(this);
objElem.focusout(function(evt) {
if ($(this).val()) {
// NOW, YOU SHOULD KNOW WHICH METHOD TO USE TO TRAVERSE THE DOM
// AND GET AT THE LABEL....
// IN YOUR CASE IT SEEMS TO BE THE PREVIOUS ELEMENT BEFORE THE FORM-FIELD.
$(this).prev().show();
}
});
});
});
})(jQuery);
</script>
I am looking for a code, which I can put inside a standard HTML href link - that, once the link is clicked, will immediately update a portion of the link in real-time.
Something like:
Example
Will at first print:
Example
And so after it being clicked once, it'll instantly change to:
Example
Anyone got anything simple up the sleeve for that?
Thanks!
First include JQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
Give your link an id
<a id="link" href="http://example.com/page1/">Example</a>
Use the link in your JQuery code
$(document).ready(function() {
$(document).on("click", "#link", function() {
$(this).attr("href", "http://example.com/page1-clicked/");
});
});
edit
I you want to do the same with many links give your link a class
<a class="link" href="http://example.com/page1/">Example</a>
Then change the JQuery code to
$(document).ready(function() {
$(document).on("click", ".link", function() {
$(this).attr("href", "http://example.com/page1-clicked/");
});
});
using JQuery's one event handler to change the link only once:
$(function () {
$('a').one(function (event) {
var elem = $(this);
var before = elem.attr('href');
var after = before + '-clicked/';
elem.attr('href', after);
})
});
I have a search similar to Google's that dropsdown with results while the user is typing. Ideally I would like for the user to click on one of these results and the value goes into the searchbox. However, when i click on the results, nothing happens.
HTML:
<input type='text' id='topicInput' name='topic' autocomplete='off' />
<div id='tagResult'></div> //this is the dropdown
JQUERY:
$('#topicInput').keyup(function(){
var topic = $(this).val();
if (topic==''){
$('#tagResult').css("display" , "none");
}
else{
//$('div').click(function(){
//$('#tagResult').css("display" , "none");
//});
$('#tagResult').css("display" , "block");
$.post('../topic.php' , {topic: topic} , function(response){
$('#tagResult').html(response);
});
}
});
//the above code is working properly
$('.topicResult').click(function(){
alert(1); //this is just a test, but it never shows up
});
So, when i click on a .topicResult nothing happens. An alert should show up. I have verified that topic.php does in fact return divs with the topicResult class.
You're binding your click event and then adding elements to the page after the listener is bound. It won't fire.
Two options
Option 1, use a listener that can bind to elements after the page is rendered
Either change the click event for .topicResult to use ".on()" for jQuery 1.7+ or use ".live() or .delegate()" for previous versions
$(document).on('click','.topicResult',function(){
alert('1');
)};
Option 2, move your click bind so it is bound after you add the elements
$('#topicInput').keyup(function(){
var topic = $(this).val();
if (topic==''){
$('#tagResult').css("display" , "none");
}
else{
//$('div').click(function(){
//$('#tagResult').css("display" , "none");
//});
$('#tagResult').css("display" , "block");
$.post('../topic.php' , {topic: topic} , function(response){
$('#tagResult').html(response);
$('.topicResult').click(function(){
alert(1); //this is just a test, but it never shows up
});
});
}
});
You need to attach the click event after the result's come back - where it is, you're attaching it to nothing.
Try something like:
$.post('../topic.php' , {topic: topic} , function(response){
$('#tagResult').html(response);
$('.topicResult').click(function(){
alert(1); //this is just a test, but it never shows up
});
});
I have a multi level select chain, where by the value of the first select generates the options for the next select list. And within the second list some of the values will cause a div to display with another input.
My codes (below) seem to work just fine when tested on static content (ie: the second select is hard coded in the html). But when I add it with JQuery, the second level no longer triggers the .change function.
<script type="text/javascript">
$(document).ready(function() {
$dts = $("select[name='tourdes']");
$dts.change(function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$tags = $("select[name='tourcode']");
$tags.change(function() {
if ($(this).val() == "private") {
$(".prvcal").css({"visibility":"visible"});
}
});
});
</script>
I am guessing something needs to be re-initialized, but I am getting no where with my experiments.
If you're using jQuery 1.7 you'll want to use on, as both live and delegate are deprecated.
$(document).on("change", "select[name='tourcode']", function() {
var dtsValue = $(this).val();
var dtsString = '?tourdes=' + dtsValue;
$('#dateSelect').show();
$('#dateSelect').load('include/avdates.php' + dtsString).append();
});
docs for on()
You are probably using dynamically-generated HTML elements. If that is the case, you need to use .delegate() to handle them:
$('select').delegate("[name='tourdes']", 'change', function() {
I have a jquery function whichh looks like this:
<script type="text/javascript">
$(document).ready(function() {
$('a#id').click(function(e){
e.preventDefault();
var id = $(this).attr('pid');
var title = $(this).attr('ptitle');
$('#product_list').prepend('<input type="hidden" value="'+ id +'"/><div>'+ title +'</div>')
});
});
</script>
I have a javascript file which has this code here:
> http.open('get', 'livesearch.php?name='+searchq+'&nocache =
> '+nocache+'&type=bookings/products');
The livesearch.php file has the a element (which the jQuery is requesting) like this:
Add
However when I click on the a element the jQuery doesn't respond. Could any please help?
Thanks
Peter
Use either live or delegate to add the click event because the element is not present in the DOM at the time the event is bound.
$('#id').live('click', function(e){
alert('you clicked the id element' );
});