2014-12-21 3 views
-5

У меня есть, вероятно, небольшая проблема, но почему-то не могу ее исправить, так как я сижу здесь с 2 часов без исправления.JQuery val(), text() и html() все возвращают пустую строку

Я написал небольшой вспомогательный инструмент с картами google, используя node.js express on serverside, javascript/jQuery на clientide и jade в качестве механизма HTML-шаблона. Я хотел динамически корректировать радиус GPS вокруг моих карт-карт-контактов через пользовательский ввод, но я всегда получаю пустую строку в качестве возврата.

HTML:

<form id="formTrackedBus" action="/trackBus" method="post" name="trackedBus"> 
    <input id="asdf" type="text" placeholder="Type in radius around the bus"> 
    <button id="btnSubmit" onclick="getRadius()" value="submit" type="submit">submit</button> 

Часть JQuery, где getRadius(); вызывается выглядит так:

$(document).ready(function() {  
    $(function getRadius(){ 
     var radius = $('#asdf').val(); 
     alert("Radius: "+radius); 
    }); 
... 
}); 

ли enybody вижу проблемы в этом? .text() и .html() также возвращают пустую строку. Я действительно не получаю ошибку, я уже переименовал id в «ASDF», чтобы быть уверенной, что это не продублируйте идентификатор ...

Более явно:

Я обращение с Google-карт -материал внутри моего $(document).ready -block. Там мне нужен радиус через пользовательский ввод, чтобы динамически изменять радиус моего маркера.

Я попробовал его с глобальной переменной в первом, который выглядел как этот

var radius; 
function getRadius() { 
    radius = document.getElementById('asdf'); 
    alert(radius.value); 
} 

Это работало отлично. Но когда я попытался использовать этот глобальный радиус внутри мой $(document).ready -блока, он не работает, так как он вернулся неопределенной каждый раз:

var radius; 
function getRadius() { 
    radius = document.getElementById('asdf'); 
    alert(radius.value); 
} 

$(document).ready(function() { 

$(function initialize() { 
    var mapOptions = { 
     // center Aachen at the map 
     center: new google.maps.LatLng(50.7753455, 6.083886799999959), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('googleMap'), mapOptions); 

    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

// doesn't look nice, but using setInterval(addMarker(), 5000); didn't work 
// since curiously this way addMarker was just fired once... 
setInterval(function addMarker() { 

    var newLat = 0; 
    var newLang = 0; 


// jQuery AJAX call for JSON 
     $.getJSON('/busdata/busCoordinates', function (data) {$.each(data, function() { 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(this.latitude, this.longitude), 
       title: 'MarkerNo: '+pollingRound+'\n'+ 
        'VehicleID: '+this.vehicleID.toString()+'\n'+ 
        'Update Time:'+this.time 
      }); 
      var busRadius; 
      var circleOptions = { 
       strokeColor: "FF0000", 
       strokeOpacity: 0.5, 
       strokeWeight: 2, 
       fillColor: "#FF0000", 
       fillOpacity: 0.35, 
       map: map, 
       center: new google.maps.LatLng(this.latitude, this.longitude), 
       radius: radius 
      }; 
    }; 

Так как же я смог получить эту var radius в моем circleOptions?

+1

поэтому после ввода какого-либо текста в asdf-входе и затем нажмите кнопку, вы получите пустое значение? –

+1

Вероятно, это не связано с вашей проблемой, но вам не нужно обертывать $ (обратный вызов) внутри $ (document) .ready(). Либо один будет запускать только код на DOMContentReady. И в этом случае ни один из них не должен использоваться; этот код никогда не будет вызываться до того, как DOM будет готов. –

+4

Как только вы удалите определение функции из 'document.ready' и удалите внешний вызов jQuery' $ (...) ', он отлично работает: http://jsfiddle.net/c6Lxom8w/ –

ответ

0

Я нашел решение. Проблема заключалась не в самом коде, а в программном потоке. Каждый раз, когда я нажимаю кнопку «Отправить», я перезагружаю index.js, поэтому мой глобальный var radius снова перезаписал свое значение по умолчанию, так как моя страница перезагрузилась. Поэтому getRadius() был вызван и фактически сделал перезаписать глобальный val radius но до того перезагрузки страницы снова и поэтому radius были перезаписаны впоследствии снова со значением по умолчанию.

Спасибо за помощь!

Смежные вопросы