Assign value to id in html link with javascript

Question

I have the following link that passes an id to my controller to render a report.

<a href="@Url.Action("GetReport", new { type = "PDF", id = 12345})" class="btn btn-default btn-primary">Print Report</a>

I would like to assign this value id in the link above to the result I have returned from the database in the call below....

// Global variable
var DocumentID = null;

$('#Save').click(function(e) {

     if (document.forms[0].checkValidity()) {

         e.preventDefault();

         $.ajax({
             url: "/Home/SaveDetails",
             dataType: "json",
             type: "POST",
             data: ko.toJSON(viewModel),
             contentType: "application/json;charset=utf-8",
             success: function(result) {
             if (result > 0) {
                 //Assign return value to DocumentID
                 DocumentID = result;
                 alert("This work request has been successfully saved in database. The Document ID is: " + result);
              } else {
                alert("The Work Request was not saved, there was an issue.");
              }
          },
          complete: function() {
              // Hide loading image.
          },
          error: function(jqXHR, textStatus, errorThrown) {
              // Handle error.
              alert(errorThrown);
          }
      });
    } else {
        alert("Form is not valid");
    }
});

The call above works and returns a DocumentID and displays this in an alert with success. The link above works if the id has a hard-coded value; I would just like to make this value dynamic.

Can you rephrase to explain which ID you mean? the ID of the link? <a>? — Guy
– Guy, Commented Apr 10, 2014 at 5:07

Ajinkya · Accepted Answer · 2014-04-10 05:10:59Z

2

if (result > 0) {
   //Assign return value to DocumentID
   var DocumentID = result;
   var href = '@Url.Action("GetReport", new { type = "PDF", id =' + DocumentID +'})';  
   $("a:contain('Print Report')").attr('href', href);               
}

answered Apr 10, 2014 at 5:10

Ajinkya

22.7k33 gold badges113 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2146538 · Accepted Answer · 2014-04-10 15:34:44Z

The above suggestions will generate an error for an unsupported pseudo, in this case 'contain' which is not available or known to the anchor tag. There is also an error with the syntax of putting the DocumentID in the Url.Action. I was not able to get this to work, instead I found another error: Too many characters in literal.

Instead give your anchor an id and find that id using jQuery and replace it's href attribute, this is done in the second line of code under Javascript.

html:

<a href="#" **id="Report"**>Print Report</a>

Javascript:

var DocumentID = result; var href = '@Url.Action("GetReport")?type="PDF"&id=' + DocumentID + ''; 
$("#Report").attr('href', href);

Take note of two things. The URL is formed and the anchor tag is found differently versus previous suggestions.

This has been tested and works for parameters of type string and int, respectively in your callback function to handle getting the report. If you want two strings then add an additional double-quote around the DocumentID like this: id=" ' + DocumentID + ' "';

Abhi · Accepted Answer · 2014-04-10 06:33:43Z

1

in your ajax-success handler just set the href of the anchor to whatever you want

var newHref = '@Url.Action("GetReport", new { type = "PDF", id = '+DocumentID +'})';

$('a').attr('href',newHref);

edited Apr 10, 2014 at 6:33

answered Apr 10, 2014 at 5:11

Abhi

85410 silver badges8 bronze badges

3 Comments

Ajinkya Over a year ago

Wont work, Hint: 1. newHref should use '. 2. $('a') can select any other anchor tag

Abhi Over a year ago

Updated the code. As Karna suggested you will need to add a better selector than just $('a') .

Ajinkya Over a year ago

@BrianEvans: href should be '@Url.Action("GetReport", new { type = "PDF", id =' + DocumentID +'})';

Collectives™ on Stack Overflow

Assign value to id in html link with javascript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related