I would like to add an "onclick" attribute in buttons widget generated by Victoire CMS, in order to track click events by GoogleAnalytics. How can I do it ?
Cheers
So I suppose you're talking about a Widget Button here.
It's not planned to allow users to add as many attribute as they want on this widget. However you have multiple solutions.
1 - Use a Render Widget (recommended)
Replace your Button Widget with a Render Widget and call a route from on of your application Controller. You can add as many parameters as you want : in your case it can be useful to change the Google Analytics event name depending on the button you create.
2 - Themes (quickest)
Each Widget view can be overridden by using a custom Theme. For example, here you can create the file app/Resources/VictoireWidgetButtonBundle/views/showGoogleAnalytics.html.twig.
Copy the code from the original view vendor/victoire/button-widget/Victoire/Widget/ButtonBundle/Resources/views/show.html.twig and change it as you want.
Then you just have to edit your Widget in Style mode and select the theme you just added. If your theme doesn't appear here, clear your cache or check that the path is corresponding to the path described above.
However, this method add a new available Theme for all your buttons and it can cause errors if your client try to apply this Theme in another Button. That's why we recommend the first solution.
3 - Use an HTML Widget (quick & dirty)
HTML Widget allow you to add your custom HTML code.
U can use this:
<button onclick="myFunction()">Click me</button>
myFunction() is a function in javascript which will be done when you click on a button.
Every attribute can be added by setAttribute("attribute", "value");
Related
I am trying to modify a custom MetaSlider (from the WordPress plugin) in which when the "next slide button" is pressed the description that correlates with the slide id class (slide-7667330) is displayed. The element that I click class is called '.flex-next' and that was the default class name given by word press. When I change the trigger to a class on the slide show other then ".flex-next" the function works. However, when it is set to .flex-next like it is below, it does not even register the trigger event.
I apologize if my explanation was a bit confusing, but I would be happy to answer any additional questions others may have. I am a straight up novice, so please do not judge.
HTML
HTML Overall layout
HTML coming directly from MetaSlider generated code
MetaSlider code
JQuery
JQuery Code that works for works properly with other classes, but not flex-next
I have created a page with a table widget which contains icon buttons that are connected to an edit page and a review page.
I would prevent App Maker from displaying the buttons permanently. The buttons should only be shown for a selected record. Is there a way to do this in CSS or do I have to add a hide/unhide script to the onclick-event of the record? I would also like to know how I can format the date in the record as dd/mm/yyyy.
You need to add the following built-in App Maker CSS class to the button:
visibleOnAncestorHover. You can reverse-engineer how the delete button is implemented:
Example: We have an employee list page, that consists of filter criteria form and employee list grid. One of the criteria you can filter by is manager. If the user wants to pick a manager to filter by, he uses the lookup control and popup window is opened, that also has filter criteria and employee list grid.
Now the problem is, that if the popup window is not an iframe, some of the popup elements will have same names and ids as the owner page. Duplicate ids cause Kendo UI to break as by default MVC wrapper generates script tags with $("#id").kendoThingie.
I have used iframe in the past, but content that does not fit in iframe window like long dropdown lists gets cut off and now IE11 especially causes various issues like https://connect.microsoft.com/IE/feedback/details/802251/script70-permission-denied-error-when-trying-to-access-old-document-from-reloaded-iframe.
What would be the best solution here? Generate unique ids for all elements on Razor pages? Modify partial page content that is retrieved by Ajax making ids unique? Something else?
It sounds like you are using a partial page as the content to a Kendo window. If this is the case then just provide your partial with a prefix like so at the top of the page.
#{
ViewData.TemplateInfo.HtmlFieldPrefix = "MyPrefix"
}
Now when you create a kendo control via the MVC wrapper like so
#(Html.Kendo().DropDownListFor(o => o.SomeProperty)
.....
)
The name attribute will be generated as "MyPrefix.SomeProperty" and the id attribute will be generated as "MyPrefix_SomeProperty". When accessing it within Jquery I like a shorter variable name so I usually do
string Prefix = ViewData.TemplateInfo.HtmlFieldPrefix
After setting the prefix. Then use
var val = $('##(Prefix)_SomeProperty').data('kendoDropDownList').value();
Note after this change. If you are posting a form from that partial you will need to add the following attribute to your model parameter on the controller method like so. So that binding happens correctly.
[HttpPost]
public ActionResult MyPartialModal([Bind(Prefix = "MyPrefix")] ModeViewModel model) {
.....
}
Now with all of that said. As long as you keep your prefixes different for each partial your control ids and names will be unique. To ensure this I usually make my prefix name be the same as my cshtml page that I am creating. You would just need to worry about JS function names. Also, note when closing a kendo window all DOM still exist. You just hide it. If this causes you the same issue you just need to be sure to clear the DOM of the modal on close. Similar to how BurnsBA mentioned. Note because of this is the reason why I try to make sure I use the least amount of kendo windows as possible and just reuse them via the refresh function pointing to a different URL.
$('#my-window').data('kendoWindow').refresh({
url: someUrlString
, data: {
someId: '#Model.MyId'
}
}).open().center();
Then on the modal page itself. When posting I do the following assuming nothing complicated needs to happen when posting.
var form = $('#my-form'); //Probably want this to be unique. What I do is provide a GUID on the view model
$('#my-window').data('kendoWindow').refresh({
url: form.attr('action')
, data: form.serialize()
, type: 'POST'
}).open().center();
We do something similar, and have the same problem. We have create/edit/delete popups that fetch data via ajax. Different viewmodels might reference the same model on the same page, and if you open multiple popups (create item type 1, create item type 2) then the second and subsequent popups can be broken (kendo ui error such that a dropdown is now just a plain textbox). Our solution is to delete all dom entries when the popup is closed so there are no conflicts between ids in different popups. We use bootstrap, so it looks like
<script type="text/javascript">
$('body').on(
// hook close even on bootstrap popup
'hidden.bs.modal', '.modal',
function () {
$(this).removeData('bs.modal');
$(this).find('.modal-content').html(''); // clear dom in popup
});
</script>
Note that our popup has some outer html elements and identifiers, but the content is all in
<div class="modal-content"> ... </div>
Just want to ask a simple question since I am new to angularjs and html5.
I have written a directive to check if user has permission for a certain thing. Permissions are all an array of strings. Using directive I am hiding or showing a UI element if user has permission for that. For example if user doesn't have permission for editing a user, I would hide the edit button with the help of directive as follows;
div that contains edit button
<div has-restriction="UserEditNotAllowed"><button>Edit User</button></div>
My question is instead of typing in string "UserEditNotAllowed", is there a way so that while typing it, using intellisence I can see permission strings that are available to avoid typos.
I tried adding these permission string in $rootScope but intellisense doesn't show that. I am using webstorm.
Thanks,
Imad.
Firstly you don't have to use your own directive for hiding stuff based on app logic. Instead you could use ng-show.
<div ng-show="userAllowed"><button>Edit user</button></div>
Then inside your controller, set $scope.userAllowed = true; whenever you want the button to become visible.
As for intellisense, that is an entire other question which should be aimed at webstorm.
I have an Angular model ng-model="car" I am trying to create a dropdown list, and would like the list items to be populated from objects in the model. I am trying to do this all in the HTML (since it is Angular).
Any thoughts?
If you want a form input: http://angular-ui.github.com/#/directives-select2
If you want a dropmenu: http://angular-ui.github.com/bootstrap/#/dropdownToggle
Checkout the dropmenu source code too to get an idea of how to go about doing it if you rather code up your own solution.
Essentially AngularJS makes it so easy that the ONLY thing you really need to do is toggle the visibility of a DOM element and use some fancy css.
Checkout this example of using pure AngularJS + AngularUI (when necessary) alongside Bootstrap's CSS to create dropmenus (and other widgets) http://plnkr.co/edit/gist:4464334?p=preview