将id从json传递给js到弹出的对话框

时间:2014-04-16 21:13:12

标签: javascript php jquery json

我正在使用jquery UI对话框在FullCalendar上显示更多数据EventClick我能够将所有信息发送到对话框我除了我需要发送id并将其添加到这样的链接

<a href='editsigning1.php?id="id"'>Edit Signing</a>

我无法弄清楚如何做到这一点我不知道要发送什么网址因为我没有点什么来点击活动并转到页面我在你之后选择了什么看看所有其他数据。

除了传递id

外,一切正常

这是js文件

// Setup FullCalendar
(function () {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();



    $('#fullcalendar').fullCalendar({
        editable: true,
        //height: 500,
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

        eventClick: function (calEvent, jsEvent, view) {

            $("#dialog").dialog({
                autoOpen: false,
                height: 300,
                width: 500,
            }

            );

            $("#start").val(calEvent.start);
            $("#title").val(calEvent.title);
            $("#address").val(calEvent.address);
            $("#id").val(calEvent.id);
            $("#hphone").val(calEvent.hphone);
            $("#cphone").val(calEvent.cphone);
            $("#wphone").val(calEvent.wphone);
            $("#email").val(calEvent.email);
            $('#dialog').dialog('open');
        },

        events: "json_events.php", 
    });
}());

这是弹出的对话框信息

<div id="fullcalendar"></div>
<div id="dialog" title="My Signing" style="display:none">
    <form>

            <input type="text" name="start" id="start" class="form-control input-sm">


            <input type="text" name="title" id="title" class="form-control input-sm">

            <input type="text" name="address" id="address" class="form-control input-sm">

            <input type="text" name="hphone" id="hphone" class="form-control input-sm">

            <input type="text" name="cphone" id="cphone" class="form-control input-sm">

            <input type="text" name="wphone" id="wphone" class="form-control input-sm">

            <input type="text" name="email" id="email" class="form-control input-sm">

            <input type="text" name="edit" id="edit">

           <a href='editsigning1.php?id="id"'>Edit Signing</a>


    </form>
</div>

这是创建json_events.php

的代码
$events = array();
foreach($db->query("SELECT * FROM `signings` WHERE `pid` = '$pid' AND `done`= 0") as $row) {

    $title = $row['fname'].' '.$row['lname'] . ' ' . $row['coname'];
    $eventsArray['id'] =  $row['id'];
    $eventsArray['ordern'] =  $row['ordern'];
    $eventsArray['title'] = $title;
    //$eventsArray['url'] = "editsigning1.php?id=" . $row['id'];
    $eventsArray['start'] = $row['signstart'];
    $eventsArray['end'] = $row['signend'];
    $eventsArray['stop'] = $row['signend'];
    $eventsArray['address'] = $row['street1'] . ' ' . $row['street2'] . ' ' . $row['city'] . ', ' . $row['state'] . ', ' . $row['zip'];
    $eventsArray['hphone'] = 'Home Phone ' . $row['hphone'];
    $eventsArray['cphone'] = 'Cell Phone ' . $row['cphone'];
    $eventsArray['wphone'] = 'Work Phone ' . $row['wphone'];
    $eventsArray['email'] = $row['email'];
    $eventsArray['allDay'] = "";
    $eventsArray['color'] = "#04488B";
    $eventsArray['textColor'] = "#FFFFFF";

    $events[] = $eventsArray;
}


echo json_encode($events);

1 个答案:

答案 0 :(得分:1)

让我为你解决这个问题......

您为链接提供的HTML可以更改为:

<a href="editsigning1.php?id={id}" id="linkId">Edit Signing</a>

这样您就可以访问$("#linkId")而不是$("#id")

现在您不需要更改值,而是属性。

$("#linkId").prop('href', calEvent.id);

由于您需要更改字符串中的特定字符串,因此我使用了大括号{id},因此您现在可以替换它而不是整个属性。

$("#linkId").prop('href', $("#linkId").prop('href').replace('{id}', calEvent.id));

我相信这应该有用。

<强>更新

如果您需要在HTML输出中打印数据:

<div id="start" class="popupData"></div>

然后在jQuery中你会使用text()

$("#start").text(calEvent.start)

您还可以遍历data响应对象以动态添加HTML输出:

var arr = [];

for (var prop in calEvent){
    if (calEvent.hasOwnProperty(prop)){
        arr.push('<input class="popupData" id="'+prop+'" value="'+calEvent[prop]+'" placeholder="'+prop+'" />');
        //arr.push('<div class="popupData">' + calEvent[prop] + '</div>');
    }
}

$("#dialog").find("form").prepend(arr);

这样您就不需要为每个属性添加HTML。

<强> MARKUP:

这些div的标记应该用CSS。考虑给div class或直接在id

#dialog #start,
#dialog div.popupData { padding: 5px; border-bottom: 1px solid #999; }