I currently have a simple view with a table using data/model from which my controller passed to it to generate it.
I was wondering how I would go about if let's say each row of the table has a button called "more info". This button will open up a Modal popup window and then inside would display another set of information (based on that particular row's id or column) which I need to somehow call a controller again to generate a different query then display it without any page reloads and such to the end-user. The modal would have no further function than just a close button as it's purely for information.
Now I know how to generate a modal but usually it's to ask the user to input some data and then call a controller/view after just haven't tackled something as such yet.
I'm sure I need to do some type of Ajax/Jquery for this as well. Just wanted to get some ideas or even some examples perhaps how I would go about this.
Thanks in advance!
Hello,
In your page set your modal structure, something like this :
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
// Model content there
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Now when you click on a button to get some info send an ajax request with JavaScript, return the modal content in the response and fill the modal with it, then open the modal with JavaScript.
You could use jQuery for this. But you might want to look at the laracasts lessons about vuejs. It's a bit of a learning curve if you've never used a similar javascript framework, but it's worth it. You'll save lots of time and do more with less code which is a lot more readable. jQuery was made for DOM manipulation, while a framework like vuejs does DOM manipulation as a "side effect" based on the data you feed it. It allows you to focus on the stuff that matters and does the tedious bits automatically.
Their website even has a modal example: http://vuejs.org/examples/modal.html
And I believe this is the lesson which shows you how vue and laravel work together with an ajax request: https://laracasts.com/series/learning-vuejs/episodes/8
@bestmomo - I use editable with Laravel which is some form of ajax call but haven't figured it out quite yet how to incorporate that logic into my modal idea but this way definitely is "quicker" to achieve but just requires more javascript.
@colourmill - You were right about that learning curve. I got as far as displaying the json data output to the screen but I'm far from anything solid. However I feel if I do figure it out somehow it does seem like less code to worry about as you have pointed out.
this article has a clear example http://stackoverflow.com/questions/6908592/jquery-and-data-attributes-to-handle-all-ajax-calls
basically, annotate each item in the table with data attributes for the query you will need to perform when the user clicks on the link. The call to your server can return Json or you could actually return a view from blade with all the data rendered. jQuery Ajax has an option where you tell it the element to grab from the returned view so that you don't need to worry about the html header, body etc.
@Snapey So far I found this way much cleaner and quicker as well as that code seems to be unobtrusive. I will use this way for now. Thanks.
Please or to participate in this conversation.