Correct syntax when using variable div ID in jQuery's .load Function

Question

I'm trying to use jQuery's .load function to load new content into a div of unknown ID. I'm trying to grab its ID from a child element. Starting with an alert returns the parent ID:

<script language="javascript">
    $('#submitbtn').click(function(){
        var parentId = $('#windowanchor').parent().attr('id');
        alert('ID = ' + parentId);
    });
</script>

Good. However, when modifying the code to include the .load function no content is loaded:

<script language="javascript">
    $('#submitbtn').click(function(){
        var parentId = $('#windowanchor').parent().attr('id');
        $(parentId).load("plug.php?r=calendar&m=edit&id=1");
    });
</script>

I suspect that the syntax I've used is wrong (js/jquery rookie). Please help!

adeneo · Accepted Answer · 2014-04-10 15:46:07Z

3

ID's are unique, so just do

<script language="javascript">
    $('#submitbtn').click(function(){
        $('#windowanchor').parent().load("plug.php?r=calendar&m=edit&id=1");
    });
</script>

There's no need to get the ID, just to stick it in a selector and get the same element over again !

answered Apr 10, 2014 at 15:46

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sablefoste Over a year ago

This is the cleanest of the answers

Curtis · Accepted Answer · 2014-04-10 15:46:09Z

1

You need to prefix with # in the selector:

$("#" + parentId).load("plug.php?r=calendar&m=edit&id=1");

However, a cleaner solution would be to just use the reference for the load without obtaining the ID at all:

$('#windowanchor').parent().load("plug.php?r=calendar&m=edit&id=1");

answered Apr 10, 2014 at 15:46

Curtis

104k69 gold badges280 silver badges359 bronze badges

Comments

RGS · Accepted Answer · 2014-04-10 15:46:19Z

1

<script language="javascript">
    $('#submitbtn').click(function(){
        var parentId = $('#windowanchor').parent().attr('id');
        $('#'+parentId).load("plug.php?r=calendar&m=edit&id=1");
    });
</script>

answered Apr 10, 2014 at 15:46

RGS

5,2217 gold badges44 silver badges69 bronze badges

Comments

FabioG · Accepted Answer · 2014-04-10 15:46:53Z

1

you need to add the #

<script language="javascript">
    $('#submitbtn').click(function(){
        var parentId = $('#windowanchor').parent().attr('id');
        $('#'+parentId).load("plug.php?r=calendar&m=edit&id=1");
    });
</script>

answered Apr 10, 2014 at 15:46

FabioG

2,9863 gold badges34 silver badges50 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:03:50Z

0

You need to prepend a # to the parentId so that the selector works properly.

var parentId = '#' + $('#windowanchor').parent().attr('id');
$(parentId).load("plug.php?r=calendar&m=edit&id=1");

This way, if the id attribute of the #windowanchor's parent is main, the selector becomes #main.

Although, adeneo's solution is ideal; rather than fetching the parent's ID and running another jQuery selector, simply calling the .load() method directly on $('#windowanchor').parent() is more efficient.

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Apr 10, 2014 at 15:46

theftprevention

5,2433 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

Correct syntax when using variable div ID in jQuery's .load Function

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related