Question

I am trying to rewrite this link so instead of linking to a light box, it makes an ajax call and updates the contents of <div class = "add-rule>. Here is the link

<div class="add-rule>"<a href = "/saffron_main/add_rule?type=tid&mid=0&cid=1&m-name=valid"  class="lightwindow" params="lightwindow_type=external,lightwindow_height=100,lightwindow_width=300">Add a rule</a></div>

I am new to Javascript and Ajax, so any help would be much appreciated.

Answer 1

The code should look some like this (couldn’t check this out but I am not far away)
For more info have a look at jquery’s ajax api
and you might be interested in the load function.

This is my code, let me know if it fits or not

<div class="add-rule">
    <span id="addRuleError"></span>
    <a href="javascript:void(0)" onclick="loadContent()" class="lightwindow"
                         params="lightwindow_type=external,lightwindow_height=100,lightwindow_width=300">Add a rule</a>
</div>

        <script type="text/javascript">
            function loadContent()
            {
                $("#addRuleError").text("");
                $.ajax({
                    url:"saffron_main/add_rule",
                    data:{type:"tid", mid:0, cid:1, "m-name": "valid"},
                    success:function(result){$(this).parent().html(result)},
                    error:function(result){$("#addRuleError").html(result.responseText)}
                })
            }

        </script>