I am trying to accomplish what may be a simple task for you. I want it so everytime the user clicks one of the "patients" on the left hand bar, a drawer opens. That drawer will be loaded in a hidden div (display:none) on the page. Each div's id will be the last lastname of the patient. My included fiddle shows all of the same last name for demonstration purposes only, obviously.
But the problem is I don't know how to open a unique drawer for each patient. I guess I need to put a toggle on each patient's li somehow?
Also, if they click another patient in the listing, I would like the current open drawer to close, and open the one they just clicked. Also, if the close button is clicked, obviously close the drawer as well.
I got a single drawer to work with this:
$(".patient").toggle(function(){
$(this)
$('#drawer').slideDown("slow")
}, function(){
$(this)
$('#drawer').slideUp("slow")
});
But obviously that isn't going to work... :(
In the fiddle it is opening a standard "drawer" right now. but really I'd like the data for each named div be loaded in the same form. Please comment if you don't understand.
Here's the fiddle:
http://jsfiddle.net/3veht/1/
Add a data element to your HTML indicating an ID, let's say patient ID in this case:
<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li>
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>
Then in your javascript when you load the data, you can use that ID to generate a page request. I also changed the toggle to a click and slid the previous one up before sliding the new one down. In the fiddle example:
$(".patient").click(function(){
var pat = $(this);
if ($("#drawer").is(":visible"))
$("#drawer").slideUp("fast", function () {
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
});
else
{
$('#drawer').slideDown("slow")
$("#drawer").load("/echo/js?js=" + pat.data("patientid"));
}
});
Updated fiddle: http://jsfiddle.net/3veht/6/
Check this fiddle updated....
changes made in code
var divud = $(this).text().split(' ')[1];
$('#drawer').slideDown("slow");
$('#'+divud).removeClass('hidden');
$('#'+divud).slideDown("slow");
JSFIDDLE
Related
I am trying to get Id using data method of jquery.I saw One example which is working fine.
http://jsfiddle.net/4ajeB/6/
In this example when user click add button generate dynamic rows.there is icon on right side ":" it open pop up .on click edit it give the id of row.Actually In this example developer use this
$('.edit_h').data('originalId', id);
Same thing when I used in my example it gives last value.In other words if you generate three row and click any icon of row it show "tc_3" only.I also used same concept .But I don't know why my output come wrong.
http://jsfiddle.net/4ajeB/7/
$('.edit_h').click(function(){
alert("edit ID:"+$(this).data('originalId'));
})
The problem is that your are calling:
$('.edit_h').data('originalId', id);
every time you add a test case. As you only have one popup menu, you are replacing the data attribute on the menu each time, so the last one added will always be there.
The data attribute should be on the listitem not the popup, then when you click the listitem, retrieve the id and write it into the menu data attribute.
$(document).on("click", ".edit_delete_copyFunctiontiy_h", function (e) {
var id=$(this).data('originalid');
$('.edit_h').data('originalid', id);
$("#Mainnavpanel").popup("open", {
positionTo: $(this)
});
});
$('.edit_h').click(function(){
alert("edit ID: "+ $('.edit_h').data('originalid'));
})
Updated FIDDLE
This question already has an answer here:
Jquery onclick change image - 3 Products holders
(1 answer)
Closed 9 years ago.
I would like to add another button so in total I have 3 buttons instead of 2. How can I do this ? I tried to add a product holder three but then if I click first button 1 and then button 3, both button have the same background image.
Preview: http://gyazo.com/6698586765626a57405f9232baaaf61f.gif
New code(Doesn't work):
$(document).ready(function(){$(".theImage img").click(function(){
var a=$(this).parent().attr("id")=="product-holder1"?"product-holder2"?"product-holder3":"product-holder1";
console.log(a);
$(this).fadeOut();
$("#"+a+" img").fadeIn();
});
});
I have 3 buttons, When they click on one of them it changes the image.. So if user clicks on button 1, it changes image. Is the now clicks the button 2 in case he want to select this one button 1 image goes back to normal.
Website: http://productsgiveaway.com/iphone5s/
I would appreciate some help.
Old code Javascript:
$(document).ready(function () {
$(".theImage img").click(function () {
var a = $(this).parent().attr("id") == "product-holder1" ? "product-holder2" : "product-holder1";
console.log(a);
$(this).fadeOut();
$("#" + a + " img").fadeIn()
})
})
Look at your console when you're clicking on the images. The product-holder# is all messed up. This is your problem. I do now understand why youre setting the variable a like that. Try just using this....
var a = $(this).parent().attr("id");
What youre doing above is the same as saying....
if(id==product-holder1)
a=product-holder2;
else
a=product-holder1;
So youre really reversing them around and thats your problem. Just use the id attribute to get the id of the parent.
EDIT:
Try putting this in for me. Im not positive it will work but I want to see what it does
$(document).ready(function(){
$(".theImage img").click(function(){
$(".theImage img").fadeIn(); //SPOT 1
$(this).fadeOut();
});
});
Glad to see it works. Heres whats happening... You set a background image to the continue picture and then put the select on top. So what you want to do is make sure that every select image is showing when you click it (SPOT 1) in code. Then you use the $(this) selector to get the image that you click and then just hide that. Which will then show the background image you have underneath. This will give you your desired effect. You were actually making it much more complicated than it had to be with pulling the ID's in.
I'm not great with jQuery, so I'm having some trouble I can't bypass in a project.
I'm creating a register form with BuddyPress on this URL: http://medsimples.com/registrar/ (sorry for the portuguese, I'll guide you through).
In the last dropdown menu, I have the "Eu sou" (I am) field, which has "Paciente" (patient), "Médico" (physician) and "Estudante" (student) values.
Based on this, I'm using the following jQuery code to show/hide additional information on the form, if the users are physicians or students. The problem is, when we select Physician for example, all the form hides and the Medical div shows up. I don't want the whole form to hide and I don't know what is missed.
$(document).ready(function(){
$('#Estudante').hide();
$('#Medico').hide();
$("#field_5").change(function(){
$("#" + this.value).show().siblings().hide();
});
$("#field_5").change();
});
If someone can help me, I'd appreciate a lot. Thanks!
Try giving a common class to both the divs withe the id's Estudante and Medico like: class="additional-info"
Then you should try something like:
$(document).ready(function(){
$('.additional-info').hide();
$("#field_5").change(function(){
$('.additional-info').hide(); // Just in Case one of the 2 div's is showing
$("#" + $(this).val()).show();
});
});
Also you should be carefull at the select because the value for Medico has an additional string which is "(a)" so the Medico div is never selected.
recently i'm working on a project to make an interactive directory map for a mall without using flash, because they need to access from mobile devices.
but i have issue with jquery , i'm using custom java commands with jquery map highlight. which i use to target my mapcoords.
Method is invoked when someone clicks either on the map or the list below, it'll highlight the map and it'll show the information on right side.
My problem is when somebody clickd another shop from the list or from the map it won't clear the previous highlighted block and the previous one keeps highlighting, it doesn't matter how many time you click.
what i need is to refine my code such that when somebody clicks the 2nd link it will automatically clear the previous one.
anybody can see my demo file under below link
http://www.pad10.com/testsities/directorymap/
i'll appreciate if somebody help me with this
The problem is you don't turn off the highlight for currently selected area when clicking on another.
Place this:
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
in your salhia.js, in the .mapclick click handler:
$('.mapclick').click(function(){
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
$('.mapclick').removeClass('selected');
$(this).addClass('selected');
var shop = '.shopdetails#' + $(this).attr('shop');
var htmlCode = $(shop).html();
$('.shopinfo').fadeOut(500, function(){
$('.shopinfo .shopdetails').html(htmlCode);
$('.shopinfo').fadeIn(500);
});
});
Changed a bit the code shown on previous answer so it is more generic:
// Init
$('.map').maphilight({
stroke: false,
});
// Reset all map
$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight');
$('area').click(function(){
// Reset all areas with class 'selected'
$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
// Remove class selected
$('area').removeClass('selected');
// select and highlight this area
$(this).addClass('selected');
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});
see this demo from jquery ui
you have to hold down the Ctrl key to make multiple selections
I really like the code but I don't want to force my visitor to press ctrl key
I want the code to allow multiple selections without holding ctrl key
is this possible?
I asked you a questions in the comments but I'll just write up a simple selection solution so you can see what I was thinking.
So basically you can use the jquery toggle() effect to roll your own selector. When a user clicks you'll add the orange class, when he clicks again it will remove the orange class.
$(document).ready( function() {
$('ul#selectable li').toggle( function() {
$(this).addClass('orange'); }, function() {
$(this).removeClass('orange'); } );
});
Then all your job is to grab all the li elements with the orange class and post them to a form or whatever your end goal is. Haven't checked this code but what your doing is asking for all the li elements within selectable that have the orange value at the end of the class attribute.
With the code below I'm creating a new array and then adding the text() value of each "orange li" into it.
var theSelections = new Array();
$('ul#selectable li[class$="orange"]').each( function(i) {
theSelections[i] = $(this).text();
});
Yes. However, the implementation would have to allow selected items to be deselected when clicked on a second time. You would just need to modify the code slightly to achieve this.
Do a .selectable( 'Enable' ) on all the items.
Then you will need to do a .selectable( 'toggle' ) onClick on all items.
That should do the trick.