Ajax moving to next page

html-css
ajax

#1

I am having trouble making ajax move to next page. I have played around with the ajax but I cannot workout what needs to be changed. This is the template I am using link.

The data-model in the first snippet when selected should move the builder onto the next snippet. Is this possible with ajax?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <li data-selection="colors" class="builder-step first-load">
    	<section class="cd-step-content">
    		<header>
    			<h1>Select Color</h1>
    			<span class="steps-indicator">Step <b>2</b> of 4</span>
    		</header>
    		
    		<ul class="cd-product-previews">
    			<li class="selected" data-model="product-01-01"><img src="img/product01_col01.jpg" alt="Product Preview" class="product-preview"></li>
    			<li><img src="img/product01_col02.jpg" alt="Product Preview" class="product-preview"></li>
    			<li><img src="img/product01_col03.jpg" alt="Product Preview" class="product-preview"></li>
    		</ul>

    		<ul class="cd-product-customizer">
    			<li data-model="product-01-01" data-content="White - $0" data-price="0" class="selected"><a data-model="product-01-01" data-color="white" href="#0">White - $0</a></li>
    			<li data-content="Mineral Grey - $550" data-price="550"><a data-color="grey" href="#0">Mineral Grey - $550</a></li>
    			<li data-content="Orange Metallic - $550" data-price="550"><a data-color="orange" href="#0">Orange Metallic - $550</a></li>
    		</ul>
    	</section>
    </li>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->


    <li data-selection="accessories" class="builder-step first-load">
    	<section class="cd-step-content">
    		<header>
    			<h1>Accessories</h1>
    			<span class="steps-indicator">Step <b>3</b> of 4</span>
    		</header>

    		<ul class="accessories-list options-list">
    			<li class="js-option" data-price="1080">
    				<p>BMW Charging Station</p>

    				<span class="price">$1.080</span>
    				
    				<div class="check"></div>
    			</li>

    			<li class="js-option" data-price="1895">
    				<p>BMW Maintenance Program Upgrade</p>
    				
    				<span class="price">$1.895</span>

    				<div class="check"></div>
    			</li>

    			<li class="js-option" data-price="975">
    				<p>1 Year BMW Maintenance Program Upgrade</p>

    				<span class="price">$975</span>
    				
    				<div class="check"></div>
    			</li>
    		</ul>
    	</section>
    </li>

<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    			$.ajax({
    		        type       : "GET",
    		        dataType   : "html",
    		        url        : modelType+".html",
    		        beforeSend : function(){
    		        	self.loaded = false;
    		        	model.siblings().removeClass('loaded');
    		        },
    		        success    : function(data){
    		        	self.models.after(data);
    		        	self.loaded = true;
    		        	model.addClass('loaded');
    		        	//activate top and bottom navigations
    		        	self.fixedSummary.add(self.mainNavigation).removeClass('disabled show-alert');
    		        	//update properties of the object
    					self.steps = self.element.find('.builder-step');
    					self.summary = self.element.find('[data-selection="summary"]');
    					//detect click on one element in an options list
    					self.optionsLists.off('click', '.js-option');
    					self.optionsLists = self.element.find('.options-list');
    					self.optionsLists.on('click', '.js-option', function(event){
    						self.updateListOptions($(this));
    					});

    					//this is used not to load the animation the first time new content is loaded
    					self.element.find('.first-load').removeClass('first-load');
    		        },
    		        error     : function(jqXHR, textStatus, errorThrown) {
    		            //you may want to show an error message here
    		        }
    			});

    			//update price (no adding/removing)
    			this.totPriceWrapper.text(model.data('price'));
    		} else {
    			//no model has been selected
    			this.fixedSummary.add(this.mainNavigation).addClass('disabled');
    			//update price
    			this.totPriceWrapper.text('0');

    			this.models.find('.loaded').removeClass('loaded');
    		}
    	};

<!-- end snippet -->

I am really struggling with this. I have spent days on google and forums but cant find a solution.


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.