Place JS Variable in my modal's HREF link

Question

I have a JS variable showing properly in an alert window. I am trying to place the same value in my href link on the modal that immediately follows the alert.

On the main page I have a script that shows the value in an alert box - It gets the clicked_id value from here:

<span onclick='executeChildSupport(this.id)'><a href='#' data-toggle='modal'><i class='fa fa-th' aria-hidden='true'></i></a></span>

This is the JS script that catches the clicked_id and shows in the alert box

 function executeChildSupport(clicked_id) {
    $(this).tooltip('hide');
    event.currentTarget.innerHTML = "<i class='fa fa-th' aria-hidden='true' style='margin-left:10px'></i>";
    alert(clicked_id);
    $('#supportShare').modal('show');
    return false
  }

Following the alert, a modal is then shown, I am trying to place the "clicked_id" JS variable that was shown in the alert also in the modal's page where there is an HREF string as shown below (where it says "document.write(clicked_id)")

<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary"><i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK HERE <script>document.write(clicked_id);</script></a>

Any suggestions?

HERE IS THE MODAL CODE (BODY AREA ONLY - I believe that is all that is needed by the request)

<div class="modal-body" style="padding: 40px;color:#fff">
<table border="0" style="width:100%">
<tr>
<td colspan="3" style="padding:8px 3px 3px 2px">
<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary" style="background-color:#171717;width:100%;border:none;padding:30px">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i><br>LINK <script>document.write(+clicked_id+);</script></a>
</td>
</tr>
</table>
</div>

What about this direction?

<a href="javascript:document.write('../_support/tip.php?id='+clicked_id'); target="_blank">LINK</a>

Where exactly inside that `#supportShare` modal is that link that you want to alter? Please post the complete modal markup. Then just target the elements with an appropriate selector and set their text. — Bergi, Jun 19 '17 at 21:53
But the alert shows the proper ID on every listed item? I just need to ID to carry over to the modal so I can place it in the link. The link actually launches a different PHP page with the normal convention http://link?id=XXX It is the XXX that I need in place. — Davo, Jun 19 '17 at 21:54
See the link in the edited post modal area - title simply "LINK" — Davo, Jun 19 '17 at 21:58
You can see the actual page here: CLICK ON THE 9-Square GRID ICON to the right of each track name to see http://musicpax.com/_PUBLIC/index_mpx.php?t=mpxmusic&o=p&p=Paul-Alexis-Sihon — Davo, Jun 19 '17 at 22:00
In that case, just `$("#modal-body a").attr("href", "../_support/tip.php?id="+clicked_id).find("i").after("LINK "+clicked_id)` should do it — Bergi, Jun 19 '17 at 22:06
You should definitely [*not* use `document.write`](https://stackoverflow.com/q/802854/215552). — Heretic Monkey, Jun 19 '17 at 22:10
Where is this placed - can you give me a landmark? (since I added several other possible options in the edit above) — Davo, Jun 19 '17 at 22:11

Al-amin Nowshad · Accepted Answer · 2017-06-19T22:35:03.777

If I've understood your query then you can follow two ways, (all codes below are not absolute working code, these are given for understanding, you may want to change them as you want)

not-recommended way is to use a global variable then using it in your link example:

var current_id = null;
......
alert(clicked_id);
current_id = clicked_id;
....

Then doing

<a href="../_support/tip.php?id=" target="_blank" class="btn btn-primary">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE 
<script>document.write(current_id);</script>
</a>

Recommended Way is to access and change the value of the dom after alert example:

......
alert(clicked_id);
$('#clicked_id').text(clicked_id);
$('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
$('#supportShare').modal('show');
.....

or you can use a callback after the modal loads

......
alert(clicked_id);
$('#supportShare').modal('show', function(){
    $('#clicked_id').text(clicked_id);
    $('#dynamic_link').attr('href', '../_support/tip.php?id='+clicked_id);
});
.....

Then changing a bit like:

<a href="#" target="_blank" class="btn btn-primary" id="dynamic_link">
<i class='fa fa-money fa-3x' aria-hidden='true' style="padding-bottom:3px"></i>
<br>
LINK HERE 
<span id="clicked_id"></span>
</a>

The correct ID is showing in the SPAN area but not being added on to the "../_support/tip.php?id=" ? I need it ro output "../_support/tip.php?id=22017" --- 22017 is the SPAN output (also I do want to do it the recommended way :-) thank you for your patience — Davo, Jun 19 '17 at 22:21
It works!!!!!! Excellent - I used the first option (not the callback in the modal)... — Davo, Jun 20 '17 at 02:10
congratulations! please mark this as the correct answer if that helped you @Davo — Al-amin Nowshad, Jun 20 '17 at 11:31

Place JS Variable in my modal's HREF link

1 Answers1