CODEWITHSUNDEEP
javascriptjquery
h0dges
h0dges

Reputation: 693

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

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!

Upvotes: 0

Views: 149

Answers (5)

FabioG
FabioG

Reputation: 2986

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>

Upvotes: 1

theftprevention
theftprevention

Reputation: 5213

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.

Upvotes: 0

RGS
RGS

Reputation: 5211

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

Upvotes: 1

Curtis
Curtis

Reputation: 103388

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");

Upvotes: 1

adeneo
adeneo

Reputation: 318302

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 !

Upvotes: 3

Related Questions