Question

I want to use .load to change a div’s text based on another page which pulls in items from the database. Essentially I have Ajax/popup.aspx?pID=23 which brings back a plain html file with a h2 and a

text

that i’ll use .load to swap text out of a div. Heres what I have at the moment:

 $(document).ready(function () {
        if ($(".CompanyType").length > 0) {

            $('.CompanyType').click(function () {
                $(".BuildingSize").empty();
                $(".BuildingSize").load("Ajax/popup.aspx" + "?pID=" + *WHAT TO PUT HERE*);
            });
        }

    });

My issue is that I’d normally use something like $(this).attr(“value”) to declaire the pID as i’ve only ever done it from dropdown lists. How can I asisgn a value to an image. (companyType is an image)

Thanks a lot

Answer 1

Use an HTML5 data-* attribute, something like this:

<img src="yourimgsrc" class="companyType" data-id="yourpID"/>

Then, in your code you’d do:

$(document).ready(function () {
    $('.CompanyType').click(function () {
        $(".BuildingSize").empty();
        $(".BuildingSize").load("Ajax/popup.aspx" + "?pID=" + $(this).data('id'));
    });
});

Note that I’ve removed the length check in your code because it’s unnecessary – jQuery handles that for itself. I also don’t think you need to empty() the element(s) before calling .load() – it should replace with, rather than append, the loaded content.