So I have a jQuery repeater form and it works perfectly fine when I use it as it is but I want to tweak the delete button effect. It has "slideup" jQuery effect but I want to change it my own effect so I have tried few methods but I haven't able to delete the items in the form.
Below is my code and methods I have tried.
form.html
<form role="form" action="//" method="post" class="mt-repeater form-horizontal">
<div data-repeater-list="group-a">
<div class="mt-repeater-input">
<label>Organization</label>
<input type="text">
</div>
<div class="mt-repeater-input">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete inp-del">
<i class="fa fa-close"></i> Delete</a>
</div>
</div>
<div style="border-bottom: 1px solid #ddd;padding-bottom: 10px;">
<a href="javascript:;" data-repeater-create class="btn btn-success mt-repeater-add uadd_btn">
<i class="fa fa-plus"></i> Add</a>
</div>
<input type="submit" class="u-submit" value="Save Changes" />
</form>
Actual form-repeater.min.js
var FormRepeater=function(){return{init:function(){$(".mt-repeater").each(function(){$(this).repeater({show:function(){$(this).slideDown(),$(".date-picker").datepicker({rtl:App.isRTL(),orientation:"left",autoclose:!0})},hide:function(e){$(this.slideUp(e)},ready:function(e){}})})}}}();jQuery(document).ready(function(){FormRepeater.init()});
The above JS works fine because I haven't tweaked anything inside the JS code. But in below code I tweaked as per my requirement as you can see I changed $(this.slideUp(e) to $(this).css("background","red"). So the effect works fine but it doesn't delete the item. How can I achieve my requirements using below code?
Tried form-repeater.min.js
var FormRepeater=function(){return{init:function(){$(".mt-repeater").each(function(){$(this).repeater({show:function(){$(this).slideDown(),$(".date-picker").datepicker({rtl:App.isRTL(),orientation:"left",autoclose:!0})},hide:function(e){$(this).css("background","red")},ready:function(e){}})})}}}();jQuery(document).ready(function(){FormRepeater.init()});
Related
I have a group of 2~3 buttons inside one flex, is there a way to announce to the user that the buttons are grouped and specify which button is focused?
Example: I have 3 buttons - "Cancel" - "Modify" - "Confirm". I want it to be announced as "Cancel button 1 of 3", not necessary on this order.
PS: Avoid changing the buttons aria-label and role.
<div id="flxButtons">
<div id="wrapper">
<input id="btnCancel" type="button" role="button" value="CANCEL">
</div>
<div id="wrapper">
<input id="btnModify" type="button" role="button" value="MODIFY">
</div>
<div id="wrapper">
<input id="btnNext" type="button" role="button" value="NEXT">
</div>
</div>
One might be tempted to use aria-setsize and aria-posinset on the buttons but those attributes are only valid on listitems and treeitems, so you can't do this:
<input id="btnCancel" type="button" role="button" value="CANCEL" aria-posinset="1" aria-setsize="3">
However, you could add list semantics to the <div> around each button (or use a real <ul>), but that doesn't guarantee you'll hear "X of Y" on each button because that's up to the screen reader and user settings. See focus not going to listitems in browse mode nvda for details.
<div id="flxButtons" role="list" aria-label="my group of buttons">
<div id="wrapper" role="listitem">
<input id="btnCancel" type="button" role="button" value="CANCEL">
</div>
<div id="wrapper" role="listitem">
<input id="btnModify" type="button" role="button" value="MODIFY">
</div>
<div id="wrapper" role="listitem">
<input id="btnNext" type="button" role="button" value="NEXT">
</div>
</div>
As far as the grouping itself, in the example above, specifying role="list" on the outer container will give you a grouping. If you don't want to use lists, you can use role="region" and specify an aria-label.
<div id="flxButtons" role="region" aria-label="my group of buttons">
If you always want to force "X of Y" to be announced, regardless of the users screen reader settings, you'd have to literally add that text. You could either make that text part of the button label (but not visible) or you could associate the text with the button's descrption. The latter might be slightly better since you didn't want to change the button's label. However, it's a little messy to do so with the current ARIA spec because you only have aria-describedby, which requires the ID of the element that has the description, so you have to create a new DOM element that has the description.
In ARIA 1.3, there will be an aria-description which takes a literal string so it'll be easier when that spec is approved.
So in the current ARIA spec, using aria-describedby, you could have something like this:
<div style="display:none">
<div id="desc1">1 of 3</div>
<div id="desc2">2 of 3</div>
<div id="desc3">3 of 3</div>
</div>
<div id="flxButtons" role="region" aria-label="my group of buttons">
<div id="wrapper">
<input id="btnCancel" type="button" role="button" value="CANCEL" aria-describedby="desc1">
</div>
<div id="wrapper">
<input id="btnModify" type="button" role="button" value="MODIFY" aria-describedby="desc2">
</div>
<div id="wrapper">
<input id="btnNext" type="button" role="button" value="NEXT" aria-describedby="desc3">
</div>
</div>
Hi guys how would you click this link/Button I cant get any method to work, i have tried:
$('btn btn-large btn-info btn-embossed').children('a').click();
$('visit-trigger').trigger('click');
document.querySelector("visit-trigger").click();
I have tried all the names and class I could find not only the : visit-trigger class.
Website if you want to try your self
<div class="expandable ng-scope" ng-include="entryMethodView(entry_method)">
<form class="entry_details compact-box form-compact ng-pristine ng-valid ng-scope" name="entryDetailsForm">
<div class="form-compact__content center">
<div class="form-compact__part">
<p>Click here to ensure you are subscribed:</p>
</div>
<div class="form-compact__part">
<p class="visit-trigger">
<a class="btn btn-large btn-info btn-embossed" ng-href="https://youtube.com/user/videochumstube?sub_confirmation=1" rel="noopener" target="_blank" href="https://youtube.com/user/videochumstube?sub_confirmation=1">
<i class="fa fa-youtube"></i>
Subscribe here
</a>
</p>
</div>
</div>
visit-trigger is a class so use class selector
$('.visit-trigger').trigger('click');
//-^-------here
or
$('.btn-embossed').click(); // to fire the click event of `a`
Anyways most important part is use proper selectors. . for class, # for ids and so on.
I have a unique situation. I have a dropdown called caseStatus (see code below) and it is actually being written out during an ng-repeat, but it is tied to a model that contains the list of Case Statuses. Obviously there are multiple of these dropdowns on the page once it is rendered. All of that works just fine. The issue is that the judge can change the status of the case. I am working on a function that will handle that and I am confident it will work. My question is how to do the following two things (which are perhaps both solved with one method I suspect):
Make sure that each dropdown maintains its last value when a page is refreshed or returned to.
Make sure that it loads to what was last there during the ng-repeat. There is a field in the model that the ng-repeat is using that has the value for the Case Status.
Here is the code. There is a comment that says which dropdown is in question:
<div ng-controller="CaseListCtrl">
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
>>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-change="getCalendar();">
<option ng-repeat="department in departments">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div>
<div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases | orderBy: ['sequence', 'AmPm', 'Sched_Time', 'Case_Number']">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
<!-- Add hidden field to hold the CalendarID value for updating the sequence later-->
<input type="hidden" name="CalendarID_{{case.Case_Number}}" value="{{case.CalendarID}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case_Number}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
<select class="form-control" id="caseStatus" name="caseStatus" ng-model="caseStatus.statusID" ng-change="setStatus();" ng-options="castStatus.statusName for caseStatus in castStatus track by caseStatus.statusName" required></select><!-- This is the dropdown in question-->
{{case.Case_Title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.Sched_Time}} {{case.AmPm}}</div>
<div class="hearing-title">{{case.Event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
</div>
How do I accomplish this?
Are you developing a SPA (single page application)? What do you mean by "page is refreshed or returned to"? If you are reloading the whole page, then there is no way to retrieve the last values, as the controllers will reinitialize. You'll have to save the values somewhere, e.g. database or cookie, and retrieve them from a service that is injected into your controller...
In my application I've got different views which use the same piece of code. So, I put this piece of code in a file called sharedFile, all the variables and function have the same name, I checked twice.
This piece of code enables the display of a filter-box where the user can pick some filters, apply them and then the different filters applied are displayed. Everything works weel, HTTP request and so on, the only concern is that I have a "clear" button which enables to delete all the filters in one shot but actually when I click on it, filters are not in the URL anymore (that is what I want) but they are still displayed.
I share this file between 2 HTML files, and actually one works perfectly but the other one doesn't work only when the previous page visited was the first that works...
Any ideas or suggestions?
Thanks !
I put my code in case it can help :)
<!-- Enables the user to choose which filter he wants to be applied -->
<div ng-show=" show.filterBox" >
<div>
<strong>QUEUES</strong>
</div>
<span ng-repeat='queue in queues'>
<button href="" class="btn btn-sm marginButton btn-default" ng-click="onAddQueueFilter(queue.id.toString())" ng-hide="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-record"></span>
</button>
<button href="" class="btn btn-sm marginButton btn-primary text-muted" ng-click="onRemoveQueueFilter(queue.id.toString(), true)" ng-show="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-ok"></span>
</button>
</span>
<div>
<strong>TICKET TYPES</strong>
</div>
<span ng-repeat='type in types'>
<button href="" class="btn btn-sm marginButton btn-default" ng-click="onAddTypeFilter(type.id.toString())" ng-hide="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-record"></span>
</button>
<button href="" class="btn btn-sm marginButton btn-primary text-muted" ng-click="onRemoveTypeFilter(type.id.toString(), true)" ng-show="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-ok"></span>
</button>
</span>
<div>
<button class="btn btn-sm btn-success" ng-click="applyFilterBox()">Apply</button> - <a href='' ng-click='openCloseFilterBox()'>cancel</a>
</div>
<div ng-show="!show.filterBox ">
<div ng-show="routeParams.queue_id">
<!-- indicate that the list is queue list when status and queue list are shown -->
<span ng-show="routeParams.type_id" class="text-muted">queue:</span>
<span class="label label-primary label-status-id small-margin-top" ng-repeat="queue in queues" ng-show="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-remove"
style='font-size:0.7em; cursor:pointer'
ng-click='onRemoveQueueFilter(queue.id.toString(), false)'/>
</span>
<span ng-hide="!routeParams.queue_id" class='small-margin-top'>
-
clear
</span>
</div>
<div ng-show="routeParams.type_id">
<span ng-show="routeParams.queue_id" class="text-muted">type:</span>
<span class="label label-info label-status-id small-margin-top" ng-repeat="type in types" ng-show="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-remove"
style='font-size:0.7em; cursor:pointer'
ng-click='onRemoveTypeFilter(type.id.toString(), false)'/>
</span>
<span ng-hide="!routeParams.type_id" class='small-margin-top'>
-
clear
</span>
</div>
Here's the link: http://mindmup.github.io/bootstrap-wysiwyg/. I can't get it to work. I've included the script like that:
<script src="js/bootstrap-wysiwyg.js"></script>
And done like this:
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn" type="button">Add</button>
</div>
<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
</div>
<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Go ahead…
</div>
And it still doesn't show the editor. It shows the buttons and that things, but the editor isn't shown. I'm really now to using JavaScript and those things, if anyone could explain it a bit deeply, I would be grateful.
Also, on Chrome developer tools console, I get this error:
Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-wysiwyg.js:17
here's line 17:
$.fn.cleanHtml = function () {
You need the bootstrap library also, which also requires the jQuery library, add those both in head tags of your html. (first jQuery, then boostrap.js, then wsiwyg).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
You should include also index.css in the head section of your HTML file. Like so:
<link href="path_to_your_css_files/index.css" rel="stylesheet">
You can copy its content from here
I know this is an old thread, but hopefully it may help someone coming upon it years later like myself with other issues.
Anyway, I was encountering the same problems, and here's what I did:
The Cannot read property 'fn' was due to the browser being unable to
locate the jquery script, as I had it referenced in a block at the
bottom of my base.html file vs the <head>. I'm certain there's an
optimal way to handle your scripts across templates without placing
them in the <head> of the base.html and incurring a performance hit,
but i'm just starting out so I'm not sure what that may be.
Regarding what to do with $('#editor').wysiwyg(); - you place this
in a script tag at the bottom of the html file that houses your
"#editor" div.
The reason its just a "box" is that they lightly touch on needing to
add a toolbar, but don't provide the entire code for it. However,
you can harvest it from the demo page if you inspect it. As of this
post it should start with something like the following:
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
...
</div>