Inserting html code within a jquery function

Question

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">&times;</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>&nbsp Forward</button></label> <label id="action"><button class="btn btn-default" id="actionButton2"><i class="fa fa-recycle"></i>&nbsp 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>&nbsp 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">&times;</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>

Sure i can clarify. I want to include object.get('documentURL') in a section into my form . object.get is defined within the javascript function and i need to reference it within html. Essentially this form is a message form where user can forward the message to another and in it a file would be included — user4458396
– user4458396, Commented Feb 5, 2015 at 16:54
why dont you just create a <div> and set url in <div> through jquery check jsfiddle.net/singhakash07/7pm2ruvq — singhakash
– singhakash, Commented Feb 5, 2015 at 17:06
Hi thanks for your response. Based your example, could I do something like this $('button.forward').click(function() { $("#modalForwardMail").modal("now"); $("#url").object.get('documentURL'); }); ? where in the html its <div id="url"></div> instead — user4458396
– user4458396, Commented Feb 5, 2015 at 17:17

singhakash · Accepted Answer · 2015-02-05 18:23:35Z

1

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">&times;</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);

            });

    });

DEMO1

with document.Url as you specified in comments below.

DEMO2

edited Feb 5, 2015 at 18:23

answered Feb 5, 2015 at 17:54

singhakash

7,9196 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4458396 Over a year ago

thank you for your response, and I truly appreciate all of your effort. I guess I should of clarified a bit. this line $("#url").text(pageURL); is retrieve the page url, what I want it to retreive and insert in the modal is object.get('documentURL') the documentURL is a not a page a url, its an aribtrary url generated from google drive, and retrieved from parse. In a nutshell, this exact line object.get('documentURL') needs to be inserted into the modal box as it will retrieve the url

singhakash Over a year ago

@Jon i dint heard of it have you used it somewhere then do let me know.I have edited my answer with document.URL demo and its giving the same url(as it is supposed to) I think you misunderstood somethig. And also for what purpose you want this url in form ?

Collectives™ on Stack Overflow

Inserting html code within a jquery function

1 Answer 1

DEMO1

DEMO2

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related