jquery-keep in mind


Never keep 2 ids with the same name on the same page.

You can keep 2 classes with the same name but not 2 ids.

I was working on a header-script where 2 files were included.Both mobile_header.php and desktop_header.php included a javascript file.

As the same file was included twice it was causing problem in showing output as the same id was passed in both the files.

 

<style type="text/css">
	@media only screen and (min-width: 768px) {
    /* tablets and desktop */
		div#mobile { display: none }
		
}

@media only screen and (max-width: 767px) {
    /* phones */
	div#desktop { display: none }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
	div#desktop { display: none }
}

</style>
<div id="mobile">
<?php


  include_once(/layout/mobile_header.php');

?>
</div>
<div id="desktop">
<?php 

  include_once(/layout/desktop_header.php');

		?>
		</div>
//this id was passed in both the files. It was showing wrong output. 
 <span id="nav_cart_total_items_desktop" class="circle_red"></span>


//in jquery
var num_items = parseInt($('span#nav_cart_total_items').text()) + 1;
$('span#nav_cart_total_items_desktop').text(num_items);
//so what i did was 


 <span id="nav_cart_total_items" class="circle_red"></span>
 <span id="nav_cart_total_items_desktop" class="circle_red"></span>


//jquery
var num_items = parseInt($('span#nav_cart_total_items').text()) + 1;
	var num_items = parseInt($('span#nav_cart_total_items_desktop').text()) + 1;
	$('span#nav_cart_total_items').text(num_items);
	$('span#nav_cart_total_items_desktop').text(num_items);

One thought on “jquery-keep in mind

Leave a Reply