Load selected JS depending on a checkbox on form

Forums General discussion Load selected JS depending on a checkbox on form

This topic contains 5 replies, has 2 voices, and was last updated by  Alexander Bautz 2 months ago.

  • Author
    Posts
  • #24837

    Eddie Pryce
    Participant

    Is it possible to load custom JS depending on on a checkbox being selected in a tab?
    I have some custom JS that works as a cascading dropdown but i need to add in some more code but i only want the new JS to load if i have checked a box and the old code to stop working

    • This topic was modified 2 months, 1 week ago by  Eddie Pryce.
  • #24862

    Alexander Bautz
    Keymaster

    You should be able to do this by triggering a function either on page load (by checking the value in the checkbox) or by a rule triggering on the checkbox. What kind of code is it you want to cancel, and what is it you like to trigger?

    Alexander

  • #24866

    Eddie Pryce
    Participant
    
    
    jQuery(document).ready(function ()  
    {
         jQuery().SPServices.SPCascadeDropdowns(  
        {  
            relationshipList: "Contact",  
            relationshipListParentColumn: "Account",  
            relationshipListChildColumn: "Full_x0020_Name", 
            parentColumn: "Account",  
            childColumn: "Contact",  
            debug: true  
        });
        
        jQuery().SPServices.SPCascadeDropdowns(  
        {  
            relationshipList: "Machine",  
            relationshipListParentColumn: "Account",  
            relationshipListChildColumn: "Title", 
            parentColumn: "Account",  
            childColumn: "Machine",  
            debug: true  
        });
        
        jQuery().SPServices.SPCascadeDropdowns(  
        {  
            relationshipList: "Site",  
            relationshipListParentColumn: "Account",  
            relationshipListChildColumn: "Title", 
            parentColumn: "Account",  
            childColumn: "Site",  
            debug: true  
        });
        
        jQuery().SPServices.SPCascadeDropdowns(  
        {  
            relationshipList: "Area",  
            relationshipListParentColumn: "Account",  
            relationshipListChildColumn: "Title", 
            parentColumn: "Account",  
            childColumn: "Area",  
            debug: true  
        });
        
        jQuery().SPServices.SPCascadeDropdowns(  
        {  
            relationshipList: "Project",  
            relationshipListParentColumn: "Account",  
            relationshipListChildColumn: "Title", 
            parentColumn: "Account",  
            childColumn: "Project",  
            debug: true  
        });
        
        
        
    });

    This is my current code and i need this to stop and a similar set of code to load depending on a checkbox but there will be 3 check-boxes each to load different JS,

    im not really clued up on JS but i managed to get the above working the way i need it to

  • #24868

    Alexander Bautz
    Keymaster

    If the checkbox is checked when the page loads you can use something like this (expecting the checkbox to be boolean Yes/No):

    if(getFieldValue("NameOfYourCheckbox"){
       // Is checked - run your code here
    }else{
       // Not checked - run your alternative code here.
    }

    Alexander

  • #24980

    Eddie Pryce
    Participant

    So i managed to get this semi working, but i have an if statement with 2 else ifs in it that selects code depending on which option is selected from a dropdown but its only allows the first selection to run then will stop working if the dropdown is changed.

    Is there a way to stop this happening ? i know users will select the wrong dropdown and will have to refresh the page to get it working again(already been told i need to change this) if i run an unbind or off in the jquery it stops the rule from taking effect as well

    
    
    // Hook into change event 
    jQuery("select[title='Create Case By']").on("change", function() {
        
        //reset
        //$("select[title='Create Case By']").unbind();
        
        
      if(jQuery("select[title='Create Case By']").val() == "Account") {
          jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Contact",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Full_x0020_Name", 
    			parentColumn: "Account",  
    			childColumn: "Contact",  
    			debug: true  
    		});
    		
    		jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Project",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Project",  
    			debug: true  
    		});
        
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Site",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Site",
    			debug: true  
    		});
            
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Area",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Area",			
    			debug: true  
    		});
    		
    		
    		
    		jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Machine",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Machine",  
    			debug: true  
    		});
    		
            }   
            
       else if (jQuery("select[title='Create Case By']").val() == "Contact") {
           
           jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Contact",  
    			relationshipListParentColumn: "Full_x0020_Name",  
    			relationshipListChildColumn: "Account", 
    			parentColumn: "Contact",  
    			childColumn: "Account",  
    			debug: true  
    		});
    		
    		jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Project",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Project",  
    			debug: true  
    		});
        
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Site",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Site",
    			debug: true  
    		});
            
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Area",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Area",			
    			debug: true  
    		});
    		
    		
    		
    		jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Machine",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Account",  
    			childColumn: "Machine",  
    			debug: true  
    		});
    		
    		jQuery('select[title="Contact"]').on("change", function() {
    			jQuery('select[title="Account"] :nth-child(2)').prop('selected', true);
    		});
    		
            }
        else if(jQuery("select[title='Create Case By']").val() == "Project") {
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Contact",  
    			relationshipListParentColumn: "Account",  
    			relationshipListChildColumn: "Full_x0020_Name", 
    			parentColumn: "Account",  
    			childColumn: "Contact",  
    			debug: true  
    		});
    		
    		jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Account",  
    			relationshipListParentColumn: "Project",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Project",  
    			childColumn: "Account",  
    			debug: true  
    		});
        
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Site",  
    			relationshipListParentColumn: "Project",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Project",  
    			childColumn: "Site",
    			debug: true  
    		});
            
            jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Area",  
    			relationshipListParentColumn: "Project",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Project",  
    			childColumn: "Area",			
    			debug: true  
    		});
    		
    		
    		
    		jQuery().SPServices.SPCascadeDropdowns(  
    		{  
    			relationshipList: "Machine",  
    			relationshipListParentColumn: "Project",  
    			relationshipListChildColumn: "Title", 
    			parentColumn: "Project",  
    			childColumn: "Machine",  
    			debug: true  
    		});
    		
    		//Auto select the first item in the list to override the default "(None)"
    		jQuery('select[title="Project"]').on("change", function() {
    			jQuery('select[title="Account"] :nth-child(2)').prop('selected', true);
    		});
    		
    		//Auto select the first item in the list to override the default "(None)"
    		jQuery('select[title="Project"]').on("change", function() {
    			jQuery('select[title="Site"] :nth-child(2)').prop('selected', true);
    		});
    
    		//Auto select the first item in the list to override the default "(None)"
    		jQuery('select[title="Project"]').on("change", function() {
    			jQuery('select[title="Area"] :nth-child(2)').prop('selected', true);
    		});
    
    		//Auto select the first item in the list to override the default "(None)"
    		jQuery('select[title="Project"]').on("change", function() {
    			jQuery('select[title="Machine"] :nth-child(2)').prop('selected', true);		
            });
    		
    		}	
      });

    i knows this might not be the most effective way to do this but it was the first way i could get working how we need it to work other than the issue im having

  • #24998

    Alexander Bautz
    Keymaster

    The code looks technically right. Does the code run to the correct if / else when you change it (if you add an alert or a console.log)?

    If it does it may be an issue with reset of the SPServices cascading dropdown. I don’t know this solution so I cannot tell if it can be reset when it has first been applied – you will have to check this with the user manual for this solution.

    Alexander

You must be logged in to reply to this topic.