我目前正在为我的URL shortener网站开发userCP,部分是在userCP上,您可以通过Jquery管理您的URL。我遇到的问题是,当提醒一行的值时,它会打印正确的URL/Short URL。这很好。
我的问题是,当按下编辑按钮时,这两个字段会变成文本字段,使其可编辑,这也很好,但当我编辑它们并单击保存时,它会提醒以前的URL/短URL。我想让它提醒新的值,但它似乎不起作用。
以下是我所做的:
<?php while($list = $listURLs->fetch_array()) { ?> *As you can see, i'm looping.*
<td id="longURL<?= $list['ID']; ?>"><a rel="tooltip" title="<?= $list['longURL']; ?>" target="_blank" href="<?= $list['longURL']; ?>"><?= substr($list['longURL'],0,25); ?></a></td>
<td id="shortURL<?= $list['ID']; ?>"><input type='text' class='span2' onmouseover="(this.select())" value='http://smurl.es/<?= $list['shortURL']; ?>'/></td>
<td><?= $list['type']; ?></td>
<td><?= $time; ?></td>
<td><?= $list['hits']; ?></td>
<td><button id="edit<?= $list['ID']; ?>" class='btn btn-warning btn-small' rel='tooltip' title='Edit'><i class="icon icon-edit"></i></button> <button id="del<?= $list['ID']; ?>" class='btn btn-danger btn-small' rel='tooltip' title='Delete'><i class="icon icon-trash"></i></button></td>
</tr>
<script type="text/javascript">
$("button#edit<?= $list['ID']; ?>").click(function() {
$('#longURL<?= $list['ID']; ?>').html("<input type='text' id='lurl<?= $list['ID']; ?>' value='<?= $list['longURL']; ?>' />");
$('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='surl<?= $list['ID']; ?>' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
$("button#edit<?= $list['ID']; ?>").attr({"class": "btn btn-info btn-small", "data-original-title": "Click to Save", "id": "save<?= $list['ID']; ?>"});
});
var click<?= $list['ID']; ?> = 0;
$(document).on('click', 'button#save<?= $list['ID']; ?>', function() {
click<?= $list['ID']; ?> += 1;
if(click<?= $list['ID']; ?> >= 2) {
var shortURL = $('#surl<?= $list['ID']; ?>').val();
var longURL = $('#lurl<?= $list['ID']; ?>').val();
var name = $("#name").val();
var name = $("#name").text();
alert("short: " + shortURL + "'n'nLong: " + longURL);
$("button#save<?= $list['ID']; ?>").attr({"class": "btn btn-warning btn-small", "data-original-title": "Edit", "id": "edit<?= $list['ID']; ?>"});
$('#longURL<?= $list['ID']; ?>').html("<a target='_blank' href='<?= $list['longURL']; ?>'>" + "<?= $list['longURL']; ?>".substring(0, 25) + "</a>");
$('#shortURL<?= $list['ID']; ?>').html("<input type='text' class='span2' onmouseover='(this.select())' value='http://smurl.es/<?= $list['shortURL']; ?>'/>");
click<?= $list['ID']; ?> = 0;
}
});
</script>
<?php
}
}
?>
正如你所看到的,我使用:
$('#longURL<?= $list['ID']; ?>').html("<input type='text' id='lurl<?= $list['ID']; ?>' value='<?= $list['longURL']; ?>' />");
$('#shortURL<?= $list['ID']; ?>').html("<div class='input-prepend'><span class='add-on'>http://smurl.es/</span><input id='surl<?= $list['ID']; ?>' type='text' value='<?= $list['shortURL']; ?>' class='span1' /></div>");
将文本更新为文本字段以使其可编辑。但它不起作用。。。
它只是在我尝试编辑它之前提醒相同的以前的URL
谢谢。
可能在更改值之前评估javascript,
即
var shortURL = $('#surl<?= $list['ID']; ?>').val();
var longURL = $('#lurl<?= $list['ID']; ?>').val();
上面的片段首先被评估,当点击事件被触发时,评估的结果被执行(而不是在点击事件中评估它,然后执行它)
您可以通过右键单击浏览器中的网页并查看页面源代码(呈现的html代码)来确认这一点,以查看页面中真正的javascript。