jQuery .val()仅在Chrome中返回null“finally”

时间:2012-07-13 17:29:49

标签: jquery google-chrome

更新2012/07/17: 它不仅仅是“current_width”和“current_height”字段被清除 - 它是整个表单。在视觉上,浏览器中的表单仍然包含值,但jQuery“chokes”或其他东西 - 并突然开始将表单中的所有字段读为null。

这不仅仅是.val()的问题,因为我已经通过在preview()函数中使用.children()和.each()来验证它:

var debugstring = '';
var debugform = $('#hidden_thumb_fields').children("input").each(function (){
    var child = $(this);
    debugstring += child.attr('id')+':'+child.val()+',';
});

console.log(debugstring);

和以前一样,它可以正常拖动选择区域,但很快就会开始返回null。

提醒您这只发生在Chrome中。


原始邮寄: (编辑:删除了mlx日志输出)

情景:

  1. 上传的图片宽度& height写入2个表单字段:current_width和current_height
  2. imgAreaSelect已启用上传图片
  3. imgAreaSelect的onInit和onSelectChange调用函数“预览”
  4. “preview”使用.val()
  5. 读取宽度和高度表单字段的值
  6. 当您移动选择区域时,会反复调用“预览”
  7. 最终,.val()开始返回NULL,即使字段仍然明显包含正确的值且尚未修改。这只发生在Chrome中。 Firefox和Safari都能很好地工作。 IE尚未经过测试。
  8. 如果我使用普通的Javascript(document.getElementById()。value),则没有任何问题。
  9. 正如经常引用的那样,我在$(文件).ready之后调用imgAreaSelect。之前唯一做的就是设置3个变量,我已将其包含在下面的预览示例中。

    另一方面,如果有更好或更可接受的方式来获取图像的宽度和高度数据,我都是耳朵。图像上传脚本(PHP)首先设置这些字段,根据我的经验水平,我不确定是否有更好的方法。我想要图像的真实尺寸,而不是.css的宽度和高度,因为它们可能(在我的场景中,通常是)不同。

    问题似乎来自的特定代码位于预览功能的开头:

    function preview(img, selection) { 
        var current_width = $('#thumbnail_form').find('#current_width').val();
        var current_height = $('#thumbnail_form').find('#current_height').val();
    

    这是预览()。如果我删除.find()并直接使用$('#current_width')。val(),问题仍然存在:

    var thumb_width=128;
    var thumb_height=128;
    var counter=1;
    
    function preview(img, selection) { 
        var current_width = $('#thumbnail_form').find('#current_width').val();
        var current_height = $('#thumbnail_form').find('#current_height').val();
    
        //var current_width = document.getElementById("current_width").value;
        //var current_height = document.getElementById("current_height").value;
    
        var scaleX = thumb_width / selection.width; 
        var scaleY = thumb_height / selection.height; 
    
        var img_css_width = Math.round(scaleX * current_width) + 'px';
        var img_css_height = Math.round(scaleY * current_height) + 'px';
        var img_css_margin_left = '-' + Math.round(scaleX * selection.x1) + 'px';
        var img_css_margin_top = '-' + Math.round(scaleY * selection.y1) + 'px';
    
        // mlx and the css fields are just to help diagnose the problem
        var mlx = document.getElementById('mlx').value;
        if (!current_width) {
            current_width = 'NULL';
        }
        if (!current_height) {
            current_height = 'NULL';
        }
        $('#mlx').val(mlx+counter+")w:"+current_width+",h:"+current_height+"\n");
        $('#img_css_width').val(img_css_width);
        $('#img_css_height').val(img_css_height);
        $('#img_css_margin_left').val(img_css_margin_left);
        $('#img_css_margin_top').val(img_css_margin_top);
    
        $('#displayed_icon_container').find('#displayed_icon').css({
        //$('#displayed_icon').css({
            width:  img_css_width,
            height: img_css_height,
            marginLeft: img_css_margin_left,
            marginTop: img_css_margin_top 
        });
        $('#x1').val(selection.x1);
        $('#y1').val(selection.y1);
        $('#x2').val(selection.x2);
        $('#y2').val(selection.y2);
        $('#w').val(selection.width);
        $('#h').val(selection.height);
    
        // if I re-write these values back to the form, I can circumvent the issue, but why is this necessary?      
        //$('#current_width').val(current_width);
        //$('#current_height').val(current_height);
        $('#sx').val(scaleX);
        $('#sy').val(scaleY);
        counter++;
    }
    

    这是HTML的相关字段。我不相信文件的其余部分是相关的,但如果要求,我很乐意发布更多文件。

    <div id='thumbnail_form'>
    <form name='form' action='' method='post'>
    <div id='hidden_thumb_fields'>
    x1: <input type='text' name='x1' value='' id='x1' /><br />
    y1: <input type='text' name='y1' value='' id='y1' /><br />
    x2: <input type='text' name='x2' value='' id='x2' /><br />
    y2: <input type='text' name='y2' value='' id='y2' /><br />
    Selection Width (w): <input type='text' name='w' value='' id='w' /><br />
    Selection Height (h): <input type='text' name='h' value='' id='h' /><br />
    
    Old Icon Display URL: <input type='text' name='old_icon_display_URL' value='/whatever/thing.png' id='old_icon_display_URL' /><br />
    
    Large File Width (current_width): <input type='text' name='current_width' value='' id='current_width' /><br />
    Large File Height (current_height): <input type='text' name='current_height' value='' id='current_height' /><br />
    Img Display Width: <input type='text' name='img_width' value='' id='img_width' /><br />
    Img Display Height: <input type='text' name='img_height' value='' id='img_height' /><br />
    
    Img CSS Width: <input type='text' name='img_css_width' value='' id='img_css_width' /><br />
    Img CSS Height: <input type='text' name='img_css_height' value='' id='img_css_height' /><br />
    Img CSS Margin Left: <input type='text' name='img_css_margin_left' value='' id='img_css_margin_left' /><br />
    Img CSS Margin Top: <input type='text' name='img_css_margin_top' value='' id='img_css_margin_top' /><br />
    
    scalex: <input type='text' name='sx' value='' id='sx' /><br />
    scaley: <input type='text' name='sy' value='' id='sy' /><br />
    Math Log X: <textarea name='mlx' value='' id='mlx' cols='40' rows='10'></textarea><br />
    
    Icon Basedir: <input type='text' name='icon_basedir' value='' id='icon_basedir' /><br />
    Icon BaseURL: <input type='text' name='icon_baseURL' value='' id='icon_baseURL' /><br />
    Icon Relpath: <input type='text' name='icon_relpath' value='' id='icon_relpath' /><br />
    Large Filename: <input type='text' name='large_image_filename' value='' id='large_image_filename' /><br />
    Thumb Filename: <input type='text' name='thumb_image_filename' value='' id='thumb_image_filename' /><br />
    </div>
    
    <input type='button' name='cancel_thumb' value='Cancel' id='cancel_thumb' />
    <input type='submit' name='save_thumb' value='Crop Image' id='save_thumb' />
    </form>
    </div>
    

3 个答案:

答案 0 :(得分:0)

抛出console.log(current_height,current_width);他们被设定后。我的猜测是他们返回null,因为你正在通过Id检查在dom中找到多个位置的元素

答案 1 :(得分:0)

好吧,也许我不明白你的问题所以如果我错了就纠正我:

现在,您发布的代码在其他代码允许在屏幕上移动“预览”选择器后开始调用。

当调用此代码时,似乎在调用此代码之前,在其他javascript填充的两个字段中开始看到null。

这是对的吗?

如果是这样,那么问题可能在于填充这些字段的其他代码。除了下面的注释之外,我没有看到此代码有任何明显的问题,更仔细地阅读代码显示的只是您尝试调试问题的代码。


这可能导致溢出:

$('#mlx').val(mlx+counter+")w:"+current_width+",h:"+current_height+"\n");

更改此行后会发生什么:

<textarea name='mlx' value='' id='mlx' cols='40' rows='10'></textarea><br />

到此:

<textarea name='mlx' value='' id='mlx' cols='40' rows='200'></textarea><br />

因为26 * 14约等于40 * 10.

答案 2 :(得分:0)

此问题是由Firebug Lite extension for Chrome引起的。 Firebug Lite面板是否打开以及是否将输出记录到控制台时出现问题。现在我知道在Incognito中测试一下。我感谢每个人的时间并为虚惊而道歉......