How to use Custom JS with Django inline

Question

I have Django application with inline in place:

class Account(models.Model):
    ContractNum = models.PositiveIntegerField(unique=True, blank=True, null=True)
    LastName = models.CharField(max_length=50,)
    FirstName = models.CharField(max_length=50, )

class Subscription(models.Model):
    Account = models.ForeignKey(Account, related_name='AccountLine')
    IpAddress = models.IPAddressField(unique=True, default=getFreeIP)
    MacAddress = MACAddressField() 
    Switch = models.ForeignKey(Switch, related_name='SwitchAccounts')
    Port = models.ForeignKey(Port )

In admin interface I have inline for the Account class. As a result I have HTML generated like this:

              <td class="Switch">
                  <select name="AccountLine-0-Switch" id="id_AccountLine-0-Switch">
<option value="">---------</option>
<option value="1">ds34/33-2</option>
<option value="8" selected="selected">ds34-1</option>
</select><a href="/admin/cmdb/switch/add/" class="add-another" id="add_id_AccountLine-0-Switch" onclick="return showAddAnotherPopup(this);"> <img src="/admin_media/img/admin/icon_addlink.gif" width="10" height="10" alt="Add one more"/></a>    
              </td>
              <td class="Port">
                  <select name="AccountLine-0-Port" id="id_AccountLine-0-Port">
<option value="">---------</option>
<option value="1">3com34:1</option>
<option value="161" selected="selected">ds34-1:1</option>
</select><a href="/admin/cmdb/port/add/" class="add-another" id="add_id_AccountLine-0-Port" onclick="return showAddAnotherPopup(this);"> <img src="/admin_media/img/admin/icon_addlink.gif" width="10" height="10" alt="Add one more"/></a>

I'm not really good on JavaScript, could you please help me to prepopulate Port option-box, according to choosed Switch option-box? What I've already done: Created JSON query, and view, which returns ports for specific swicth, what I don't know how to do is how to hanlde dynamic id's for inline fields, and how to do this automatically when you add one more row? Thank you for any idea and help in advance.

Answer 1

I cannot provide you a full answer right now, but here you will find a similar problem, and a solution that provides an example of a javascript that should mainly fit your needs if you adjust some ids in it (especially you should see how the html elements are referenced in the script)

Answer 2

I did as you recommended, in that post, and it's working pretty fine, here is JavaScript I've made:

$(document).ready(function() {
        $(".module").delegate("[id$=-Switch]", "change", function() {
            var row = $(this).attr("id").split('id_AccountLine-')[1].split("-Switch")[0];
            var switch_id = $(this).val();
        var json_url = "/admin/cmdb/switch_ports/"+switch_id+"/"
            $("#id_AccountLine-"+row+"-Port").html("");
        $.post("/admin/cmdb/switch_ports/"+switch_id+"/", { "func": "getNameAndTime" },
                function(data){
            for ( var i = 0; i < data.length; i++) {
                var onePort = "<option value=\""+data[i].pk+"\">"+data[i].fields.PortNum+"</option>";
                $("#id_AccountLine-"+row+"-Port").append(onePort);
            }
                }, "json");
        });
    });