partial view rendering problem

Question

im trying to render a partial view on click event ... the request is posted to the controller successfully but it is not being received at the view ... im returning a partial view from the controller... below is my view and controller...

<script type="text/javascript">

    function postForm() {      

        if ($('#searchresultsweather').is(':parent')) {
                  alert("parent");
                  var child = $('#searchresultsweather').children().attr("id");
                  alert(child);
                  $('#' + child).remove();
        }    
        alert("about to post form");
        var searchText = $('#weathersearch').val();
        alert(searchText);

        $.get('<%=Url.Action("SearchWeatherLocation?searchText='+searchText+'","Weather")%>', null,
         function(data) {
             alert("call back");
             $("div#searchresultsweather").append(data);

         });



    }


</script>

<form id="feedForm">
    <fieldset>
    <p>
        <input type="text" value="" maxlength="60" id="weathersearch" name="search" class="text"/>
        <input type="submit" value="Search" class="submitbut" id="submitbutton_search" onclick="postForm();"/></p>
        <div class="clear"></div>
    </fieldset>
    <div id="searchresultsweather"></div>
    </form>

this my controller side

ViewData["weather"] = weather;
            ViewData["searchText"] = searchText;                        
            return PartialView("PartialWeather");

Answer 1

<input type="submit"/>

the button type was causing the page to post back

changed it to <input type="button" and its working ok

Answer 2

If you action returns a partial view you can do the following ...

Markup / Script

<script type="text/javascript">

    function getpartial() {
        var url = "<%: Url.Action("MyAction") %>";
        $.ajax({
            url: url,
            success: function (data) {
                $('#result').html(data);
            }
        });

     return false; // stops the form submitting (if in a form)
    }

</script>

<input type="button" onclick="getpartial();" title="Get partial" />

<div id="result"></div>

Controller Action

    public ActionResult MyAction()
    {
      // todo: get data
      ViewData["searchText"] = searchText;                        
      return PartialView("PartialWeather", weather);
    }

Hope this helps.

Answer 3

I think you have to add the "script" parameter to your $.get jquery call.

So you will have to change it to

$.get('<%=Url.Action("SearchWeatherLocation?searchText='+searchText+'","Weather")%>', null,
         function(data) {
             alert("call back");
             $("div#searchresultsweather").append(data);

         }, "script");