文本交换后保存文本 - javascript

我正在创建运输状态报告以及我要完成的工作,我似乎无法弄清楚。在我的报告表中,我有一个按钮,它显示“标记为已发货”。如果我单击该按钮,它会变成“ Shipped”。对我来说,这将是一种简单的报告方法。

我正在像这样进行文本交换...

<script>
//Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
$("button").on("click", function(e) {
    e.preventDefault()
    var el = $(this);
    el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});
</script>

我必须添加

e.preventDefault()

进入代码,因为单击按钮后页面将重新加载。

我与此有关的问题之一是不允许我回到原来的状态。我尝试将e.preventDefault()移到该代码的底部,但这没有帮助。

现在,我的问题的主要部分是我希望能够在选择它之后将其保存。我不确定是否要抓紧我正在做的事情,将其保存在数据库中,还是可以用现有代码来完成它……我当然需要将其保存一次。

最后一件事。我不确定如何只按一个按钮就可以做到这一点。我知道如何用php来做,但是我对JS很陌生。

当我选择“标记为已发货”时,我希望将d-t -y的时间戳记和时间添加到我的td行中。这可能与JS有关吗?

我正在寻找可以完成所有这些工作的方式。我四处张望,似乎找不到与我想要的东西相似的东西。

有任何想法吗?

更新

我按照说明将它们全部添加到了相同的脚本中。现在我的按钮甚至都没有改变,什么也没有发送到数据库。

<script>
$.ajax({
    url: "shippingStatusSend.php",
    data: {action: "Shipped", order: order_id},
    type: "POST",
    dataType: "text"
}).done(function(r){
    //Do your code for changing the button here.
    //Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
$("button").on("click", function(e) {
    e.preventDefault()
    var el = $(this);
    el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    : el.text(el.data("text-swap"));
});
});

</script>

PHP页面称为shippingStatusSend.php

我刚刚开始学习如何做准备好的语句,所以这可能也是一个问题。

<?php
//connection to db
$con = mysqli_connect("localhost", "root", "", "bfb"); 

//Check for errors  
if (mysqli_connect_errno()) {
    printf ("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
    $order_id = trim($_POST['order_id'] );
    $status = trim($_POST['action'] );

/* create a prepared statement */
if ($stmt = mysqli_prepare($con, "INSERT INTO shippingStatus (order_id, status, date_Shipped) VALUES (?, ?, NOW())")) {

/* bind parameters for markers */
            $stmt->bind_param('is', $order_id, $status);

            /* execute query */
            $stmt->execute();


        /* close statement */
        mysqli_stmt_close($stmt);
            }
 ?>     

参考方案

为了使JavaScript更改静态化,您需要使用一些服务器端,例如使用PHP将更改存储在数据库中。

为此,您需要使用AJAX,这对于jQuery很简单:

$.ajax({
    url: "example.php",
    data: {action: "Shipped", order: orderID},
    type: "POST",
    dataType: "text"
}).done(function(r){
    //Do your code for changing the button here.
});

example.php更改为将用于更改服务器端的PHP脚本,并确保您传递要更改的订单的orderID。在PHP文件中,您可以访问$_POST['action']$_POST['order']来从JavaScript中获取信息。

然后在done部分(在AJAX完成后调用)中,您可以更新按钮。为了安全起见,您还可以在其中进行一些错误检查。 r变量可用于PHP文件中的任何响应数据(例如,如果您在PHP中回显“ Done”,则r将等于“ Done”)。

编辑

根据您更新的问题/代码,您的问题是页面加载时正在创建AJAX调用,而不是单击按钮。更改为:

$("button").on("click", function(e) {
    e.preventDefault();
    var el = $(this);
    $.ajax({
        url: "shippingStatusSend.php",
        data: {action: "Shipped", order: order_id},
        type: "POST",
        dataType: "text"
    }).fail(function(e,t,m){
        console.log(e,t,m); 
    }).done(function(r){
        //Do your code for changing the button here.
        //Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
        el.text() == el.data("text-swap") 
        ? el.text(el.data("text-original")) 
        : el.text(el.data("text-swap"));
    });
});

更新资料
要获取order_id,您需要将其存储在DOM中的某个位置。根据您的评论,您可以在:

<td class="tdproduct"><?php echo $row['order_id']; ?> </td>

所以像:

var order_id = $('.tdproduct').text();

将获得ID,但前提是该类只有一个元素。否则,您将不得不存储其他一些独特元素以进行抓取。

节省重装

将值保存在数据库中后,需要让PHP在页面加载时呈现它。而不是让静态html说Mark as Shipped,而是使用PHP echoprint从数据库输出信息。

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量:我的问题是在javascript代码中使用for循环,for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码: {% block extra_javascript %} <script src="/static/js…

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做?。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数:function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …

变更事件时道具无法正常工作 - javascript

我有一些代码,当用户从下拉列表中选择一个项目时,这会触发一个change事件,然后调用php页面进行处理。首次加载页面时,我选择一个项目,并在触发change事件时,这应更改所选select输入的占位符并禁用相同的输入:“#box_ffrtv”。但是,发生的事情是更改仅在我在下拉菜单中进行了第二选择之后才发生,然后更改了占位符并禁用了输入。我对jquery还…

使用Selenium和python在textBox中快速编写 - javascript

我正在使用Selenium和Python(Chorme驱动程序)在文本框中编写内容,但是有很多文本框,我需要它来更快地填充它们。我使用一系列driver.find_element_by_xpath("//input[@class='string required' and @id='order_billing_name…