wp ajax / jquery在插入div内容后不使用表单

时间:2013-05-26 10:41:08

标签: jquery ajax wordpress forms

将表单添加到div后,表单无法正常使用ajax jquery,id不会被发送/发布到jquery函数,因此消息没有内容和接收者ID。

我按下用户按钮:

<jquery-form formmethod='post'>
            <input type="submit" onclick="js_vis_melding_liste(<?php echo $tempid; ?>)" value="<?php echo $userbutton->first_name . ' ' . $userbutton->last_name; ?>"/><br/>
        </jquery-form>

启动js功能:

function js_vis_melding_liste(motid) {
    jQuery.ajax({
        url: my_ajax_script.ajaxurl,
        type: 'POST',
        data: ({action: 'liste_meldinger', mottaid: motid}), //utfører liste_meldinger funksjonen og mulighet for å hente mottaid via $_POST
        success: function(tingting) {
            jQuery('#ham-meldinginnboks').html(tingting); //laster inn resulatet av liste_meldinger funksjonen inn i div
            jQuery('#ikkevalgtmottakerdiv').hide(); //skjulerdiven
            jQuery('#ham-meldinginnboks').show();
            var objDiv = document.getElementById("meldinglisten1"); //denne og neste linje sørger for at scrollbar er nederst
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    });
}
;

使用functions.php中的php函数:

function liste_meldinger() {

    $mottakid = $_POST['mottaid'];
    global $current_user, $wpdb, $valgt_mottaker;
    $mottaker = get_user_by('id', $mottakid);

    $valgt_mottaker = $mottakid;
    $curUserId = get_current_user_id();
    $meldingliste =
            $wpdb->get_results("
        SELECT c.inn AS innh, mottakerid, datom
FROM
(
    SELECT innhold AS inn, datom, mottakerid
    FROM meldinger
    WHERE mottakerid = '$curUserId' and senderid = '$mottakid'

    UNION

    SELECT innhold AS inn, datom, mottakerid
    FROM meldinger
    WHERE senderid = '$curUserId' and mottakerid = '$mottakid'
) AS c
ORDER BY datom ASC", ARRAY_A);
    $sendinfo = "<p>Liste over meldinger mellom deg og $mottaker->first_name $mottaker->last_name.</p><br/>
            <div id='meldinglisten1' style='overflow-y: auto;height: 400px;'>";

    foreach ($meldingliste as $meldinger):

        $melding = $meldinger['innh'];
        $datomo = $meldinger['datom'];
        if ($meldinger['mottakerid'] == $curUserId) {
            $sendinfo .= $datomo . ' - ' . $mottaker->first_name . ' ' . $mottaker->last_name . ' sa:';
        } else {
            $sendinfo .= $datomo . ' - ' . $current_user->first_name . ' ' . $current_user->last_name . ' sa:';
        }


        $sendinfo .= "<div style='border:1px solid #dedede'><p>";
        $sendinfo .= $melding;
        $sendinfo .= "</p>
        </div>
        <br/>";
    endforeach;
    $sendinfo .= '</div>

    <div>
        <jquery-form name="sendersvarform" id="sendersvarform" onsubmit="js_svar_melding();" >
            Skriv ny melding til ' . $mottaker->first_name . ' :<br/>
            <textarea name="meldinginnhold" id="meldinginnhold" rows="3" cols="20"></textarea> <br/>
            <input type="hidden" name="idmot" id="idmot" value="' . $mottakid . '" />
                <input  type="submit" name="submit" id="svarmelding" value="Send Svar"/>
        </jquery-form>
    </div>';

    echo $sendinfo;
    die();
}

它显示消息和回复框,即id = sendersvarform 按回复,它使用js_svar_melding函数:

function js_svar_melding() {
    var arr = jQuery('#sendersvarform').serialize();
    arr += '&action=svar_melding';
    jQuery.ajax({
        url: my_ajax_script.ajaxurl,
        type: 'POST',
        data: arr,
        success: function(mld) {
            alert(mld);
        }
    });
    return false;
}
;

再次使用php函数svar_melding:

function svar_melding() {
    global $wpdb, $current_user;

    $userID = $current_user->ID;
    if (!empty($_POST['idmot']) && !empty($_POST['meldinginnhold'])) {
        $sid = $userID;
        $mid = $_POST['idmot'];
        $mldinnhold = $_POST['meldinginnhold'];

        ham_sendmelding($sid, $mid, $mldinnhold);
        echo "melding sendt.";
    } else {
        echo "Ikke alle feltene er fylt inn.";
    }
    die();
}

似乎$ _POST ['idmot']和$ _POST ['meldinginnhold']是空的,因为如果我不使用if!empty那么它会创建一条消息,但它没有id或内容,它应该已发布信息,但它没有,它重新加载页面回到它不应该因为js_svar_melding中的返回false,请帮助

1 个答案:

答案 0 :(得分:0)

我发现了答案。 使用.on

jQuery("#sendersvarform").on("submit", false);

它将“激活”提交表单#sendersvarform时发生的事件。 在创建表单后激活它。

function js_vis_melding_liste(motid) {
    jQuery.ajax({
        url: my_ajax_script.ajaxurl,
        type: 'POST',
        data: ({action: 'liste_meldinger', mottaid: motid}), //utfører liste_meldinger funksjonen og mulighet for å hente mottaid via $_POST
        success: function(tingting) {
            jQuery('#ham-meldinginnboks').html(tingting); //laster inn resulatet av liste_meldinger funksjonen inn i div
            jQuery('#ikkevalgtmottakerdiv').hide(); //skjuler diven
            jQuery("#sendersvarform").on("submit", false);
            jQuery('#ham-meldinginnboks').show();
            var objDiv = document.getElementById("meldinglisten1"); //denne og neste linje sørger for at scrollbar er nederst
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    });
}
;