在jquery函数中插入html代码 [英] Inserting html code within a jquery function
本文介绍了在jquery函数中插入html代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图插入以下内容：
< div class =modal fadeid =modalForwardMailtabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮>
< h4 class =modal-titleid =myModalLabel>转发此邮件< / h4>
< / div>
< div class =modal-body>< center>
< input type =emailclass =form-controlplaceholder =Receiver Email Addressname =forwardEmail>
< input class =form-controlplaceholder =Full Nametype =textvalue = {{currentUser.get（'fullName'）}} name =fullName>
< input class =form-controlplaceholder =Subjecttype =textname =subject>
< input class =form-controlplaceholder =Sender Email Addressvalue = {{currentUser.get（'username'）}} type =textname =email> ;
< br>< textarea class =form-controlrows =5placeholder =Notesname =messagecols =30>< / textarea>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>取消< /按钮>
< input type =submitclass =btn btn-defaultname =submitvalue =Submit>
< / form>< / center>
< h3>< / h3>
< / div>
< / div>
< / div>
< / div>
进入：
$（'button.forward'）。click（function（）{
}）;
以下是整个jquery代码：
var UploadMessage = Parse.Object.extend（Upload）;
var querym = new Parse.Query（UploadMessage）;
querym.equalTo（user，currentUser）;
querym.equalTo（Type，Letter）;
querym.descending（createdAt）;
querym.find（{
成功：函数（querym）{
// alert（成功获取）;
//对返回的Parse 。对象值
for（var i = 0; i< querym.length; i ++）{
var object = querym [i];
（function（$）{
$（'＃mail-table'）。append（'< tr class =results-row>< td>'+ object.get（'Date'）+'< / td>< td> '+ object.get（'Subject'）+'< / td>< td>'+ object.get（'Sender'）
+'< / td>< / tr>< tr class =expandMail>< td colspan =3>'
+'< label id =action>< button type =buttonclass =btn btn-default data-toggle =modaldata-target =＃modalForwardMailid =actionButton1>< i class =fa fa-share>< / i>& nbsp前进< / button>< / label>< label id =action>< button class =btn btn-defaultid =actionButton2>< i class =fa fa-recycle>< / i>& amp ;删除< /按钮>& lt; / label>< / center>< br />< label id =uploadedInfo>'+ object.get（'Message'）+
'< br /> < /标签> < br /> < a href ='+ object.get（'documentURL'）+'target =_ blank> < img height =175width =120src =content / scan.pngalt =Imageid =previewThumbclass =img-responsive>< / a>< br / >< a href ='+ object.get（'documentURL'）+'target =_ blank> < button id =actionButton1class =downloadButton> < i class =fa fa-download fa-2x>< / i>& nbsp下载< / td>& nbsp下载< / td>< / a>< / TR>'）;
}）（jQuery）;
//alert (object.id +' - '+ object.get（'playerName'））;
error：function（error）{
alert（Error：+ error.code ++ error.message）;
}
}）;
$（document）.on（'click'，'.results-row'，function（）{
$（this）.next（'。expandMail'）。toggle（）;
$ b $（'button.delete'）。click（function（）{
$（this）.parent（）。parent（）。prev（）。remove（）;
$ （this）.parent（）。parent（）。remove（）;
}）;
$ b $（'button.forward'）。click（function（）{
$（＃modalForwardMail）。modal（now）;
}）;
}）;
我之所以这样做是因为我想抓住对象.get（'documentURL'）从jquery函数中插入到表单中，最终结果如下所示：
< div class =modal fadeid =modalForwardMailtabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮>
< h4 class =modal-titleid =myModalLabel>转发此邮件< / h4>
< / div>
< div class =modal-body>< center>
< input type =emailclass =form-controlplaceholder =Receiver Email Addressname =forwardEmail>
< input class =form-controlplaceholder =Full Nametype =textvalue = {{currentUser.get（'fullName'）}} name =fullName>
< input class =form-controlplaceholder =Subjecttype =textname =subject>
< input class =form-controlplaceholder =Sender Email Addressvalue = {{currentUser.get（'username'）}} type =textname =email> ;
< br>< textarea class =form-controlrows =5placeholder =Notesname =messagecols =30>< / textarea>
object.get（'documentURL'）
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>取消< / button>
< input type =submitclass =btn btn-defaultname =submitvalue =Submit>
< / form>< / center>
< h3>< / h3>
< / div>
< / div>
< / div>
< / div>
解决方案
从我理解的你想要在modal onclick of forward link.So Here is the code
html
< a data-toggle =modalhref =http://fiddle.jshell.net/bHmRB/51/show/data-target =＃myModalid =getModal >正向< / A>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮>
< h4 class =modal-titleid =myModalLabel>转发此邮件< / h4>
< / div>
< div class =modal-body>< center>
< input type =emailclass =form-controlplaceholder =Receiver Email Addressname =forwardEmail>
< input class =form-controlplaceholder =Full Nametype =textvalue = {{currentUser.get（'fullName'）}} name =fullName>
< input class =form-controlplaceholder =Subjecttype =textname =subject>
< input class =form-controlplaceholder =Sender Email Addressvalue = {{currentUser.get（'username'）}} type =textname =email> ;
< br>< textarea class =form-controlrows =5placeholder =Notesname =messagecols =30>< / textarea>
< div id =url>< / div>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>取消< /按钮>
< input type =submitclass =btn btn-defaultname =submitvalue =Submit>
< / form>< / center>
< h3>< / h3>
< / div>
< / div>
< / div>
< / div>
jquery
< pre $ $（document）.ready（function（）{
$（'＃getModal'）。click（function（）{
var pageURL = $（location ）.attr（href）;
$（＃url）。text（pageURL）;
$（＃modalForwardMail）。modal（toggle）;
/ / alert（pageURL）;
}）;
}）;
document.Url 标记=nofollow> DEMO1
。
DEMO2
I am trying to insert the following:
<div class="modal fade" id="modalForwardMail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Forward this Mail</h4>
</div>
<div class="modal-body"><center>
<form name="contactform" method="post" action="forwardForm.php" class="form-horizontal" role="form">
<input type="email" class="form-control" placeholder="Receiver Email Address" name="forwardEmail">
<input class="form-control" placeholder="Full Name" type="text" value={{currentUser.get('fullName')}} name="fullName">
<input class="form-control" placeholder="Subject" type="text" name="subject">
<input class="form-control" placeholder="Sender Email Address" value={{currentUser.get('username')}} type="text" name="email">
<br><textarea class="form-control" rows="5" placeholder="Notes" name="message" cols="30"></textarea>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
</form></center>
<h3></h3>
</div>
</div>
</div>
</div>
Into:
$('button.forward').click(function() {
});
Below is the entire jquery code:
var UploadMessage = Parse.Object.extend("Upload");
var querym = new Parse.Query(UploadMessage);
querym.equalTo("user", currentUser);
querym.equalTo("Type", "Letter");
querym.descending("createdAt");
querym.find({
success: function(querym) {
//alert("Successfully retrieved " );
// Do something with the returned Parse.Object values
for (var i = 0; i < querym.length; i++) {
var object = querym[i];
(function($) {
$('#mail-table').append('<tr class="results-row"><td>' + object.get('Date') + '</td><td>' + object.get('Subject') + '</td><td>' + object.get('Sender')
+ '</td></tr><tr class="expandMail"><td colspan="3">'
+'<label id="action"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalForwardMail" id="actionButton1"><i class="fa fa-share"></i>  Forward</button></label> <label id="action"><button class="btn btn-default" id="actionButton2"><i class="fa fa-recycle"></i>  Delete</button></label> </center><br /><label id="uploadedInfo">' + object.get('Message') +
'<br /> </label> <br /> <a href=" '+ object.get('documentURL') +' " target="_blank"> <img height="175" width="120" src="content/scan.png" alt="Image" id="previewThumb" class="img-responsive"></a><br /><a href=" '+ object.get('documentURL') +' " target="_blank"> <button id="actionButton1" class="downloadButton"> <i class="fa fa-download fa-2x"></i>  Download</button></a><br />' + '</td></tr>');
})(jQuery);
//alert(object.id + ' - ' + object.get('playerName'));
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
$(document).on('click' , '.results-row', function () {
$(this).next('.expandMail').toggle();
$('button.delete').click(function() {
$(this).parent().parent().prev().remove();
$(this).parent().parent().remove();
});
$('button.forward').click(function() {
$("#modalForwardMail").modal("now");
});
});
The reason why I want to do that is because I want to grab object.get('documentURL') from the jquery function and insert it into the form so the end result looks like this:
<div class="modal fade" id="modalForwardMail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Forward this Mail</h4>
</div>
<div class="modal-body"><center>
<form name="contactform" method="post" action="forwardForm.php" class="form-horizontal" role="form">
<input type="email" class="form-control" placeholder="Receiver Email Address" name="forwardEmail">
<input class="form-control" placeholder="Full Name" type="text" value={{currentUser.get('fullName')}} name="fullName">
<input class="form-control" placeholder="Subject" type="text" name="subject">
<input class="form-control" placeholder="Sender Email Address" value={{currentUser.get('username')}} type="text" name="email">
<br><textarea class="form-control" rows="5" placeholder="Notes" name="message" cols="30"></textarea>
object.get('documentURL')
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
</form></center>
<h3></h3>
</div>
</div>
</div>
</div>
解决方案
From what I understood you want to show form in a modal onclick of Forward link.So here is the code
html
<a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal" id="getModal">Forward</a>
<div class="modal fade" id="modalForwardMail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Forward this Mail</h4>
</div>
<div class="modal-body"><center>
<form name="contactform" method="post" action="forwardForm.php" class="form-horizontal" role="form">
<input type="email" class="form-control" placeholder="Receiver Email Address" name="forwardEmail">
<input class="form-control" placeholder="Full Name" type="text" value={{currentUser.get('fullName')}} name="fullName">
<input class="form-control" placeholder="Subject" type="text" name="subject">
<input class="form-control" placeholder="Sender Email Address" value={{currentUser.get('username')}} type="text" name="email">
<br><textarea class="form-control" rows="5" placeholder="Notes" name="message" cols="30"></textarea>
<div id="url"></div>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-default" name="submit" value="Submit">
</form></center>
<h3></h3>
</div>
</div>
</div>
</div>
jquery
$(document).ready(function(){
$('#getModal').click(function() {
var pageURL = $(location).attr("href");
$("#url").text(pageURL);
$("#modalForwardMail").modal("toggle");
// alert(pageURL);
});
});
with document.Url as you specified in comments below.
DEMO2
这篇关于在jquery函数中插入html代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
