Pass parameters to modal bootstrap via javascript

Asked

Viewed 1,597 times

0

I have a system that has a web version, you can view it here: All in Your Hands. In it you will notice that there is a Carrousel to display more accessed content and in this Carrousel I use js to open a modal bootstrap in the case of some content like music and videos. The javascript function that is called to open the modal is this below:

function recommendedContentsDialodShow(){
    $('#recommendedContentsModal').on('hidden.bs.modal', function() {    


    }).modal('show');       
}

The problem is that I cannot open the modal and display data in it using EL (ex: ${nomeMusica} ) without making a request and reloading the entire page. How could I do this without making a request by setting these parameters in the request scope ?
I’ve tried features like c:set but it didn’t work...

javascript twitter-bootstrap

1 answer

2

The smartest solution, in my opinion, is that you make a request for each open modal. But, why, after all?

  • Without request, you will have to store the content data you want to explode on the page itself, which is a waste of bandwidth for those who nay will open a specific modal;

  • If the information you want to open in your modal is the same that already have in your page, then here is an opportunity for you to rethink in your UX, because you’re replicating data unnecessarily;

  • Considering, finally, that you definitely want to move to your modal some variable, be aware that this will only be possible if your function recommendedContentsDialodShow() is in the same scope of your page that you have ${nomeMusica}. For example:

index php.:

<?php $nomeMusica = 'The Offspring – You're gonna go far, kid'; ?>

<script type="text/javascript">
  alert('<?php echo $nomeMusica; ?>');
</script>
  • I mean, you you won’t be able to transact your variable over different scopes - neither Javascript nor PHP know how to do this. Also, understand that this mixture of languages, especially in this format, is bad. The ideal is to decouple as much of one language as possible from the other, without making a fruit salad in a specific file. Therefore, your solution is, if you want invariably to use $nomeMusica In your Javascript, make sure that your Javascript declaration is at the same scope level as the function you call. Otherwise, in turn, use a request $.ajax - this, besides being an alternative that will solve your problem, is the most appropriate option for your scenario.

  • Thank you William, your comments were of great help. I will try to do using the solution via ajax, however how can I get the desired information through ajax? How can I get the return? Note that I am basing myself on the code below: var xmlhttp; if(window.Xmlhttprequest){ xmlhttp=new Xmlhttprequest(); }Else{ xmlhttp=new Activexobject("Microsoft.XMLHTTP"); } var params = "parameters"; xmlhttp.open("POST",serverBaseURL,true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(params);

  • Hi, @rbertani. You can simplify this by using jQuery, the library you are already using. Take a look here, where I explain how to make an AJAX request. Another thing, the ideal is that you provide the information you want in the modal through the format .json, as an API. In this template you will be able to persist your data with ease.

  • Hello William, thanks for the tip. However, I believe that is not exactly what I want to do. So I am using a modal bootstrap (I know it uses ajax from behind), however I already have the modal code in the body of the page and when I call the js method the idea is to open the modal with the information I need in specific fields of this modal using EL, ex ${Usica}. In this case, the code snippet of your link: $dialog.html() would not work...note that I already have the modal html ready, missing only some variable information

Browser other questions tagged javascript twitter-bootstrap

You are not signed in. Login or sign up in order to post.