Nedostávají hodnoty z Select Fields s jQuery

hlasů
2

Snažím se realizovat některé základní Ajax funkčnost webových stránek jsem vytvářet. Jsem pomocí microframework baňky a jQuery, jak toho dosáhnout. Mám bohaté zkušenosti s python, co baňky je napsán v, ale jen velmi málo s javascriptem. To by byl důvod, proč jsem se rozhodl použít jQuery. ) Tam je pěkný příklad je součástí dokumentace Flask které jsem neměl žádné problémy dostat práci, ale když jsem použil metodu v příkladu na mém kódu jsem se rozběhl do problémů dostat jQuery správně naplnit řetězec dotazu. V podstatě analyzuje některé z mých formulářových prvků, ale ne všechny.

My HTML forma vypadá takto:

<form action method=GET class=span-11 inline> 
    <fieldset> 

    <div class='span-5'> 
    <label for=msat_size>Msat Size:</label> 
    </div> 

    <div class='span-5 last'> 
    <select id=msat_size name=msat_size><option value=mono>Mono</option><option value=di>Di</option><option value=tri>Tri</option></select> 
    </div> 

    <div class='span-5'> 
    <label for=msat_length>Msat Length:</label> 
    </div> 
    <div class='span-5 last'> 
    <input class=text id=msat_length maxlength=3 name=msat_length size=3 style=width:48px type=text value=0 /> 
    </div> 

    <div class='span-5'> 
    <label for=msat_perfect>Perfect Msats:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id=msat_perfect name=msat_perfect type=checkbox value=y /> 
    </div> 

    <div class='span-5'> 
    <label for=combine_loci>Combine Microsatellites:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id=combine_loci name=combine_loci type=checkbox value=y /> 
    </div> 

    <div class='span-5'> 
    <label for=design_primers>Design Primers:</label> 
    </div> 
    <div class='span-5 last'> 
    <input id=design_primers name=design_primers type=checkbox value=y /> 
    </div> 

    <div class='span-5'> 
    <label for=tag_primers>Tag Primers:</label> 
    </div> 
    <div class='span-5 last'> 
    <select id=tag_primers name=tag_primers><option selected=selected value=None>No Tag</option><option value=cag>CAG Tag</option><option value=m13>M13R Tag</option></select> 
    </div> 

    <div class='span-5 prepend-5 last'> 
            <button id=submit_msats name=submit_msats type=submit value=submit_msats class=button positive> 
                <img src=/static/css/plugins/buttons/icons/tick.png alt=/> Submit
            </button> 
    </div> 
    </fieldset> 
</form>    

Můj javascript vypadá takto:

<script type=text/javascript>
  $(function() {
    $('.button').bind('click', function() {
      $.getJSON('/query_result', {
        msat_size: $('input[id=msat_size]').val(),
        msat_length: $('input[name=msat_length]').val(),
        msat_perfect: $('input[name=msat_perfect]').val(),
        combine_loci: $('input[name=combine_loci]').val(),
        design_primers: $('input[name=design_primers]').val(),
        tag_primers: $('input[name=tag_primers]').val(),
        }, function(data) {
        $(#stat1).text(data.msat_size),
        $(#stat2).text(data.msat_length);
      });
      return false;
    });
  });
</script>

Ale poté, co jsem se podat můj řetězec dotazu vypadá takto:

/query_result?msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y

Mohu získat hodnotu ‚msat_length‘ správně změnit, nikdo z ostatních. Když změním .val () pro .Text () v ‚msat_size‘ řádku v javascriptu, bude název se objeví v řetězci dotazu, ale bez hodnoty

/query_result?msat_size=&msat_length=0&msat_perfect=y&combine_loci=y&design_primers=y

Jakékoli myšlenky na to, jak opravit to by bylo velmi ocenil. Dík!

Položena 14/10/2010 v 15:50
zdroj uživatelem
V jiných jazycích...                            


3 odpovědí

hlasů
0

Zkuste to

  $(function() {

    $('#submit_msats').bind('click', function(ev) {

      ev.stopPropagation();

      var context = $('form'),
          sendData =  {
            msat_size: $('#msat_size', context).val(),
            msat_length: $('#msat_length', context).val(),
            msat_perfect: $('#msat_perfect', context).val(),
            combine_loci: $('#combine_loci', context).val(),
            design_primers: $('#design_primers', context).val(),
            tag_primers: $('#tag_primers', context).val()
          };

      alert(sendData.msat_length);

      $.getJSON('/query_result', sendData, function(data) {

        $("#stat1").text(data.msat_size),
        $("#stat2").text(data.msat_length);

      });

      return false;
    });
  });
Odpovězeno 14/10/2010 v 16:16
zdroj uživatelem

hlasů
3

Místo toho, aby dělal všechnu tu složitou práci, měli byste se pokusit s využitím jQuery je .serialize()metodou. Zkuste si to takhle:

$(function() {
    $('.button').bind('click', function() {
        $.getJSON('/query_result?' + $(this).closest('form').serialize(), function(data) {
            $("#stat1").text(data.msat_size), $("#stat2").text(data.msat_length);
        });
        return false;
    });
});

Zde je dokumentace k .serialize()metodě: http://api.jquery.com/serialize/

A demo ji ukazuje v akci: http://jsfiddle.net/Ender/q3mdw/

Odpovězeno 14/10/2010 v 16:23
zdroj uživatelem

hlasů
2

Ponecháme-li stranou problémy svého přístupu k serializaci, bezprostřední příčinou tohoto problému je, že jste misidentifying některé ze svých formulářových prvků:

msat_size: $('select#msat_size').val(), // select, not input
msat_length: $('input#msat_length').val(), // bracket notation unnecessary
msat_perfect: $('input#msat_perfect:checked').val(), // using ID is better
combine_loci: $('input#combine_loci:checked').val(), // use :checked
design_primers: $('input#design_primers:checked').val(),
tag_primers: $('select#tag_primers').val() // select, not input

To předpokládá, že si jen chcete políčko hodnoty v případě, že jsou kontrolovány. Samozřejmě můžete přidat podmíněné logiku vynechat políčka v případě, že jsou pod kontrolou, nebo zadat výchozí hodnotu.

Odpovězeno 14/10/2010 v 16:30
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more