Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Javascript not working....Please help!!!!!

    I am trying to do a dropdown of the suburbs and the selected value would show the corresponding details. I have managed to workout a code but its not working properly....

    I mean its not working at all!!!

    Even the basic html wont show!!

    Please help me with this. I have the code written but I am in a mess here.

    Code is

    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
      
    <script>
    	$(function(){
    		$("#event_type_id").change(function () {
    			var val = $(this).val();
    			switch(parseInt(val)){
    			case 1: 
    				$("#Alexandra Headlands").show();
    				$("#Battery Hill").hide();
                                    $("#Beerwah").hide();
                                    $("#Bellvista").hide();
                                    $("#Birtinya").hide();
                                    $("#Bokarina").hide();
                                    $("#Boreen Point").hide();
                                    $("#Brightwater").hide();
                                    $("#Buddina").hide();
                                    $("#Buderim").hide();
                                    $("#Burnside").hide();
                                    $("#Caloundra").hide();
                                    $("#Caloundra West").hide();
                                    $("#Castaways Beach").hide();
                                    $("#Chancellor Park").hide();
                                    $("#Conondale").hide();
                                    $("#Collum Beach").hide();
                                    $("#Dicky Beach").hide();
                                    $("#Diddilibah").hide();
                                    $("#Golden Beach").hide();
                                    $("#Ilkley").hide();
                                    $("#Kawana Forest").hide();
                                    $("#Kawana Islands").hide();
                                    $("#Kenilworth").hide();
                                    $("#Kilcoy").hide();
                                    $("#Kin Kin").hide();
                                    $("#Kings Beach").hide();
                                    $("#Landsborough").hide();
                                    $("#Little Mountain").hide();
                                    $("#Mapleton").hide();
                                    $("#Marcoola").hide();
                                    $("#Marcus Beach").hide();
                                    $("#Maroochy River").hide();
                                    $("#Maroochydore").hide();
                                    $("#Meridan Plains").hide();
                                    $("#Minyama").hide();
                                    $("#Moffat Beach").hide();
                                    $("#Montville").hide();
                                    $("#Mooloolaba").hide();
                                    $("#Mooloolah Valley").hide();
                                    $("#Mount Coolum").hide();
                                    $("#Mountain Creek").hide();
                                    $("#Mudjimba").hide();
                                    $("#Nambour").hide();
                                    $("#Noosa Heads").hide();
                                    $("#Noosa North Shore").hide();
                                    $("#Noosaville").hide();
                                    $("#North Maleny").hide();
                                    $("#Pacific Paradise").hide();
                                    $("#Palmview").hide();
                                    $("#Palmwoods").hide();
                                    $("#Parrearra").hide();
                                    $("#Peachester").hide();
                                    $("#Pelican Waters").hide();
                                    $("#Peregian Beach").hide();
                                    $("#Peregian Springs").hide();
                                    $("#Rosemount").hide();
                                    $("#Sippy Downs").hide();
                                    $("#Sunrise Beach").hide();
                                    $("#Sunshine Beach").hide();
                                    $("#Tanawha").hide();
                                    $("#Tewantin").hide();
                                    $("#Warana").hide();
                                    $("#Wurtulla").hide();
                                    $("#Yandina").hide();
                                    $("#Yaroomba").hide();
    				break;
                            case 2: 
    				$("#Alexandra Headlands").hide();
    				$("#Battery Hill").show();
                                    $("#Beerwah").hide();
                                    $("#Bellvista").hide();
                                    $("#Birtinya").hide();
                                    $("#Bokarina").hide();
                                    $("#Boreen Point").hide();
                                    $("#Brightwater").hide();
                                    $("#Buddina").hide();
                                    $("#Buderim").hide();
                                    $("#Burnside").hide();
                                    $("#Caloundra").hide();
                                    $("#Caloundra West").hide();
                                    $("#Castaways Beach").hide();
                                    $("#Chancellor Park").hide();
                                    $("#Conondale").hide();
                                    $("#Collum Beach").hide();
                                    $("#Dicky Beach").hide();
                                    $("#Diddilibah").hide();
                                    $("#Golden Beach").hide();
                                    $("#Ilkley").hide();
                                    $("#Kawana Forest").hide();
                                    $("#Kawana Islands").hide();
                                    $("#Kenilworth").hide();
                                    $("#Kilcoy").hide();
                                    $("#Kin Kin").hide();
                                    $("#Kings Beach").hide();
                                    $("#Landsborough").hide();
                                    $("#Little Mountain").hide();
                                    $("#Mapleton").hide();
                                    $("#Marcoola").hide();
                                    $("#Marcus Beach").hide();
                                    $("#Maroochy River").hide();
                                    $("#Maroochydore").hide();
                                    $("#Meridan Plains").hide();
                                    $("#Minyama").hide();
                                    $("#Moffat Beach").hide();
                                    $("#Montville").hide();
                                    $("#Mooloolaba").hide();
                                    $("#Mooloolah Valley").hide();
                                    $("#Mount Coolum").hide();
                                    $("#Mountain Creek").hide();
                                    $("#Mudjimba").hide();
                                    $("#Nambour").hide();
                                    $("#Noosa Heads").hide();
                                    $("#Noosa North Shore").hide();
                                    $("#Noosaville").hide();
                                    $("#North Maleny").hide();
                                    $("#Pacific Paradise").hide();
                                    $("#Palmview").hide();
                                    $("#Palmwoods").hide();
                                    $("#Parrearra").hide();
                                    $("#Peachester").hide();
                                    $("#Pelican Waters").hide();
                                    $("#Peregian Beach").hide();
                                    $("#Peregian Springs").hide();
                                    $("#Rosemount").hide();
                                    $("#Sippy Downs").hide();
                                    $("#Sunrise Beach").hide();
                                    $("#Sunshine Beach").hide();
                                    $("#Tanawha").hide();
                                    $("#Tewantin").hide();
                                    $("#Warana").hide();
                                    $("#Wurtulla").hide();
                                    $("#Yandina").hide();
                                    $("#Yaroomba").hide();
    				break;
    			
                           }
    		});
    	});
    </script>
    <style>
    	#Alexandra Headlands,#Battery Hill,#Beerwah,#Bellvista,#Birtinya,#Bokarina,#Boreen Point,#Brightwater,#Buddina,#Buderim,#Burnside,#Caloundra,#Caloundra West,#Castaways Beach,#Chancellor Park,#Conondale,#Collum Beach,#Dicky Beach,#Golden Beach,#Kawana Forest,#Kawana Islands,#Kenilworth,#Kin Kin,#Kings Beach,#Landsborough,#Little Mountain,#Mapleton,#Marcoola,#Marcus Beach,#Maroochy River,#Maroochydore,#Meridan Plains,#Minyama,#Moffat Beach,#Montville,#Mooloolaba,#Mooloolah Valley,#Mount Coolum,#Mountain Creek,#Mudjimba,#Nambour,#Noosa Heads,#Noosaville,#Pacific Paradise,#Palmview,#Palmwoods,#Parrearra,#Peachester,#Pelican Waters,#Peregian Beach,#Peregian Springs,#Sippy Downs,#Sunrise Beach,#Sunshine Beach,#Tewantin,#Warana,#Wurtulla,#Yandina { background:yellow; padding: 10px 5px 10px 5px; }
    	#Kilcoy,#Diddillibah,#Ilkley,#Noosa North Shore,#North Maleny,#Rosemount,#Tanawha,#Yaroomba { background:red; padding: 10px 5px 10px 5px; }
    </style>
    
    <p align="justify">&nbsp;</p>
    <strong>Please select the suburb name from the list to view the details.</strong><br/><br/>
    <table width="675" cellspacing="0" cellpadding="2" border="0">
    <thead>
    <tr>
    <td class="title">Want to know detail about?</td><td class="field"><select id="event_type_id" name="event_type_id">
    		<option>Please select the suburb you want to know about</option>
    		<option value="1" rel="Alexandra Headlands">Alexandra Headlands</option>
    <option value="2" rel="Battery Hill">Battery Hill</option>
    
    
    	</select></td>
    </tr>
    </thead></table>
    
    	<div id="Alexandra Headlands" style="display: none">Events</div>
    	<div id="Battery Hill" style="display: none">Announcements</div>
    Really appreciate any help from the members.

    Newbie in JSP trying to do something out of my scope. Guess that's how you learn
    Last edited by VIPStephan; 02-27-2013 at 01:08 PM. Reason: fixed code BB tag

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Check the browser error console and look for whatever is breaking your JS.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    That is ghastly code. Simply set all the suburb names paras to "hide", and then set the one that is required to "show".

    Why are you using jQuery for such a simple task?

    The closing CODE tag is /CODE.

    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.



    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 02-26-2013 at 03:00 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    makes me sleepy just looking at that code.

    You're in for a major refactor anyway, so starting from the ground up:

    id's can't have spaces, so minimum you would have to change this:
    Code:
    <div id="Alexandra Headlands" style="display: none">Events</div>
    to something like this:
    Code:
    <div id="Alexandra_Headlands" style="display: none">Events</div>
    but while you are there, you might as well give all of your divs a classname:
    Code:
    <div class="suburb" id="Alexandra_Headlands">Events</div>
    <div class=suburb" id="Battery_Hill" >Announcements</div>
    then apply the style to all of them in the css in one hit:
    Code:
    <style>
    .suburb { background:yellow; padding: 10px 5px 10px 5px; display:none}
    </style>
    then onto the javascript. You can use your onchange function to hide everything in that class (most of it will already be hidden, but hiding it twice makes no difference), then show the one you are interested in:

    Code:
    $("#event_type_id").change(function () {
    $(".suburb").hide();
    var val = $(this).val();
    switch(parseInt(val)){
    case 1: 
    $("#Alexandra Headlands").show();
    //etc
    or, refactoring a little more, you can save your self may more code, by storing the id of the div in the value of the select and using that to tell the code what to show. With your html like this:
    Code:
    <div class="suburb" id="Alexandra_Headlands">Events</div>
    <div class=suburb" id="Battery_Hill" >Announcements</div>
    
    <select id="event_type_id" name="event_type_id">
    <option>Please select the suburb you want to know about</option>
    <option value="Alexandra_Headlands" rel="Alexandra Headlands">Alexandra Headlands</option>
    <option value="Battery_Hill" rel="Battery Hill">Battery Hill</option>
    </select>
    your entire function could look like this:

    Code:
    $("#event_type_id").change(function () {
    $(".suburb").hide();
    var theburb = $(this).val();
    $("#"+theburb).show();
    });
    hope that helps.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •