HTML button not displaying on success of ajax

Question

I need to display an input button on the success message in my view. I am working in MVC 3 application using razor views. This button will allow the user to navigate to another view.

Controller.

var successfull = new string[]
{
  "All " + builder.Data.Count.ToString() + " work items were added successfully."
};

return new JsonResult
{
   Data = new { success = true, msg = successfull}
};

JavaScript.

var jsonText = JSON.stringify(json);

$.ajax({
   url: '/Builder/CreateWork',
   type: 'POST',
   dataType: 'json',
   data: jsonText,
   contentType: 'application/json; charset=utf-8',
   success: function (result) {
     // clear table
     $('#instruments-data').empty();
     resultMessage(result);
   },
   complete: function () {
     // hides the loading gif
     $('.loading').hide();
   }
});

View

<div id="resultMessage"></div>

Is there a way to add to the ajax code to include the following input button.

<input type="button" class="styledbutton" value="Some text" onclick="window.location.href='Url.Action("action", "controller")';" />

EDIT ---

The problem lies with this piece of code - but can't see the problem.

        onclick="window.location.href = '@Url.Action("actionName", "controllerName")'"/>');

Please advise.

Answer 1

Yes you can generate html in ajax call as given below :

<div id="div1"><div>

success: function (result) {
                // clear table
                $('#instruments-data').empty();
                resultMessage(result);
                $('#div1').html('<input type="button" class="styledbutton" value="Some text" onclick="window.location.href='@Url.Action("actionName", "controllerName")'/>')
            }

Above Code will work fine,just generate html in ajax call as above.

Answer 2

The button is static so you can hide it

<input style="display:none" type="button" class="styledbutton" value="Some text" onclick="window.location.href='Url.Action("actionName", "controllerName")';" />

And then in success callback show it

            success: function (result) {
            // clear table
            $('#instruments-data').empty();
            resultMessage(result);
            //show button
            $(".styledbutton").show();
        },

Answer 3

You can do this in a simple way. As you have been advised, you can hide the button initially using css .

<input type="button" class="styledbutton" style="display:none;" value="demo" onclick="window.location.href='Url.Action("actionName", "controllerName")';"/>

you just need little bit tweak in your js code if everything behind the scenes is working fine (i mean model and controllers).

use done() instead of success and likewise always() instead of complete if you are using jQuery v 1.8 or higher. Check the deprecation notice in docs . success and complete are no longer in use as of jQuery 1.8+

$.ajax({
   url: '/Builder/CreateWork',
   type: 'POST',
   dataType: 'json',
   data: jsonText,
   contentType: 'application/json; charset=utf-8'
 }).done(function(result){
     // clear table
     $('#instruments-data').empty();
     resultMessage(result);
     //just show the button
     $(".styledbutton").show();
 }).always(function(){
     // hides the loading gif
     $('.loading').hide();
});

Note: Place your button exactly where you want to see it on view and make it display:none . Ajax will handle the rest. Let me know if it doesn't work.

Answer 4

None of the previous answers were allowing for re-direct, so I found a work around.

  success: function (result) {
                // clear table
                $('#instruments-data').empty();
                resultMessage(result);
                $('#resultMessage').append('<input type="button" id="MultiStatus"class="styledbutton" value="Button text" />');
                $('#MultiStatus').click(function (e) {
                    location.href = "/Controller/Action";
                });

Answer 5

If you want advice, i would suggest you to try anchor button with bootstrap styling to reflect the feel of a button.

can you please try this if that doesn't hurt your intention.

example:

@Html.ActionLink("ButtonText", "ActionName", "ControllerName", null, new { @id = "Query", @class = "btn btn-inverse styledButton" })

i have included a jsbin demo about how to use the button for your specific need, please follow this link: Demo

Feel free to comment if you need any explanation