Moving javascript from view to javascript file

Question

I have several views that contain this same javascript.

<script type="text/javascript">
   $(function () {
    $("#addAnother").click(function () {
        $.get('/QuestionGroup/QuestionEntryRow', function (template) {
            $("#questionEditor").append(template);
        });
    });
});
</script>

I decided to move this logic to a javascript file. So here what I did.

On my view I added a data-attr.

        <a method="get" action="@Url.Action("QuestionEntryRow", "QuestionGroup")" href="#">Add another</a>

In the javascript file I added the following code.

  var insertRow = function () {
      var $a = $(this);

      var options = {
          url: $a.attr("action"),
          type: $a.attr("method")
      };

      $.ajax(options).done(function (data) {
          var $target = $($a.attr("data-cban-target"));
          $target.append(data);
      });

      return false
  };

  $("a[data-cban-a]").click(insertRow);

When the user click the link "Add another". The javascript is not getting executed.

Target

<ul data-cureurban-target="questionEditor" style="list-style-type: none">
</ul>

Here the controller logic

public ActionResult QuestionEntryRow()
{
    ViewBag.QuestionID = new SelectList(db.Questions, "QuestionID", "QuestionDesc");

    return PartialView("_QuestionEntryEditor");
}

If the javascript file reference is in the head of the document you are trying to assign the click handler before the `a` element exists. — Jon P, Apr 10 '15 at 00:15
The line url: $a.attr("action") should throw an error. There is no attribute named "action" on the hyperlink. Again no attribute has been specified for "data-cban-target". — TejSoft, Apr 10 '15 at 00:29
This is the url : data-cban-a="@Url.Action("QuestionEntryRow", "QuestionGroup")". The view page source would like like this data-cureurban-a="/QuestionGroup/QuestionEntryRow" — RThompson, Apr 10 '15 at 00:35
At @Jasen, the problem is when they have moved the code they have taken it out of $(function() { }); — Jon P, Apr 10 '15 at 00:43

score 0 · Answer 1 · answered Apr 10 '15 at 00:45

0

Try the following for your .js file:

var insertRow = function () {
  var $a = $(this);

  var options = {
      url: $a.attr("action"),
      type: $a.attr("method")
  };

  $.ajax(options).done(function (data) {
      var $target = $($a.attr("data-cban-target"));
      $target.append(data);
  });

  return false
};

$(document).ready(){
    $("a[data-cban-a]").click(insertRow);
}

answered Apr 10 '15 at 00:45

Jon P

19,442
8
49
72

Thanks Jon P. This is still not working. I did change the view to use this logic – RThompson Apr 10 '15 at 00:56
@RThompson is that selector correct `$("a[data-cban-a]")`? Does it match anything on the page? – Jasen Apr 10 '15 at 01:26
Can you provide more info other than "not working"? Any error messages etc? What debugging have you performed? Based on Jasens' comment you are missing the `action` and `method` attributes. Where are you expecting them to come from. – Jon P Apr 10 '15 at 01:53
When I place my cursor over the Add another it is showing this controller action http://localhost:60856/QuestionGroup/Create#. I did fix the problem with the "action". Add another – RThompson Apr 10 '15 at 05:49

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

Try adding javascript:void(0) in href of anchor tag.

<a method="get" action="@Url.Action("QuestionEntryRow", "QuestionGroup")" href="javascript:void(0)">Add another</a>

Refer this stackoverflow post for more details

edited May 23 '17 at 12:06

Community

1
1

answered Apr 10 '15 at 05:39

Adersh M

596
3
19

When I click the link "Add another" nothing is happening. When I place the cursor over the link I do see the "javascript:void(0)". – RThompson Apr 10 '15 at 14:16
I made the following changes. First I changed the view to this Add another. Then I change the .js to this $("a[data-cureurban-ajax='true']").click(insertRow). When clicking nothing is happening. – RThompson Apr 10 '15 at 14:43

score 0 · Answer 3 · answered Sep 06 '18 at 02:52

Default event propogation for (a)anchor tag needs to be stopped.

<script type="text/javascript">
    $(function () {
        $("#addAnother").click(function (e) {
            e.preventDefault();
            $.get('/QuestionGroup/QuestionEntryRow', function (template) {
            $("#questionEditor").append(template);
        });
    });
});
</script>

Moving javascript from view to javascript file

3 Answers3