jquery.get function url parameter

Question

in the jquery.get() function, the first parameter is URL, is that the url to the content I want to retrieve or to the Controller/action method.

The problem is I'm building an asp.net-mvc application and I'm not sure what to pass as this parameter. Right now I'm passing my partialview.cshtml but nothing is being returned, not sure if I'm doing this right or wrong.

Here's what I got

<div id="editor_box"></div>
<button id="add_button">add</button>

<script>
var inputHtml = null;

var appendInput = function () {
    $("#add_button").click(function() {
        if (!inputHtml) {
            $.get('AddItem.cshtml', function (data) {
                inputHtml = data;
                $('#editor_box').append(inputHtml);
            });
        } else {
            $('#editor_box').append(inputHtml);
        }
    })
    };
</script>

also, what is the second parameter "function (data)" is this the action method?

*"what is the second parameter"* Read the documentation: http://api.jquery.com/jquery.get/ — epascarello, Oct 20 '14 at 17:54
I already did, I don't understand.. thats why I asked here, it says an object sent to the server, I'm not sure what I need to pass in that — Abdul Ahmad, Oct 20 '14 at 17:55
You can pass parameters as second parameter, but in your case, it is `success` handler i.e. if get request succeeds, then it will do execute that function param. — Arindam Nayak, Oct 20 '14 at 17:56
I think this will help you to solve the issue http://stackoverflow.com/questions/7491978/can-i-specify-relative-url-when-using-jquery-get — Anbarasan Thangapalam, Oct 20 '14 at 17:57

score 1 · Answer 1 · answered Oct 20 '14 at 17:57

1

The first argument to $.get is the URL which will respond with the expected data. jQuery/JavaScript don't care what kind of server side architecture you have or the scripting language. Whether the URL looks like a file AddItem.cshtml or a friendly route like /User/Sandeep, it doesn't matter as far as the client side is concerned.

In the case of ASP.NET, your URL endpoint can be generated like so:

$.get('@Url.Action("SomeAction", "SomeController")', function (data) {

answered Oct 20 '14 at 17:57

MrCode

63,975
10
90
112

is there anything wrong with my script as a whole? its not calling my action method, I put a breakpoint on it – Abdul Ahmad Oct 20 '14 at 18:14
Does the request get sent at all? Check the console (F12) on the Net tab. Also put a console.log("making request...") in the click event... – MrCode Oct 20 '14 at 18:40
@AbdulAhmad, Does you action method expect a parameter? Your not currently passing anything to the method. – Oct 20 '14 at 20:58
Sorry, was out, no it does not expect a parameter, checking console in a minute – Abdul Ahmad Oct 20 '14 at 21:31
I don't think the request is getting sent, the javascript console is not displaying anything in chrome – Abdul Ahmad Oct 20 '14 at 21:55
Remove everything and just get the click handler working first, remove the condition etc until at least that works. – MrCode Oct 21 '14 at 06:18
ok code is being called but I'm getting a 404 not found, in the javascript console for the controller/action – Abdul Ahmad Oct 21 '14 at 13:22
for some reason, removing the controller name from the url helper solved the problem, everything is working great, thank you! – Abdul Ahmad Oct 21 '14 at 14:16

score 1 · Accepted Answer · 2014-10-20T23:43:25.873

1

You need to remove var appendInput = function () { from the script. You are defining a function but never calling it. Just use the following (update you action and controller) names

<script>
  var inputHtml = null;
  $("#add_button").click(function() {
    if (!inputHtml) {
      $.get('@Url.Action("SomeAction", "SomeController")'', function (data) {
        inputHtml = data;
        $('#editor_box').append(inputHtml);
      });
    } else {
      $('#editor_box').append(inputHtml);
    }
  });
</script>

Edit

Based on your script you appear to be requiring the content only once (you then cache it and add it again on subsequent clicks. Another alternative would be to render the contents initially inside a hidden <div> element, then in the script clone the contents of the <div> and append it to the DOM

<div id="add style="display:none">@Html.Partial("AddItem")</div>

$("#add_button").click(function() {
  $('#editor_box').append($('add').clone());
});

edited Oct 20 '14 at 23:43

answered Oct 20 '14 at 23:33

I'm getting a 404 not found in the javascript console for the controller/action – Abdul Ahmad Oct 21 '14 at 13:22
dont controllers in asp.net get served per request? is this why it says resource not found? – Abdul Ahmad Oct 21 '14 at 13:52
@AbdulAhmad, You need to make sure the controller and action names are correct (currently they aren't which is why you get the 404 eror). But the 2nd option is a better solution anyway and unless you partial (AddItem.cshtml) is being reused in other views, then you may as a well put its html directly in this view (inside the hidden div) – Oct 21 '14 at 21:04
thanks for following up with the answer, I'm not sure if other views will need this partial view (right now I'm guessing yes), but will keep your advice in mind to take the best approach possible – Abdul Ahmad Oct 22 '14 at 00:14
I hope you don't mind me asking, I will take your approach, but what is the @Html.Partial doing? should I just add the contents of the partial view inside the div instead of the Html.Partial helper? – Abdul Ahmad Oct 23 '14 at 12:26
1

If you have a partial view named `AddItem` (say in the `Views/Shared` folder, then `@Html.Partial("AddItem")` renders the contents of that partial view so its the same as adding the html manually in the `div`. The reason for using a partial view is so that its a piece of reusable content that can be used in multiple views. For example you might have a partial for a banner or sidebar that you want to render in all views - just save you from recreating the html over and over again. – Oct 23 '14 at 12:39
Hi Stephen, I'm having some troubles and posted a question, if you can take a look when you have time and offer some advice, I think you may be one of the few people who may know what's going on. Heres the link http://stackoverflow.com/questions/26783934/foreign-key-cycles-or-cascade-paths thanks! – Abdul Ahmad Nov 07 '14 at 04:16
@AbdulAhmad, I don't use EF so can't help on that one sorry. – Nov 07 '14 at 05:13

jquery.get function url parameter

2 Answers2