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
Related
I am newer to Angular and seem to be having difficulty finding out why I'm getting blank fields. I'm using the 1.7.7 version of angular-min and angular-route.
The data is being pulled from a table called "news" and I am only needing the ID and ARTICLE columns. The ARTICLE column is stored from a CKEditor textarea.
My route looks like:
var app = angular.module("HabbfinityApp", ["ngRoute"]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl : "home.php"
}).when("/home", {
redirectTo : "/"
}).when("/news", {
templateUrl : "news.php"
}).when("/newsinfo/:id", {
templateUrl : "newsinfo.php",
controller: "newsList"
}).otherwise({
redirectTo : "/"
});
}]);
app.controller("newsList", function($scope, $http, $routeParams){
var id = $routeParams.id;
$http.get("newsitem.php?id=" + id)
.then(function(resp){
$scope.item = resp;
});
});
app.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
});
My newsitem.php looks like:
<?php
require('config2.php');
$id = $_GET["id"];
$newsQuery = $dbh->prepare("SELECT id, article FROM news WHERE id=:id LIMIT 1");
$newsQuery->execute(array(":id"=>$id));
$newsQueryData = $newsQuery->fetch(PDO::FETCH_ASSOC);
echo json_encode($newsQueryData);
?>
My newsinfo.php looks like:
<div class="row">
<div class="col-md-12">
<div class="panel-default panel-custom">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-lg fa-newspaper-o" aria-hidden="true"></i> News</h3>
</div>
<div class="panel-body">
<div ng-controller="newsList">
<div ng-repeat="x in item">
<img src="assets/images/news.png" alt="News" class="img-center img-responsive">
<br>
Tweet
<br>
<br>
<p ng-bind-html="x.article | unsafe"></p>
</div>
</div>
</div>
</div>
</div>
</div>
ISSUE
After the first image, twitter button and actual article, everything gets repeated another five times, so I end up with six images and six tweet buttons where the ID of the repeated five is blank.
Here's a var_dump using htmlentities so you can see exactly what those columns are pulling in.
string(899) "{"id":"610","article":"<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">All of us at habbfinity would like wish our<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"font-size:26px\">Builder<\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><strong><span style=\"color:#2980b9\"><span style=\"font-size:48px\">Sarah<\/span><\/span><\/strong><\/p>\r\n\r\n<p style=\"text-align:center\"><img alt=\"Image result for happy birthday gif\" src=\"http:\/\/bestanimations.com\/Holidays\/Birthday\/flowers\/happy-birthday-vintage-roses-gold-gif.gif\" \/><\/p>\r\n"}"
I've tried doing:
<div ng-repeat="x in item | limitTo: 1">
That doesn't work.
TEMP FIX
After reading through some of the posts on here, I managed a temporary fix.
I added the following to the newsList controller:
$scope.id = $routeParams.id;
I then changed newsinfo.php by moving the image and twitter button outside of ng-repeat and changed {{x.id}} in the twitter link to {{id}}.
QUESTION
How can I fix this to allow everything to be within the ng-repeat without having to use the temporary fix?
Or is what was done for the temporary fix the better way of doing it anyway?
EDITED ANSWER / QUESTION
Thanks to the suggestion below, I was able to get this resolved.
However, I have one more question.
Is there a way to do this on one page? For example, news.php is just a list of news posts and newsinfo.php is the single news post. Am I able to do something to get it all on news.php and keep the route to only /news, which would show the list if the route isn't news/# or show the specific item if the route is news/#?
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 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/
I'm new to AngularJs and i'm trying to make web with angular.js and PHP.I'm having some trouble on displaying data from a Json .
My controller
$scope.careprovider = function() {
$http.post('php/homefunctions.php', {
'act': 'careprovider'
}).success(function(data, status, headers, config) {
if (data.sessionError == 1) {
$location.path("/Login");
}else {
alert(data.careproviders);
$scope.careprovider = data.careproviders;
$scope.specializations = data.specializations;
}
}).error(function(data, status) {
$scope.errors.push(status);
});
}
I have JSON Array object as shown below
{"careproviders":
{"Anaesthesiologists":
[{"id":"37","addedBy":"5463e2dc0f","doctorName":"test","email":"sukalavan#consult-ic.com","hasUpdation":"NO"},
{"id":"38","addedBy":"62f5d33584","doctorName":"test1","email":"sukalavan#consult-ic.com","hasUpdation":"NO"}],
"Cardiologist":
{"id":"38","addedBy":"62f5d33584","doctorName":"test2","email":"sukalavan#consult-ic.com","hasUpdation":"NO"}]}
I want to get the keys and values separately using ng-repeat in angular.js.Here is my html
<div ng-repeat="f in careprovider">
<div class="cus-row-head">want show here the key</div>
<div class="row cus_row clearfix cus-sep-row posrel">
<div class="col-xs-12 col-md-12">
<div class="col-xs-6 col-lg-8 cus-col-mob-4">
<span class="cus-md-font">want to show here the doctor name</span>
<span class="cus-sm-font cus-inline">
<span class="glyphicon glyphicon-envelope"></span> email </span>
</div>
</div>
<a class="icons_sm icons-sm-edit"></a>
</div>
</div>
try this
{{f.doctorName}}
instead of "doctorName"
Check my plunker
Check out this jsfiddle I put together which has the type of structure you want.
If you want to loop through the keys of an object, your ng-repat should look like this:
<div ng-repeat="key in keys(object)"></div>
Where keys is defined in your controller as:
$scope.keys = function(obj){return obj? Object.keys(obj) : [];}
(BTW, your json has a missing '[' character in it.)
Try doing this:
ng-repeat="(key, value) in data"
Then you can access {{key}} and {{value}}
The method is mentioned here: https://docs.angularjs.org/api/ng/directive/ngRepeat
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;
}
});
});