how to use jquery to get element by id instead of javascript

Question

I have this code in my oscommerce store and I would like to use jQuery instead of javascript - how do I do this? My problem is that this code is conflicting with existing jquery code so I'm figured that if the javascript was jquery code then perhaps this code would work.

What is is meant to do is when an item is added to the cart, a popup appears telling the customer that an item is in the cart - at the moment on every page refresh it adds an item to the cart instead of just when an item is added.

    <div id="cart_overlay" onclick="document.getElementById('cart').style.display='none';     document.getElementById('cart_overlay').style.display='none'; return false;">
    </div>
    <div id="cart">
    <?php
    if (tep_session_is_registered('new_products_id_in_cart')) {
    ?>
    <!-- html code here -->

    <ul class="cartList">
    <?php
     // code here
    ?>
    </ul>
    <hr>
    <ul class="cartList">
      <li class="cartButton"><?php echo '<a href="javascript:void(0);"     onclick="document.getElementById(\'cart\').style.display=\'none\';     document.getElementById(\'cart_overlay\').style.display=\'none\'; return false;"><span     class="btn">' . IMAGE_BUTTON_CONTINUE . '</span></a></li><li><a href="'      . tep_href_link(FILENAME_SHOPPING_CART, '', 'SSL') . '">' .      HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents()     . ')' : '') . tep_href_link(FILENAME_SHOPPING_CART) .     '</a></li><li><a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '"><spanclass="btn">' . HEADER_TITLE_CHECKOUT . '</span></a>'; ?></li>
</ul>
<script type="text/javascript">
var item=document.getElementById("cart");
function pop(el){
    if(el.style.display=="block"){
        el.style.display="none";
        }else{
            el.style.display="block";
            }
    }
pop(item);
</script>
<script type="text/javascript">
var item=document.getElementById("cart_overlay");
function overlay(el){
    if(el.style.display=="block"){
        el.style.display="none";
        }else{
            el.style.display="block";
            }
    }
overlay(item);
</script>


<?php
tep_session_unregister('new_products_id_in_cart');
}
?>
</div>
<!-- eof Cart on Product Page //-->

I don't see how switching to jQuery will help. The problem is that you call `pop(item)` when the page is loading, not just when the user adds something to the cart. There's no reason to do that, just remove it. — Barmar, Aug 19 '14 at 08:10
i have a whole lot of other jquery dependant scripts on the page - all placed at the bottom. on a clean install of oscommerce the script works perfectly as is - but on the site i'm working on it adds an item to the cart everytime the page loads instead of just when an item is added to the cart. — mommaroodles, Aug 19 '14 at 09:09
I don't see anything in the code you posted that adds an item to the cart. All it does is toggle the display of the popop and overlay. — Barmar, Aug 19 '14 at 09:10
I think you're just confused about what's going wrong, and grasping at straws for how to fix it. Using a Javascript library isn't going to solve a fundamental logic problem in your code. — Barmar, Aug 19 '14 at 09:15
.... it pops up once an item is added to the cart - the code above .... i appreciate you all trying to give me advice but obviously difficult for you to understand what I battling since you cant see it — mommaroodles, Aug 19 '14 at 09:24
I don't know what that does. I guess you should look at that function. It's in PHP, not Javascript, so jQuery is irrelevant. — Barmar, Aug 19 '14 at 09:26
thanks for trying - but you not going to understand this unless you know a bit of oscommerce too — mommaroodles, Aug 19 '14 at 10:25

score 0 · Answer 1 · answered Aug 19 '14 at 08:09

0

to get an element you van use $('selector')

$('#yourid')

this works for ids classes and elements all the same way

see: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

answered Aug 19 '14 at 08:09

Ricardo van Laarhoven

719
8
22

score 0 · Answer 2 · answered Aug 19 '14 at 08:12

0

Hey You can write your javascript code given below to Jquery like this

 Javascript code :    var item=document.getElementById("cart_overlay"); 

 JQuery Code:         $('#cart_overlay')

You can find more selecters from here Link

answered Aug 19 '14 at 08:12

Neeraj Dubey

4,401
8
30
49

score 0 · Answer 3 · answered Aug 19 '14 at 08:28

0

As Barmar said above, switching to jQuery won't help you... If you still want to do so (for learning reasons), here's a jQueryfied version of your javascript...

<script type="text/javascript">
  var cart = $('#cart'),
      bg = $('#cart_overlay');

  function toggle_element(el){
    if( $(el).css('display') == 'block' ){
      $(el).css('display', 'none');
    }else{
      $(el).css('display', 'block');
    }
  }
  toggle_element(cart);
  toggle_element(bg);
</script>

answered Aug 19 '14 at 08:28

Carl-Martin Hellberg

106
5

You can replace that whole `if` block with `el.toggle()`. – Barmar Aug 19 '14 at 09:13
Also, since you're calling `jQuery` when you assign the variables, you don't need to call it again inside `toggle_element`. – Barmar Aug 19 '14 at 09:14
True, but this was just to make things really clear about what's happening and as an example how to set css properties using jQuery. The answer won't affect the initial question anyway, this was just a way to show jQuery works. :) – Carl-Martin Hellberg Aug 19 '14 at 09:48

how to use jquery to get element by id instead of javascript

3 Answers3