Load partial view into div on button click without refreshing page

Question

I know this question might be repeated but my query is different let me explain, I have a drop down in page and by selecting value in drop down list,and I click on submit button.. I want by click on submit button I need to load partial view in tag that is list of records of selected drop down list value.

i tried this :

$("#btnclick").click(function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Content("~/Search/MDLNoDataList")',
                data: mdlno,
                success: function (data) { $("#viewlist").innerHtml = data; }
            });
        });

but not getting result And I m using these many jquery plugins

<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

Murali Murugesan · Accepted Answer · 2013-02-14 15:23:02Z

3

If i understand correctly, below is what you need to do.

HTML Example:

<div id="records">
</div>
<select id="ddlRecordType">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<input type="submit" value="Load Records" id="btn-submit" />

jQuery Code

$(document).ready(function(){
 $('#btn-submit').click(function(){
  var selectedRecVal=$('#ddlRecordType').val();
   $('#records').load('/LoadRecords?Id='+selectedRecVal);
   return false; // to prevent default form submit
 });
});

Here ?Id= is the query string parameter passed to server to get the selected item in dropdown.

Edit: The below answer was added, as the question content changed from initial post

   $("#btnclick").click(function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("MDLNoDataList","Search")',
            data: mdlno,
            success: function (data) { 
              // $("#viewlist")[0].innerHtml = data; 
               //or 
               $("#viewlist").html(data);
             }
        });
      return false; //prevent default action(submit) for a button
    });

edited Feb 14, 2013 at 15:23

answered Feb 9, 2013 at 11:24

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

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

4 Comments

IT_INFOhUb Over a year ago

<%= Html.DropDownList("ddlMDLNo", ViewData["MDLno"] as SelectList, "--Select One--", new { onchange = "TestFun()" })%>

IT_INFOhUb Over a year ago

I do not have issue with passing id to controller. I can successfully pass the id to controller and I can successfully get data in partial view .. but thing is that.. I just want my partial view with data should be loaded in div tag when i click on button.

Murali Murugesan Over a year ago

@Anu $('#btn-submit').click(function(){ this line of code stands for button click only!

Murali Murugesan Over a year ago

@Anu, see my updated answer. You can use $("#viewlist").html() or $("#viewlist")[0].innerHtml

Darin Dimitrov · Accepted Answer · 2013-02-09 12:51:08Z

Make sure you cancel the default action of form submission by returning false from your click handler:

$("#btnclick").click(function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("MDLNoDataList", "Search")',
        data: mdlno,
        success: function (data) { 
            $("#viewlist").html(data); 
        }
    });

    return false; // <!-- This is the important part
});

And if you are using the WebForms view engine and not Razor make sure you use the correct syntax to specify the url:

$("#btnclick").click(function () {
    $.ajax({
        type: 'POST',
        url: '<%= Url.Action("MDLNoDataList", "Search") %>',
        data: mdlno,
        success: function (data) { 
            $("#viewlist").html(data); 
        }
    });

    return false; // <!-- This is the important part
});

If you do not return false, the form is simply submitted to the server when you click on the submit button, the browser redirects away from the page and obviously your AJAX call never has time to execute.

You will also notice some improvements I made to your original code:

Using the Url.Action helper when pointing to a server side controller action in order to take into account routes defined in your application.
Using jQuery's .html() method instead of innerHTML to set the contents of a given element.

Talha Akbar · Accepted Answer · 2013-02-09 11:06:32Z

0

You need AJAX for this purpose.

$.get(url, data, function(data) { $(element).append(data) });

and Partial View that is vague.

element {
    overflow:hidden;
}

answered Feb 9, 2013 at 11:06

Talha Akbar

10.1k7 gold badges42 silver badges62 bronze badges

Collectives™ on Stack Overflow

Load partial view into div on button click without refreshing page

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related