Solved

Populate Lable with jQuery

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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-…
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…

707 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

18 Experts available now in Live!

Get 1:1 Help Now