New to jQuery – having trouble finding out why an AJAX script works fine on one page, but not on another

huangapple go评论77阅读模式
英文:

New to jQuery - having trouble finding out why an AJAX script works fine on one page, but not on another

问题

I'm here to provide the translation. Please note that I will only translate the non-code parts.


我对jQuery还很陌生,所以我怀疑我可能漏掉了一些简单的东西... 我有两个页面,都使用相同的脚本。

这是它:

$(document).ready(function() {;
    var url = document.getElementById("page_url");
    url.value = location.href;

    $('#my-form-button').on('click', function() {
        var url = $('#page_url').val();
        var phone_number= $('#phone_number').val();
        var email_id= $('#email_id').val();
        var message= $('#message').val();
        var title = $('title').text();

        //通过ajax发送到formspree
        $.ajax({
            url:'https://formspree.io/f/xpzezajg',
            method:'POST',
            data:{            
                email: email_id,
                phone: phone_number,
                message: message,
                url: url,
                title: title,
            },
            dataType:"json",
            success:function() {
                alert('您的邮件已发送!');               
            }   
        });     
    });
});

所以它实际上只是发送一个AJAX表单,开头有一个小部分来记录URL以便通过AJAX发送。在这里它在页面上运行正常:链接到页面

但在另一个页面,在控制台中出现以下错误:

未捕获的TypeError: 无法设置空值的属性('value')
    at HTMLDocument.<anonymous> (mac-studio-m1-max-10-core-cpu-24-core-gpu-32gb-512ssd-details.html:1333:19)
    at c (jquery-1.10.2.min.js:4:26036)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4:26840)
    at Function.ready (jquery-1.10.2.min.js:4:3305)
    at HTMLDocument.q (jquery-1.10.2.min.js:4:717)

在过去,我曾在尝试在DOM加载之前加载脚本时(例如将其放在头部)或在jQuery之前加载它时,或者使用了错误版本的jQuery时遇到过这些问题。但是这个脚本直接放在 </body> 标签的上方,就像另一个页面上一样,它使用相同的jQuery文件(1.1.0),即使页面上加载了另一个版本的jQuery(就像另一个页面一样)。

明确一下,这个AJAX表单似乎仍然可以工作,但是存储页面URL和标题的部分,分别存储在名为 'url' 和 'title' 的变量中,似乎是引起问题的原因。

我对此感到困惑,我期望脚本的执行方式会相同,尤其是其中这样一个相当简单的部分。是什么可能导致这个问题呢?

英文:

I'm new to jQuery so I suspect I'm missing something simple.. I have two pages, both using the same script.

Here it is:

$(document).ready(function() {;
    var url = document.getElementById(&quot;page_url&quot;);
    url.value = location.href;


    $(&#39;#my-form-button&#39;).on(&#39;click&#39;, function() {
        var url = $(&#39;#page_url&#39;).val();
        var phone_number= $(&#39;#phone_number&#39;).val();
        var email_id= $(&#39;#email_id&#39;).val();
        var message= $(&#39;#message&#39;).val();
        var title = $(&#39;title&#39;).text();

        //send to formspree via ajax
        $.ajax({
            url:&#39;https://formspree.io/f/xpzezajg&#39;,
            method:&#39;POST&#39;,
            data:{            
                email: email_id,
                phone: phone_number,
                message: message,
                url: url,
                title: title,
            },
            dataType:&quot;json&quot;,
            success:function() {
                alert(&#39;your mail has been sent!&#39;);               
            }   

        });     

    });

});

So all it's really doing is sending an AJAX form, with a small part in the beginning to record the URL to also send via AJAX. Here it is on the page working fine: https://store.melrosemac.com/iodyne-pro-data-48tb-details.html

But on another page, it's throwing an error in console like this:

Uncaught TypeError: Cannot set properties of null (setting &#39;value&#39;)
    at HTMLDocument.&lt;anonymous&gt; (mac-studio-m1-max-10-core-cpu-24-core-gpu-32gb-512ssd-details.html:1333:19)
    at c (jquery-1.10.2.min.js:4:26036)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.min.js:4:26840)
    at Function.ready (jquery-1.10.2.min.js:4:3305)
    at HTMLDocument.q (jquery-1.10.2.min.js:4:717)

In the past I've seen these issues when I was trying to load the script before the DOM had loaded (like by putting it in the head) or before jQuery is, or if the wrong version of jQuery is being used. But this script is directly above the &lt;/body&gt; just like on the other page, it's using the same jQuery file (1.1.0) even though there is another version of jQuery loaded on the page (just like the other page).

To be clear, this AJAX form still seems to work, but the part that stores the page URL and title in vars called 'url' & 'title' seems to be causing the issue.

I'm confused by this, I expected the script would perform the same way, especially a pretty simple part of it like this. What could cause this?

答案1

得分: 1

错误提示你代码的第1333行发生了一些问题。
当你在那里设置了调试器,它会告诉你 document.getElementById("page_url") 返回了空值,因此你无法设置它的值。

要点:你的网页中没有具有id page_url 的元素。

英文:

Error is telling you that something is going on on the 1333 line of code.
When you put the debugger there it will show you that your document.getElementById(&quot;page_url&quot;) is returning null, thus you cant set its value.

Gist: your webpage does not have element with id page_url

huangapple
  • 本文由 发表于 2023年1月6日 10:34:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/75026387.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定