jQuery .load() and switch() problem

**Jerrell_B** · 08-31-2012 05:35 PM

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>

**Jerrell_B** · 08-31-2012 10:35 PM

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

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

Thread Tools

Display

jQuery .load() and switch() problem

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions