?
Solved

Populate Lable with jQuery

Posted on 2010-09-19
5
Medium Priority
?
425 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

764 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