Solved

Populate Lable with jQuery

Posted on 2010-09-19
5
420 Views
Last Modified: 2012-05-10
Form contains a panel with an editbox, a button, a label and a link.  EditBox and button is contained in a hidden panel.  On click of link panel becomes visible.  On click of button makes ajax call that returns a value that i use to populate the label.  Everything works but after the ajax call, i see it populate my label but then the panel becomes hidden again and my label value is gone.  What am I missing?


$(document).ready(function () {

            var zip = $("#edtzipcode");
            $("#changelocation").click(function () {
                $(".panel").slideToggle("slow");
            });

            $("#cmdgo").click(function (event) {
                var bool = validateZip(zip);
                if (bool) {
                    OnLookup();
                }
                else {
                    alert("Zip Code is Invalid");
                    return false;
                }
            });

            function validateZip(obj) {
                var regexp = /^([0-9a-zA-Z])+$/;
                if (!(regexp.test(obj.val()))) {
                    return false;
                } else {
                    return true;
                }
            }

            function OnLookup() {
                $.ajax({
                    type: "POST",
                    url: "http://<%=HttpContext.Current.Request.Url.Host%>/services/LocationService.asmx/ChangeLocation",
                    data: "{zipcode : '" +$('#edtzipcode').val()+"'}",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function OnLookupComplete(result) {
                        data = result.d;
                        $("#curlocation").text(data.City + "," + data.State);
                        $("#edtzipcode").val("");
                    },
                });
            }

        });
0
Comment
Question by:ikeyser
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 3

Assisted Solution

by:VeganBen
VeganBen earned 500 total points
ID: 33711638
Hard to know exactly without seeing the whole page.

As the success function takes the event as a parameter, though, you might want to cancel the event. This might help.
Oh, and you don't need to name the function either, so your success function can look like this:


success: function (result) {
    data = result.d;
    $("#curlocation").text(data.City + "," + data.State);
    $("#edtzipcode").val("");
    return false;
},

Open in new window

0
 

Accepted Solution

by:
ikeyser earned 0 total points
ID: 33711704
I found the resolution, my button did not have a button type so it was always submitting the form on click.  I changed the button type to button and my code works.
0
 
LVL 3

Expert Comment

by:VeganBen
ID: 33711779
yeah. You were submitting the form.
"return false" stops that from happening.
Don't mention it.
0
 
LVL 3

Expert Comment

by:VeganBen
ID: 33712896
very decent of you.
Sorry for reopening it. I was having a bad day :)
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

697 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question