I have number of buttons that open the same bootstrap modal.
Does the script files (JS) need to be called from the main file or from the modal file?
I'm calling the js files inside the modal, include the "jquery-1.11.1.min.js" file and because of that the id that only the first id that i'm sending to the modal is caught.
I made example:
http://80.179.226.44/~israelig/sites/exmytrip/tempFile.php
( try to click more than one time)
I need the "jquery-1.11.1.min.js" inside the modal because i want the "upload images" script to work
I need different the id to be sending to the modal. how can i fix that?
main file:
<li> Send value "1" to modal</li>
<li> Send value "2" to modal</li>
<li> Send value "3" to modal</li>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title for modal</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</body>
<script>
// clear model content
$('body').on('show.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
</script>
modal code you can see here:
http://80.179.226.44/~israelig/sites/exmytrip/modalFile.php?id=2
Don't use href="url" I usually set href="javascript:;" now use a data attribute eg data-id="1" now you need to do something like this
http://getbootstrap.com/javascript/#modals-related-target
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id= button.data('id') // Extract info from data-* attributes
//I'm guess that you want some dynamic content - so perhaps an ajax call and replace your elements
})
Yeah and then you can either use the id to replace a element or set a value. Or perhaps send an ajax call to get some more complex content. If you are doing an ajax call have a loading bar to help uses - that is shown when you load and hidden after loading. You can make one here http://www.ajaxload.info/
Related
I created a list of users in clickable cards, and when we click on the card, a modal popup appear.
I want now to display the detail of the user in theses popup but I don't really know how I have to do for displaying on the popup, the data of the user on which I click.
there is my List code :
<div class="container employees">
<div class="row">
<f:for each="{users}" as="user">
<div class="card card-annuaire">
<div class="card-body">
<h5 class="card-title">{user.firstname} {user.lastname}</h5>
<div class="links">
<ul>
<li class="loc">{user.address}</li>
<li class="tel">{user.telephone}</li>
<li class="service">{user.title}</li>
<li class="loc">{user.address}</li>
</ul>
</div>
</div>
</div>
</f:for>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<ul>
<li class="mail"></li>
<li class="tel"></li>
<li class="service"></li>
<li class="loc"></li>
<li class="comp"></li>
</ul>
</div>
</div>
controller :
public function listAction()
{
$users = $this->frontendUser->findAll();
$this->view->assign('users', $users);
}
Is my request possible with my current code?
My modal works perfectly, I just need to add my data
Someone have an Idea to how can I do it ?
Update : solved with some Jquery code to copy my data already existing :
<script>
const modal = $('#exampleModal');
$('.card-annuaire').click(function () {
const divAnnuaire = $(this);
$('.modal-title', modal).text($('.card-title', divAnnuaire).text());
$('li.tel', modal).text($('.tel', divAnnuaire).text());
$('li.service', modal).text($('.service', divAnnuaire).text());
$('li.loc', modal).text($('.loc', divAnnuaire).text());
})
</script>
The handling of the modal is a question of javascript.
If you have all data in each block of the user list you can add some javascript to each block which copies this data from the current block (this) into your modal and then unhide the modal.
On hiding the modal you don't need to do anything to the included data, as the next click (which also can occur if the modal already is visible) will fill in the data from the clicked data block.
If in your modal more data should be visible than you stored in your list you need to do something more:
you need the ID of the data to get the whole user-record by ajax call.
but otherwise the handling is the same: on each list block you have an eventhandler, which is triggered by a click and which uses data from the block (all fields, or just the uid for an ajax-call to get all data) and insert this data into the modal.
I have a list (displayed in a tabulated format). The list consists of names of various departments.
The same appears as below:
-------------------------------------------------------
Sr. No. Department Name Action
-------------------------------------------------------
1 Department A EDIT | DELETE
2 Department B EDIT | DELETE
3 Department C EDIT | DELETE
4 Department D EDIT | DELETE
5 Department E EDIT | DELETE
-------------------------------------------------------
Now I am trying to open a single modal when "EDIT" or "DELETE" is clicked. In the modal I want to display the EDIT Form (for the particular Department) or DELETE Form (for the particular Department).
Please Note: I am using CouchCMS so even a custom PHP code can be helpful which can be changed to fit the CouchCMS Purview.
I have generate a clonable template with custom routes using CouchCMS. The tag helps me generate the table (as shown above). Where in the buttons for EDIT and DELETE are also generated. I can easily provide to the button the page id using the of CouchCMS (if that helps).
I am using the native code of bootstrap to popup the Bootstrap v3 modal. Wherein, a single modal opens for every button that is clicked, hence saving me the memory issue that i might run into if I generate as many modals as the rows in the table.
The code for Bootstrap v3 modal that i am referring to is available here.
In CouchCMS we have a edit form (for editing the data queried from the database) where the page_id parameter needs to be set in order to edit that particular data item. I need to set this page_id. But am unable to figure out how to?
Code to generate the Table list:
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Sr. No.</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<cms:pages masterpage='department/department.php' limit='10' paginate='1' show_future_entries='1'>
<tr>
<td><cms:show absolute_count /></td>
<td><cms:show k_page_title /></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="<cms:show k_page_id />">
EDIT
</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" data-id="<cms:show k_page_id />">
DELETE
</button>
</td>
</tr>
</cms:pages>
</tbody>
</table>
Code to open a single modal for every button that is clicked, EDIT or DELETE button:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var page = button.data('id') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
var modal = $(this)
modal.find('.modal-title').text('New message to ' + page)
modal.find('.modal-body input').val(page)
})
Code for the modal is:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<!-- Edit Form Content Here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
<button type="button" class="btn btn-primary">SAVE</button>
</div>
</div>
</div>
</div>
An edit form in CouchCMS is defined as:
In this form I need to have the page_id=k_page_id set. The k_page_id is available to the button in the table under the data-* (data-id) attribute. If only this data-id could be supplied to the page_id, the rest can be taken forward from there using CouchCMS.
I am also open to the option of using AJAX, if required. But if it is possible without AJAX, it would still be fine.
Any help in this regards will be greatly appreciated. If any clarification or post editing is required or any more inputs are required, I shall do show if someone points out the short coming in my description/code.
Thanks to the community, in advance.
I am fetching the details of a user according to Id on button click in a popup in laravel but It is showing some error.
This is viewuser.blade.php
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table class="table table-bordered">
<tr>
<td>{{$usersview->id}}</td>
<td>{{$usersview->firstname}}</td>
<td>{{$usersview->filename}}</td>
</tr>
</table>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
This is viewparticipant.blade.php in which I have a button View. When the user will click on this button a popup will open and show the details according to Id.
<td>
View
</td>
My Controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Session;
use App\Imageupload;
class ParticipantController extends Controller
{
public function show($id)
{
$usersview = Imageupload::find($id);
return View::make('viewuser', compact('usersview'));
}
}
My Web.php
Route::get('/participant/show/{id}','ParticipantController#show');
The error is showing that unknown variables in modal.
well you only have $usersview in your blade file and you're calling $row->id in viewparticipant.blade.php , which should be the $usersview->id instead
after Edit -->
so you need to make an ajax call to the function you want to get the results. the ajax must contain the id of the user so you should get the id some how. I usually define an on click function and get the id. then on the same click trigger an ajax call, something like this:
$('#user').on('click', function (event) {
$.ajax({
url: '/users?user_id=' + $(this).val(),
success: function (data) {
// parse the data
},
fail: function () {
// do something in case of failure
}
});
});
$(this).val(); is the id here, I assumed you would store that in an input
Try this:
<td>
View
</td>
Because laravel is figuring out where you want to place your $row->id variable, and to my guessing it's not passing the variable correctly in your route.
try
#foreach($usersview as $usersview)
<tr>
<td>{{$usersview->id}}</td>
<td>{{$usersview->firstname}}</td>
<td>{{$usersview->filename}}</td>
</tr>
#endforeach
I'm returning a notice from an ajax call with
$app = JFactory::getApplication();
$app->enqueueMessage('Joomla notice', 'info');
On the front end this results in the following (note empty heading):
<div id="system-message-container">
<div id="system-message" class="alert alert-info">
<h4 class="alert-heading"></h4>
<div>
<p>Joomla notice </p>
</div>
</div>
</div>
However I want to display the notice with a heading and a dismiss button too like it does in the backend, i.e.
<div id="system-message-container">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="alert alert-info">
<h4 class="alert-heading">Info</h4>
<p>Joomla notice</p>
</div>
</div>
Is there a Joomla way to do this or do I have to come up with a work around?
The message is rendered in media/system/js/core.js by the Joomla.renderMessages function.
You may override it in your template with
jQuery(function() {
Joomla.renderMessages = function(messages) {
// copy / adapt the original function here.
}
});
Also, non-ajax messages can be customized by the html/message.php template override.
After you en-queued your message I suggest to send the message like
echo new JResponseJson($data);
JFactory::getApplication()->close();
Then you can on the client side work on the messages array like #Riccardo's solution. For example mine ajax success function looks like
success: function(responseText){
var json = jQuery.parseJSON(responseText);
Joomla.renderMessages(json.messages);
....
You can find the code here https://github.com/Digital-Peak/DPAttachments/blob/master/com_dpattachments/admin/libraries/dpattachments/core.php#L162
I am implementing an edit feature for 3 related models..
and to divide the work .. i implemented 3 tabs using bootstrap extensions...now each tab contains textfields, drop downs, etc., now the contents of the text and the dropdowns, radio buttons etc are pre-loaded for the user; since this is an edit feature, it would be convenient for them if their choices were retained, and that they only need to change specific fields that they want to change without really having to re-do the entire form.
Each form in a tab has its own independent "Save" button that saves the model and then switches to the next tab after refresh.
Here's what i'm trying to do, (and quite having a hard time )..
I'm sure everybody has a facebook account here.. remember when you try to write a status update, or when you are chatting with somebody and then you click a button that redirects to another page?
Then a dialog box (or modal?) will alert you that you haven't finished your post yet, and that it gives you an option whether to leave or to stay in the page?
Similar to what i'm trying to do; i'm trying to alert the user if he/she wants to save or discard his changes (if there are changes made) before he switches to another tab.. I really have no idea how to do this..
on how the widget works..is abstracted (or i haven't found it yet atleast), and unlike in java where i can easily search for "Events" onChange() or something..i'm new to php and yii.. any idea ,on how to do it, what to use, or a sample code will be really helpful guys.. Thanks a lot!
You could use a global var like var saved=false to check your form has been saved.
To catch the on change of your forms:
$('form :input').change(function(){saved=false;});
See: jquery get all form elements: input, textarea & select
When the user left the page you could fire a beforeunload:
$(window).on('beforeunload', function() {
if(!saved) return 'Leave page?';
});
See also:
Dialog box runs for 1 sec and disappears?
catching beforeunload confirmation canceled?
To catch the tab change you could use a default confirm (http://www.w3schools.com/js/js_popup.asp):
$('#myTab a').click(function (e)
{
e.preventDefault();
if(!saved)
{
if(confirm('Leave tab?'))
{
$(this).tab('show');
}
}
else
{
$(this).tab('show');
}
});
Or you could try to build your own confirm dialog:
Note it seems you can't catch the window beforeunload but for the tab change:
html:
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile"><form><input type="text"><input type="submit" class="btn btn-success"></form></div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<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">Modal header</h3>
</div>
<div class="modal-body">
<p>Form not saved!</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="leavetab" class="btn btn-primary">Leave tab</button>
</div>
</div>
javascript:
var saved = true;
var confirmed = false;
var thistab = null;
function checksave()
{
return saved;
}
$(function () {
$('#myTab a:last').tab('show');
$('#myTab a').click(function (e)
{
e.preventDefault();
thistab = $(this);
if(!checksave()){ $('#myModal').modal(); return false;}
thistab = null;
if(saved || confirmed)
{
$(this).tab('show');
saved = false;
confirmed = false;
}
});
//see: https://stackoverflow.com/questions/12862601/jquery-get-all-form-elements-input-textarea-select
$('form :input').change(function(){saved=false; confirmed = false;});
$('#myModal').on('hidden', function () {
return false;
});
// modal click set confirmed to true
$('#leavetab').click(function()
{
{
$('#myModal').modal('hide');
thistab.tab('show');
saved = false;
confirmed = false;
}
});
});