CODEWITHSUNDEEP
javascriptjqueryhtml
i3i2uno
i3i2uno

Reputation: 33

Another javascript undefined issue

I'm having an issue getting this script to run. It's close but it keeps throwing an undefined error anytime I add anything to the button object.

Here is the HTML: 

<div class="centerBoxContentsFeatured centeredContent back ie_margin" style="width:33%;"><div class="product-col">
                <div class="tie">
                    <div class="indent2">
                        <div>
                            <a class="name" href="http://localhost:8080/rfs700/index.php?main_page=product_info&amp;cPath=37&amp;products_id=128">TB-0070 Tabletop Interpreter Booth</a>
                        </div>
                        <div class="img">
                            <a href="http://localhost:8080/rfs700/index.php?main_page=product_info&amp;cPath=37&amp;products_id=128"><img src="images/products/tb0070.jpg" alt="TB-0070 Tabletop Interpreter Booth" title=" TB-0070 Tabletop Interpreter Booth " width="130" height="130"></a>
                        </div>
                        <div class="desc">
                            The TB-0070 Tabletop Interpreter Booth accommodate...
                        </div>
                        <div class="price"><strong><img src="includes/templates/template_default/images/call_for_prices.jpg" alt="Call for Price" title=" Call for Price " width="78" height="20"></strong></div>
                        <div class="buttons">
                            <a href="http://localhost:8080/rfs700/index.php?main_page=products_new&amp;action=buy_now&amp;products_id=128"><img src="includes/templates/theme324/buttons/english/button_in_cart.gif" alt="Add to Cart" title=" Add to Cart " width="106" height="27"></a><a href="http://localhost:8080/rfs700/index.php?main_page=product_info&amp;cPath=37&amp;products_id=128"><img src="includes/templates/theme324/buttons/english/button_goto_prod_details.gif" alt="Go To This Product's Detailed Information" title=" Go To This Product's Detailed Information " width="58" height="27"></a>
                        </div>
                    </div>
                </div>
            </div></div>

Here is my javascript code: 

<script type="text/javascript">
    $(document).ready(function () {
        var doc = $(".centerBoxContentsFeatured .price");
        doc.each(function (){
            var image = $(this).find("img").attr("alt");
            var button = $(this).find(".buttons");
            if (image == "Call for Price"){
                alert(button.find("a:first-child").attr("href"));
            }
        });
    });
</script>

When I do just alert(button) it displays it as an object. But if I add anything else to the button object for example what is shown in the javascript code above, it displays undefined. Any ideas?

Upvotes: 0

Views: 102

Answers (4)

Irvin Dominin
Irvin Dominin

Reputation: 30993

.buttons class is not a children of .centerBoxContentsFeatured .price is a sibling. Use siblings method:

Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.

Code:

$(document).ready(function () {
    var doc = $(".centerBoxContentsFeatured .price");
    doc.each(function () {
        var image = $(this).find("img").attr("alt");
        var button = $(this).siblings(".buttons");
        if (image == "Call for Price") {
            alert(button.find("a:first-child").attr("href"));
        }
    });
});

Demo: http://jsfiddle.net/IrvinDominin/d5UTW/

Upvotes: 0

Shivam Chopra
Shivam Chopra

Reputation: 639

There's a problem while you call button event because it is outside of you $(".centerBoxContentsFeatured .price")

And also while you call something like this always make sure that the event you are calling is inside that element as of now it is out side of your div and so displaying error.

Now, to remove this you need to directly call the button or reference button through exact element in which it lies.

You solution for this is :

<script type="text/javascript">
    $(document).ready(function () {
        var doc = $(".centerBoxContentsFeatured .price");
        doc.each(function (){
            var image = $(this).find("img").attr("alt");
            var button = $(this).parent(".tie").find(".buttons");
            if (image == "Call for Price"){
                alert(button.find("a:first-child").attr("href"));
            }
        });
    });
</script>

Upvotes: 1

S4beR
S4beR

Reputation: 1847

var doc = $(".centerBoxContentsFeatured .price"); returns below html element

<div class="price">
  <strong>
    <img src="includes/templates/template_default/images/call_for_prices.jpg" alt="Call for Price" title=" Call for Price " width="78" height="20">
  </strong>
</div>

here there are no buttons so $(this).find(".buttons") yields empty object
when you do further button.find("a:first-child") operation on button, this will return null and hence you will get exception when you try to access attr of that.

Upvotes: 0

Brian
Brian

Reputation: 7654

$(".centerBoxContentsFeatured .price") does not contain .buttons. You need to traverse up one level to get the doc back.

<script type="text/javascript">
    $(document).ready(function () {
        var doc = $(".centerBoxContentsFeatured .price");
        doc.each(function (){
            var image = $(this).find("img").attr("alt");
            var button = $(this).parent().find(".buttons");
            if (image == "Call for Price"){
                alert(button.find("a:first-child").attr("href"));
            }
        });
    });
</script>

Upvotes: 1

Related Questions