I have three text field that needs to have a jquery click event
$('#landline' OR '#mobile_number' OR '#alternate_number').click(function()
{
$(this).val("");
});
I want this to implement whenever the user click the field with id landline or mobile_number or alternate_number the value will be set to null. but this code didn't work.
Use , to concatenate multiple selectors:
$('#landline, #mobile_number, #alternate_number').click(function() {
$(this).val("");
});
Related
I have 3 links which are the names of students.On clicking a link first time or odd number time,another div which contains the details of that student appears.On clicking the same link on second time or even number time, I need to hide the student div.Its working perfectly for me using data() event of jquery.
My requirement is if I click first student link,div with the details of first student will come.If I click the second student link,details of second student will come.If I again click on first link,the student div will hide since data() is associated with it(I think so). But I want to make it displayed because,previous click was on the second link.
My html is like this
George
Leo
Kelm
My jquery:
$("#sections ").on('click','.student_link',function(){
var clicks = $(this).data('clicks');
//alert(clicks);
if (clicks) {
$("#div_students").hide();
//alert(1);
}
else
{
$("#div_students").show();
//alert(2);
}
$(this).data("clicks", !clicks);
return false;
});
That is if I click George for first time, the corresponding div of student will appear,If I click Leo without clicking George to hide the div,I need div of Leo should come.If I click George again,I need div with details of George should come.But for me the div is hiding since the variable click is already true for George.I need the div to be displayed if previous click was not on the current link.
You can use the following code:
$("#sections").on('click', '.student_link', function () {
var prevClickedId = $('#sections').data('prevId');
if (prevClickedId != $(this).attr('id')) {
// This was not the previous clicked element
} else {
// This was the previous clicked element
}
$('#sections').data('prevId', $(this).attr('id'));
return false;
});
You can so something similar to this:
$("#sections").on('click', '.student_link', function(){
if( $("#div_students").data('viewing') == $(this).attr('id') ) {
$("#div_students").hide().data('viewing', '');
}
else {
$("#div_students").show().text($(this).attr('id'));
$("#div_students").data('viewing', $(this).attr('id'));
}
return false;
});
Here's a working example: https://jsfiddle.net/7qwsguoq/
Why don't just use jquery toggle() method? it hides element when it's visible, and shows when it's hidden.
I am getting json in "data" and passing it in for loop. Onclick of buy button, it goes to the App function. On success I need to hide the buy button and display the download label.
My problem is onclick of 1st buy button, download link for both the buttons appear.
Ideally oneclick of first buy button, buy button should be hidden and download label should appear. similarly oneclick of second buy button, buy button should be hidden and download label should appear.
How do I get particular id of each button so that I can hide one at a time?
Please help me out
function (data)
{
var Class ='';
for (var i=0; i <data.length;i++)
{
Class += '<div name="buy\''+data[i].id+'\'" class="btn btn-primary btn-small" onclick="buy(\''+data[i].identifier+'\',\''+data[i].id+'\',\''+data[i].url +'\'); return false;" href=""></div><div class="download\''+data[i].id+'\'" id="download">D<span style="font-size:15px"></span></div>';
}
return Class;
}
App = function(identifier, app_id, url) {
$.ajaxSetup({
data : {
csrf_test_name : $.cookie('csrf_cookie_name')
}
});
var jqxhr = $.post(SITE_URL + 'admin/appstore/purchaseApp', {
identifier : identifier,
ap_id : ap_id
}).done(function(data1) {
obj = JSON.parse(data1);
bootbox.alert(obj.status, obj.label);
$("#download").html('<a href='+download_url+app_id+'>Download!</a>');
});
};
it is for loop am using.. am passing '; now how do I hide buy id? $("#buys"+"'"+data[i].id+"'").hide(); is this the right way? It gives me error
if you look at the actual markup generated in Class, you will see that your buy buttons don't have an id at all. perhaps something like
Class += '<div id="buy-button-'+data[i].id+'" name="...
Now you have a unique id on each button. The next part of your problem is knowing which button to remove after a successful Ajax call. You will need to include that in the data1, returned from the server. For the sake of argument, let's say the server returns the value in your data1 object as app_id. Then all you need to do is
jQuery('#buy-button-'+data1.app_id).hide();
Slightly off-topic, I'm not too keen on the way you're using single quotes in the buttons' name attributes, either, but I don't think that's relevant here.
I have a table that contains several rows each containing one checknox. Checkbox will get selected on the row click event.
Now how can I apply an onclick event for a checkbox?
$('input[type=checkbox]').click(function() {
countPopChecked();
});
This is my script. This is working when I click on the checkbox. But I want this functionality when I am clicking on the table row.
$('input[type="checkbox"]').closest('tr').on('click', function() {
countPopChecked();
});
or :
$('tr').has('input[type="checkbox"]').on('click', function() {
countPopChecked();
});
I am building scheduling software. I am using a number of tables to display times/dates, etc.
In one particular table there are cells with id's that list the date and employee id number.
I am trying to setup a trading shift system. When the cell is click an ajax function is performed.
Here is an example cell:
<td id="tblcell-2013_03_13-id_3" class="displayShift">$data placed here</td>
Jquery code:
$(document).ready(function () {
// I can't do this because each id is different
$("td#tblcell").click(function () {
alert('it works!');
});
// I can't do this because there other other td elements on the same page in other tables
$("td").click(function () {
alert('it works!');
});
});
How do I set up a function that is activated when a specific cell is clicked that also passess var data to the function in a script that has other td table elements that can't be referenced in this function?
thanks
You can use the td[id^="tblcell"] selector to select all TDs with their ID starting with tblcell
$('td[id^="tblcell"]').click(function() {
// ... do stuff ...
});
Demo for attribute-value-starts-with selector: http://jsfiddle.net/ARkxD/
I have been trying to figure this out for hours to no avail.
I have the following
http://vitalets.github.com/x-editable/docs.html#newrecord
the new record module/code. Its functionality is, once all the rows have their data, and it is submitted, it retains its value so that it can stay editable.
I have tried adding input, select clearing code in the success of the ajax request and tried putting the .editable function inside an ajaxComplete function to see if it would reload the element on submit but it didnt. look at the demo. enter data, and submit. it then makes the data "permanent" so that it can continue to be editable.
I have removed the code that hides the button.
What i want it to do is, submit the record and reset so i can submit another with the form being 'Empty' and back to default.
I am developing an equipment tracker and would love if techs could just enter records, one after another. im sure its a simple fix to reset the form, i just cannot figure it out.
I have attached a screencast video of it.
http://www.youtube.com/watch?v=dPDuQCgOOSw
as it's popular question, I've added Reset button to documentation.
$('#reset-btn').click(function() {
$('.myeditable').editable('setValue', null) //clear values
.editable('option', 'pk', null) //clear pk
.removeClass('editable-unsaved'); //remove bold css
$('#save-btn').show();
$('#msg').hide();
});
It's better to use .editable('setValue', null) instead of .text('Empty') as we need also to reset internal value.
HTH
If you look how the "save new user button" is implemented, it just selects the anchor tags that have classname myeditable
Either you bind a function to your 'reset' button or have this script onclick
IF onclick:
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
OR as a function
function reset_myeditable()
{
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
}
and attach this to the onclick handler of your reset button
This I assume you will be putting a 'reset' button
EDIT
Ok zoom in to your $('#save-btn').click(function() success handler
success: function(data, config) {
if(data && data.id) { //record created, response like {"id": 2}
$(this).editable('option', 'pk', data.id);
//remove unsaved class
$(this).removeClass('editable-unsaved');
//show messages
var msg = 'New user created! Now editables submit individually.';
$('#msg').addClass('alert-success').removeClass('alert-error').html(msg).show();
$('#save-btn').hide();
$(this).off('save.newuser');
/**this the edited part**/
jQuery.each($('.myeditable'),function() {
$(this).text('Empty') ; //this is your default text
});
/**end of edit**/
} else if(data && data.errors){
//server-side validation error, response like {"errors": {"username": "username already exist"} }
config.error.call(this, data.errors);
}
},