Solved

Populate Lable with jQuery

Posted on 2010-09-19
5
415 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

867 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now