CODEWITHSUNDEEP
htmltwitter-bootstrap-3bootstrap-modal
Hazim
Hazim

Reputation: 69

Pass data to modal from other url

What I try to do is pass data from main page to popup page(modal) that I call from other html. What I want to pass is name and description that exist in main to modal.

My main

<a href="v?PageId=frmGroupGeneral" data-toggle="modal" data-target="#editGroup">EDIT</a>

<div id="editGroup" class="modal fade text-center">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                    </div>
                </div>
            </div>

My frmGroupGeneral html(modal/popup)

<html>
  <head>
  </head>
  <body>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Group Page</h1>
    </div>
    <div class="modal-body">
      <div class="container-fluid text-left">
        <div class="row">
          <div class="col-sm-1">
              <p>Name</p>
          </div>
          <div class="col-sm-11">
              <textarea class="form-control" rows="1" id="textareaName" placeholder="Enter name" maxlength="50"></textarea>
          </div>
        </div>
        <br>
        <div class="row">
          <div class="col-sm-1">
              <p>Description</p>
          </div>
          <div class="col-sm-11">
              <textarea class="form-control" rows="5" id="textareaDescription" placeholder="Enter description" maxlength="500"></textarea>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Thanks in advance.

Upvotes: 0

Views: 1412

Answers (1)

David R
David R

Reputation: 15637

You are already using the *data attributes in your html page. All you have to do is to add few more data-* id's according to your need to pass the data from your parent html page to the popup page.

For eg,

Considering your case you can pass the name and description to your modal like this,

<a href="v?PageId=frmGroupGeneral" data-toggle="modal" data-name="YOUR_NAME_VALUE" data-description="YOUR_DESCRIPTION" data-target="#editGroup">EDIT</a>

And in your modal you can retrieve the passed in parameters as,

 var nameValue = $(this).data('name');
 var descriptionValue = $(this).data('description');

To set the retrieved value to any field in model you can simply do,

 $(".modal-body #textareaName").val(nameValue);
 $(".modal-body #textareaDescription").val(descriptionValue);

Hope this helps!

Upvotes: 1

Related Questions