p.131 "blur" function not working

Mr. Bill · January 1st, 2011, 02:12 AM

When I click my 'Host a Meeting' tab then insert an address into the 'Address' field then tab out, nothing happens.

I currently have to manually insert the Latitude and Longitude >>> save the meeting >>> then click edit in order to have the map actually load the pin.

As per the following paragraph on p.131 I'm supposed to be able to simply "tab out of the 'Address' field" to load the map with the appropriate location:

"When we type in an address, and then tab away, the map will dynamically update to display the location, and our event handler will populate the latitude/longitude textboxes with the location values:"

I've troubleshot this over and over again and can't seem to figure out what the problem is. Please help.

flyinhawaiian · January 3rd, 2011, 10:41 AM

Here's what my DinnerForm.ascx looks like. Hope this will help.

Code:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<NerdDinner.Models.DinnerFormViewModel>" %>

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

<%: Html.ValidationSummary("Please correct the errors and try again.") %>

<% using (Html.BeginForm()) { %>

    <fieldset>
        <div id="mapDiv">    
            <% Html.RenderPartial("Map", Model.Dinner); %>
        </div> 

        <p>
            <%: Html.LabelFor(m => m.Title) %>
            <%: Html.TextBoxFor(m => m.Title) %>
            <%: Html.ValidationMessageFor(m => m.Title, "*") %>
        </p>
        <p>
            <%: Html.LabelFor(m => m.EventDate) %>
            <%: Html.TextBoxFor(m => m.EventDate) %>
            <%: Html.ValidationMessageFor(m => m.EventDate, "*")%>
        </p>
        <p>
            <%: Html.LabelFor(m => m.Description) %>
            <%: Html.TextAreaFor(m => m.Description) %>
            <%: Html.ValidationMessageFor(m => m.Description, "*")%>
        </p>
        <p>
            <%: Html.LabelFor(m => m.Address) %>
            <%: Html.TextBoxFor(m => m.Address) %>
            <%: Html.ValidationMessageFor(m => m.Address, "*") %>
        </p>
        <p>
            <%: Html.LabelFor(m => m.Country) %>
            <%: Html.DropDownListFor(m => m.Country, Model.Countries) %>       
            <%: Html.ValidationMessageFor(m => m.Country, "*") %>
        </p>
        <p>
            <%: Html.LabelFor(m => m.ContactPhone) %>
            <%: Html.TextBoxFor(m => m.ContactPhone) %>
            <%: Html.ValidationMessageFor(m => m.ContactPhone, "*") %>
        </p>
            
        <p>
            <input type="submit" value="Save" />
        </p>



        <p>
            <%: Html.Hidden("Latitude", Model.Dinner.Latitude)%>
            <%: Html.Hidden("Longitude", Model.Dinner.Longitude)%>
        </p>   


        </fieldset>

    <script type="text/javascript">

            $(document).ready(function () {
                $("#Address").blur(function (evt) {
                    $("#Latitude").val("");
                    $("#Longitude").val("");

                    var address = jQuery.trim($("#Address").val());
                    if (address.length < 1)
                        return;

                    NerdDinner.FindAddressOnMap(address);
                });
            });
    
        </script>


<% } %>


<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () {
        NerdDinner.EnableMapMouseClickCallback();

        $("#Dinner_Address").blur(function (evt) {
            //If it's time to look for an address, 
            // clear out the Lat and Lon
            $("#Dinner_Latitude").val("0");
            $("#Dinner_Longitude").val("0");
            var address = jQuery.trim($("#Dinner_Address").val());
            if (address.length < 1)
                return;
            NerdDinner.FindAddressOnMap(address);
        });
    });
//]]>
</script>

Mr. Bill · January 5th, 2011, 02:14 AM

Thank you for your input and I apologize for my delay in response. My problem was that the Id's in the generated HTML for my DinnerForm controls were different than what my jQuery code was looking for.

I simply needed to place "Dinner_" in front of the following controls:

Address
Latitude
Longitude

shark777 · January 8th, 2011, 07:09 PM

Quote:

Originally Posted by Mr. Bill

I simply needed to place "Dinner_" in front of the following controls:

Address
Latitude
Longitude

I don't get it. The jQuery function is looking for "Address". How is it supposed to pick off Dinner_Address?

any help would be much appreciated...

Thanks

shark777 · January 9th, 2011, 12:49 AM

Quote:

Originally Posted by shark777

I don't get it. The jQuery function is looking for "Address". How is it supposed to pick off Dinner_Address?

any help would be much appreciated...

Thanks

never mind - i figured it out

sheilaorl33 · January 14th, 2011, 12:30 AM

nice .. good day

gift ideas husband - Hawaii Movers - unique birthday gifts for men women