[RESOLVED]ASP.Net Webforms with VB – about jQuery

As I came from desktop, I don’t have a good javascript knowledge. But I’m about to start with Web Development, so I made some little experiments.

At this point, I’ve a client-side code as the bellow.
These code lines are to populate, based on webmethods, two "<select>" elements, and they are already working as I planned. But I can have several webforms
in same application that could need the same code, and I think that a simple "copy & paste" is not the right way.

So my question is:

How can I transform this code into a code generic enough that it can be in a script file isolated and thus be shared by multiple webforms ?


Thank you!

$(document).ready(function () {
            $("#cidade").get(0).options.length = 0;
            $("#cidade").get(0).options[0] = new Option(" selecione a UF ", "-1");
            $("#uf").get(0).options.length = 0;
            $("#uf").get(0).options[0] = new Option(" A G U A R D E... ", "-1");

            $.ajax({
                type: "POST",
                url: "/Svcs/imoGeo.asmx/UFListJson",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#uf").get(0).options.length = 0;
                    $("#uf").get(0).options[0] = new Option("[Selecione]", "-1");
                    var ufs = eval('(' + data.d + ')');
                    for (var i = 0; i < ufs.length; i++) {
                        var d = ufs[i].Sigla;
                        var v = ufs[i].UFID;
                        var o = new Option(d, v)
                        $("#uf").get(0).options[$("#uf").get(0).options.length] = o;
                    }
                },
                error: function () {
                    alert("Falha ao carregar a lista de UFs.");
                }
            });
            
            $("#uf").change(function () {
                var tx = $("#uf").text();
                if (tx != " A G U A R D E... " || tx != "[Selecione]") {
                    $("#cidade").get(0).options.length = 0;
                    $("#cidade").get(0).options[0] = new Option(" aguarde... ", "-1");
                    $.ajax({
                        type: "POST",
                        url: "/Svcs/imoGeo.asmx/MunicipiosDaSiglaJson",
                        data: "{'ufSigla' : '" + tx + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            $("#cidade").get(0).options.length = 0;
                            $("#cidade").get(0).options[0] = new Option("[Selecione]", "-1");
                            var cds = eval('(' + data.d + ')');
                            for (var i = 0; i < cds.length; i++) {
                                var d = cds[i].Display;
                                var v = cds[i].Value;
                                var o = new Option(d, v)
                                $("#cidade").get(0).options[$("#cidade").get(0).options.length] = o;
                            }
                        },
                        error: function () {
                            alert("Falha ao carregar a lista de UFs.");
                        }
                    });
                };
            });
        });

Hi,

The code uses some of controlIds which look to be specific to a page. So this logic can’t be directly put in a script file. If need to be, all those page specific things to be passed in as input parameters. So essentially you would need to figure out, what
common task can be taken out that can be reusable for your application. This can be mostly depending on how much code can be re-usable based on your business logic. For example, you are calling a webservice, probably not all the pages may use the same service,
or, may be all the pages may reuse the same service – It depends on your business logic.

In short, need to identify what is common to all pages and take that portion out into functions. I would say, it is better to have two-three small functions with each function to do specific task.

Thank you!

Yes, that is true, I’m using the specific controlId since the code is in same page (script tag).
I also created
a parameterized function,
who received
the component name,
but she could
not bind the "change"
event. Apparently,
only by using the "$(document).ready" I can bind
events to components.

If you can indicate some
technical reading
, book, e-book,
tutorial or website
on this subject
, I am very grateful.

You’re welcome. JQuery tutorial is the good to learn and understand about the $ functions.

You may go through this page (and remaining links in this site also, in fact, to learn about Jquery):
http://learn.jquery.com/using-jquery-core/document-ready/

Hope this helps.

Leave a Reply