Put data in #myModal popup Twitter Bootstrap - php

Question

Its very simple but i don't see the solution.
How can I put a php var in this twitter bootstrap popup link?
Read More
And how can i get and print the value of this link in the popup field?

Answer 1

If short tags are enabled:
<a
href="#myModal"
title="Lees meer"
value="12345"
data-toggle="modal"
data-phpvar="<?=$myVariable?>"
>
Read More
</a>
else:
<a
href="#myModal"
title="Lees meer"
value="12345"
data-toggle="modal"
data-phpvar="<?php echo $myVariable; ?>"
>
Read More
</a>
both indented for readability - don't do this in actual HTML, it looks messy.
And to get it in jQuery - .data("variable") automatically gets attributes that start with data-:
$("a[href=#myModal]").click(function() {
alert($(this).data("phpvar"));
});
or use the .attr equivalent:
$("a[href=#myModal]").click(function() {
alert($(this).attr("data-phpvar"));
});
and to output in the modal:
$("a[href=#myModal]").click(function() {
var phpVariable = $(this).attr("data-phpvar");
var modalObject = $($(this).attr("href"));
modalObject.find(".modal-body").text(phpVariable); //You might also use .html()
});
JSFiddle demo of the code working

Answer 2

Thanks a lot h2ooooooo
I have the short tags enabled and I will build the link ass follow:
<a href="#myModal"
title="Bewerken"
role="button"
data-toggle="modal"
data-phpvar="<?php echo $value['i_id_pk'] . '||' . $value['c_user'] . '||'. $value['i_user_type_id_fk'];?>">
<i class="icon-edit"></i>
</a>
I send the values of data-phpvar with JQuery to the #myModal Popup. I use a OnClick event to get the values out of the a href data-phpvar. Like this:
<script>
$("a[href=#myModal]").click(function() {
var str = $(this).attr("data-phpvar");
var substr = str.split('||');
$("[name=user_id]").val(substr[0]);
$("[name=c_chance_user_name]").val(substr[1]);
$("[name=validation_c_user]").val(substr[1]);
$("[name=c_chance_user_type]").val(substr[2]);
$("span.userName").text(substr[1]);
});
</script>
It will work but, can I do this piece of JQuery make shorter or in a better way?
Eventually I put the values ​​out of the a href data-phpvar in the textfields inside the popup. The textfield must have the same name like the JQuery names:
$("[name=user_id]").val(substr[0]);
or
$("[name=c_chance_user_name]").val(substr1);
The html textfield in the popup is like this:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Wijzig gebruiker "<span class="userName"></span>"</h3>
</div>
<div class="modal-body">
<input class="span3" id="appendedPrependedInput" type="text" name="c_chance_user_name" value="" minlength="3" required />
<input class="span3" type="text" data-validation-match-match="c_chance_user_name" name="validation_c_user" minlength="3" required />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Sluiten</button>
<button class="btn btn-success" name="chanceBtn"><li class="icon-ok-circle icon-white"></li> Opslaan</button>
</div>
</div>
You can find this popup plug-in on www.twitter.github.com/