boilerroomdigital
sad I’m a little confused
boilerroomdigital February 14, 2012 12:39

P&T Pill: Way to change the selected item with Javascript

I'm using Pill in some Safecracker fields, but with some more stuff going on. I need a way to change which element is selected using jQuery. What I have already almost works - I'm changing the class on the
    items, and updating the select box. Only problem is that sometimes one of my options isn't clickable - I think jQuery still thinks it's selected (even though I've changed the class and the select value) and so is returning "false". I have to click onto another option and then back onto it again in order to select it.

    Any tips?

    Here's my JS:

    function showHide(){
    if($(".field_17 select").val()=='Yes')
    {
    $(".field_18").show();

    if($(".field_18 select").val()=='Yes')
    {
    $(".field_19").show();
    }
    else
    {
    $(".field_19").hide();
    $(".field_19 li:contains('--')").click();
    $(".field_19 li").removeClass('selected');
    $(".field_19 li:contains('--')").addClass('selected');
    $(".field_19 select").val('--');
    }

    }
    else
    {
    $(".field_18").hide();
    $(".field_18 li:contains('--')").click();
    $(".field_18 li").removeClass('selected');
    $(".field_18 li:contains('--')").addClass('selected');
    $(".field_18 select").val('--');

    }
    }

    $(document).ready(function() {
    showHide();
    $("select").change(function(){
    showHide();
    })
    });

    There are three fields, all "Yes/No". There's a third option "--" which is hidden on the front end - that's the default option.

    You should only see field 18 if field 17 is "yes", and only field 19 if field 18 is "yes".
1 person has
this question +1
Reply

  • boilerroomdigital
    boilerroomdigital February 14, 2012 12:42
    Updated my Javascript to this: 


    
function showHide(){
    
	if($(".field_17 select").val()=='Yes')
    
	{
    
		$(".field_18").show();
    
	}
    
	else
    
	{
    
		$(".field_18").hide();
    
		$(".field_18 li:contains('--')").click();
    
		$(".field_18 li").removeClass('selected');
    
		$(".field_18 li:contains('--')").addClass('selected');
    
		$(".field_18 select").val('--');

    
	}
    
	if($(".field_18 select").val()=='Yes')
    
	{
    
		$(".field_19").show();
    
	}
    
	else
    
	{
    
		$(".field_19").hide();
    
		$(".field_19 li:contains('--')").click();
    
		$(".field_19 li").removeClass('selected');
    
		$(".field_19 li:contains('--')").addClass('selected');
    
		$(".field_19 select").val('--');
    
	}
    
}

    
$(document).ready(function() {
    
	showHide();
    
	$("select").change(function(){
    
		showHide();
    
	})
    
});
    
</script>


    The problem is that I can't change the $selected element, or I don't know how to at least.
    Comment
    good answer! good answer! (undo)
  • (some HTML allowed)
    How does this make you feel?     Add Image
    I'm

    e.g. happy, confident, thankful, excited indifferent, undecided, unconcerned kidding, amused, unsure, silly sad, anxious, confused, frustrated

    Cancel
  • Brandon Kelly EMPLOYEE
    Brandon Kelly (Official Rep) February 14, 2012 20:21
    Hi there,

    Probably would be easier to wait until after the P&T Pill has initialized, and then fake a mouse click on the item you want selected: 

    $('ul.pt-pill li:nth-child(2)').click()
    Comment
    good answer! good answer! (undo)
  • (some HTML allowed)
    How does this make you feel?     Add Image
    I'm

    e.g. happy, confident, thankful, excited indifferent, undecided, unconcerned kidding, amused, unsure, silly sad, anxious, confused, frustrated

    Cancel