CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4
Brian Evans
Brian Evans

Reputation: 235

Assign value to id in html link with javascript

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.

Upvotes: 1

Views: 1981

Answers (3)

user2146538
user2146538

Reputation: 344

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 + ' "';

Upvotes: 1

Abhi
Abhi

Reputation: 854

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);

Upvotes: 1

Ajinkya
Ajinkya

Reputation: 22710

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);               
}

Upvotes: 2

Related Questions