Javascript 从<；脚本>；标记至Odoo 12中的t-esc标记

我试图得到奥多一个位置的当前坐标。我从下面的代码中获得了经度和纬度警报：

<button onclick="getLocation()">Try It</button>

                            <p id="demo"></p>

                            <script>
                                var x = document.getElementById("demo");

                                function getLocation() {
                                if (navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(showPosition);
                                } else {
                                x.innerHTML = "Geolocation is not supported by this browser.";
                                }
                                }
                                function showPosition(position) {
                                x.innerHTML = "Latitude: " + position.coords.latitude +
                                "Longitude: " + position.coords.longitude;
                                }
                            </script>

试试看

var x=document.getElementById（“演示”）；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
x、 innerHTML=“纬度：”+position.coords.Latitude+
“经度：”+position.coords.Longitude；
}

但是我们如何在我的Odoo字段中分别获得这些坐标，即gps坐标纬度和gps坐标经度？这是我在Odoo中的模板文件：

<template id="create_case" name="Create Case">
    <t t-call="website.layout">
        <div class="container">
            <script>
                var x = document.getElementById("demo");

                function getLocation() {
                if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
                } else {
                x.innerHTML = "Geolocation is not supported by this browser.";
                }
                }

                function showPosition(position) {
                var lati = position.coords.latitude; <t t-esc="gps_coordinates_latitude"/>
                alert(position.coords.longitude);
                x.innerHTML = "Latitude: " + position.coords.latitude +
                "Longitude: " + position.coords.longitude;
                alert(position.coords.latitude);
                }
            </script>

            <h1 class="text-center mt16 mb16">Create Case</h1>
            <p>Click the button to get your coordinates.</p>
            <button onclick="getLocation()">Try It</button>
            <p id="demo"></p>
            <form action="/mycase/process" method="POST" class="form-horizontal mt32" enctype="multipart/form-data">
                <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
                <div t-attf-class="form-group #{error and 'case_title' in error and 'has-error' or ''}">
                    <label class="control-label" for="case_title">Case Title</label>
                    <input type="text" class="form-control" name="case_title" required="True"
                           t-attf-value="#{case_title or ''}"/>
                </div>
                <div t-attf-class="form-group #{error and 'case_description' in error and 'has-error' or ''}">
                    <label class="control-label" for="case_description">Case Description</label>
                    <input type="text" class="form-control" name="case_description" required="True"
                           t-attf-value="#{case_description or ''}"/>
                </div>
                <div t-attf-class="form-group #{error and 'case_type' in error and 'has-error' or ''}">
                    <label class="control-label" for="case_type">Case Type</label>
                    <select class="form-control" id="case_type" name="case_type" required="True">
                        <t t-foreach="case_type" t-as="case_type">
                            <option t-attf-value="#{case_type.id}">
                                <t t-esc="case_type.name"/>
                            </option>
                        </t>
                    </select>
                </div>
                <div t-attf-class="form-group #{error and 'project' in error and 'has-error' or ''}">
                    <label class="control-label" for="project_name">Projects</label>
                    <select class="form-control" name="project_name" required="True">
                        <t t-foreach="projects" t-as="project">
                            <option t-attf-value="#{project.id}">
                                <t t-esc="project.name"/>
                            </option>
                        </t>
                    </select>
                </div>

                <div>
                    <label class="control-label" for="gps_coordinates_latitude">Latitude</label>
                    <input type="text" class="form-control" name="gps_coordinates_latitude"
                           t-attf-value="#{gps_coordinates_latitude or ''}"/>
                </div>

                <div t-attf-class="form-group #{error and 'case_description' in error and 'has-error' or ''}">
                    <label class="control-label" for="gps_coordinates_longitude">Longitude</label>
                    <input type="text" class="form-control" name="gps_coordinates_longitude" required="True"
                           t-attf-value="#{gps_coordinates_longitude or ''}"/>
                </div>

                <div t-attf-class="form-group #{error and 'ratings' in error and 'has-error' or ''}">
                    <label class="col-form-label" for="ratings">Ratings</label>
                    <select class="form-control o_website_form_input" name="ratings" required="false"
                            widget="priority">
                        <option value="normal">Normal</option>
                        <option value="good">Good</option>
                        <option value="very_good">Very Good</option>
                        <option value="excellent">Excellent</option>
                    </select>
                </div>
                <div t-attf-class="form-group #{error and 'attachment' in error and 'has-error' or ''}">
                    <label class="col-form-label" for="attachment">Attachments</label>
                    <input id='attachment' type="file" class="form-control o_website_form_input"
                           name="attachment" multiple="true" data-show-preview="true"/>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-lg">Submit Case</button>
                </div>
                <div class="oe_chatter">
                    <field name="message_follower_ids" widget="mail_followers"/>
                    <field name="message_ids" widget="mail_thread"/>
                </div>
            </form>
        </div>
    </t>
</template>

var x=document.getElementById（“演示”）；
函数getLocation（）{
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（showPosition）；
}否则{
x、 innerHTML=“此浏览器不支持地理位置。”；
}
}
功能显示位置（位置）{
var lati=位置坐标纬度；
警报（位置坐标经度）；
x、 innerHTML=“纬度：”+position.coords.Latitude+
“经度：”+position.coords.Longitude；
警报（位置坐标纬度）；
}
创建案例
单击按钮获取您的坐标

试试看

案例标题
案例描述
案例类型
项目
纬度
经度
评级
正常的
好
很好
杰出的
附件
提交案件

直接在js上获取值后，无需使用t-esc

您应该修改js并将值分配给输入字段

gps\u坐标\u纬度

和

gps\u坐标\u经度

，类似于

document.getElementsByName("gps_coordinates_latitude")[0].value = position.coords.latitude;
document.getElementsByName("gps_coordinates_longitude")[0].value = position.coords.longitude;

---

希望这能解决你的问题

您好@atul，非常感谢您的及时回复。我已经尝试过你的解决方案，但对我无效。或者我们需要补充什么？@GautamBothra，把你的标签放在下面。它应该能用。@GautamBothra，检查这把小提琴>好的，谢谢。。。现在它开始工作了。我必须使用“getElementById”而不是getElementsByName，因为我的脚本中有多个名称。所以我认为这就是它不起作用的原因。