MVC Ajax Not Populating Same Page

Question

4.00/5 (1 vote)

See more:

I've not done very much with MVC so I'm hoping this is a easy one. I'm trying to build a textbox that will populate a pop-up with searched data as the user types letters. Kind of like a dropdown but the powers that be don't want to use one. (So be it.)

I've gotten this to work on a non-MVC page using code behind and PageMethods. MVC requires different techniques. I've setup a controller that returns the appropriate data. I've setup routes.MapRoute in the Global.asax.cs.

Here is the code in my .ascx file:

<script type="text/javascript">
        var timeout = 500;
        var closetimer = 0;
        var ddmenuitem = 0;

        function DisplaySearchResults(searchtxt) {
//                alert(document.location.href = "/MallSearch/" + searchtxt);
                $.ajax({
                    type: "GET",
                    url: document.location.href = "/MallSearch/" + searchtxt,
                    dataType: "text",
                    context: document.body,
                    success: function(data) {
                    //$(this).OnSucceeded(data);
                    OnSucceeded(data);

                    }
                });
        }

        function OnSucceeded(data) {
            // Display results
            //alert(data);
            $get('<%=lblSearchResults.ClientID %>').innerHTML = data;
            }

</script>


<link href="/corporate/css/styles.css" rel="stylesheet" type="text/css" />

<!--suggest-->
<script type="text/javascript" src="/corporate/js/suggest/jsapi.js"></script>
<script type="text/javascript" src="/corporate/js/suggest/script.js"></script>

<!--sliding panel-->
<script src="/corporate/js/panel/slide.js" type="text/javascript"></script>
<link rel="stylesheet" href="/corporate/js/panel/slide.css" type="text/css" media="screen" />

<script type="text/javascript" src="/corporate/js/forms/jquery.jqtransform.js" ></script>
<link rel="stylesheet" href="/corporate/js/forms/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript">
    $(function() {
        $('form.jump').jqTransform({ imgPath: 'corporate/js/forms/img/' });
    });

    /* placeholder text */
    jQuery(function($) {
        $("input[name='searchmall']").addPlaceholder();
    });
</script>


<div id="menu">
    <div id="formfield">
        <input name="searchmall" type="text" id="inputString" size="21" onkeyup="DisplaySearchResults(this.value);" placeholder="Search mall name or state" />
        <br />
        <div id="suggestions">
            <asp:Label ID="lblSearchResults" name="lblSearchResults" runat="server" Text=""></asp:Label>
        </div>
    </div><!--end formfield-->
    <div id="panel">
        <div id="toppanel">
            <a href="#">more search options &raquo;</a>
        </div> <!--toppanel -->
    </div><!--panel -->
</div>

When testing the data returned from the controller will not populate the label "lblSearchResults" .innerHTML. In fact I can not see the data returned from the $.ajax call. What happens is a new blank virtual page is opened and the data is returned and displayed there.

Posted 7-Jun-11 5:56am

ehwash

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jpuckett · Accepted Answer · 2011-06-07T07:45:00

Use the jQueryUI plugin that does this for you[^].

All you have to do to use the plugin is pass a RouteUrl and data (the textbox's text) to the route and return a JsonResult of results.

If you continue to need help, reply and I'll spell it out further, but this should point you in the general direction.

ehwash · Accepted Answer · 2011-06-08T03:04:00

Thanks Jpuckett. However, I figured out my own solution. After days on this here what I came up with. The jscript is changed as follows:

XML

<script type="text/javascript">
        function DisplaySearchResults(searchtxt) {
            var html = $.ajax({
                    url: "/MallSearch/"  + searchtxt,
                    async: false
                }).responseText;

                $("#suggestions").html('');
                $("#suggestions").append(html);
        }

</script>

I removed the

C++

lblSearchResults

label and just populate the

C++

<div id="suggestions">

div tag.

MVC Ajax Not Populating Same Page

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0