www.webdeveloper.com
Results 1 to 2 of 2

Thread: jQuery .load() and switch() problem

  1. #1
    Join Date
    May 2012
    Posts
    77

    jQuery .load() and switch() problem

    I have three anchor tag links in my html with id's "switcher", "switcher-b", "switcher-c", when anchor tag "switcher" is clicked I would like to load content from a html page on my server "content.html", anchor "switcher-b" will load "content-b.html", and "switcher-c" will load "content-c.html". I also have an anchor tag id "default" when clicked will reset / unload the html pages.

    I figured a switch statement would be the best way to achieve my task but it is not working... I'm not proficient with jQuery/ JavaScript but I want to learn so if any JavaScript / jQuery developers with intermediate or advance knowledge can identify what I am doing wrong in my jQuery syntax and suggest a solution with explanation I truly will appreciate it.

    Thank you for viewing my posting and your help.

    jQuery:
    Code:
                     $(function(){
    			$('#switcher a').click(function(event){
    				var bodyClass = this.id.split('-')[1];
    				
    				$('body').removeClass().addClass('bodyClass');
    				
    				switch(bodyClass){
    					case .switcher:
    						$('#result').load('content.html #content');
    						break;
    					case .switcher-b:
    						$('#result').load('content-b.html #content');
    						break;
    					case .switcher-c:
    						$('#result').load('content-c.html #content');
    						break;
    					default:
    						$('#result').unload();
    				}
    				return false;
    			    });
    			});
    HTML:
    Code:
    <head>
    		<title>AJAX Calls with jQuery</title>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
    		</head>
    		<body>
    		<h1>AJAX Calls with jQuery load()</h1>
    		<div id="switcher">
    		<p><a id="switcher" href="#">Click here to fetch HTML content</a></p>
    		<p><a id="switcher-b" href="#">Click here to fetch HTML content</a></p>
    		<p><a id="switcher-c" href="#">Click here to fetch HTML content</a></p>
    		<p><a id="default" href="#">Reset</a></p>
    		</div>
    		
    		<div id="result"></div>

  2. #2
    Join Date
    May 2012
    Posts
    77
    Here is a solution for anyone that may encounter this problem.

    Code:
    $('#switcher a').click(function(event){
                        var bodyClass = this.id;
    
                        $('body').removeClass().addClass('bodyClass');
                                
                        switch(bodyClass){
                            case 'switcher':
                                alert(1);
                                $('#result').load('content.html#content');
                                break;
                            case 'switcher-b':
                                alert(2);
                                $('#result').load('apples.html#content');
                                break;
                            case 'switcher-c':
                                alert(3);
                                $('#result').load('watergate.html#content');
                                break;
                            case 'switcher-reset':
                                alert(4);
                                $('#result').html('');
                                break;
                                default:
                                break;
                        }
                        return false;
                    });
    Not sure if using .html(' '); is the best method for removing loaded content but it does seem to work. If anyone can suggest a more optimize way of resolving this issue that would be great. Ultimately I would like to do way with the switch statement / if statement but achieve the same functionality but more optimize. Again I am always looking to improve so any suggestions are always welcome. Thanks
    Last edited by Jerrell_B; 08-31-2012 at 10:39 PM. Reason: needed to make a correction

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles