My problem is pretty weird and unique. I will do my best to explain my situation here.
I have a form validation. Once user fills form and selects add button, it allows to add for first 6 times. After 6th submission, the add button is disabled and user is not allowed to add any further.
Here is the add button function
$scope.addItem = function () {
$scope.items.push($scope.activeItem);
if ($scope.items.length > 6) {
$scope.disableAdd = true
// here is the code below where i want to insert my popover function.
}
}
Can anyone please let me know how to insert a popover like this at run time. Please note: i dont want to show a popover straight away as the page loads and user selects the button. I want to show it only after User has submitted 6 forms. The number of times the user submitted is shown in $scope.items.length
I just want to display something back to the user that he cannot add any more. I tried using a modal but i thought popover would be much better. Any suggestions are welcome.....
There's a ton of ways to do this. If your popover exists statically in the dom, you could just trigger it with the same scope boolean you're using to disable the button with the ng-if directive:
<div class="popover" ng-if="disabledAdd">No more forms allowed<div/>
Related
Hi I have a button that inserts empty records into an interactive grid. I want to prevent the user from being able to double click that button because it populates duplicate rows. I have a server side argument that says if there are rows the button does not appear however they are still able to double click the Populate_tables button before it vanishes. If there are any other solutions to this please sound off. I've tried everything from javascript to server-side but they are still able to double click no matter what. Here are the before and after pictures of the table.
$('#btnPopulateTbl').dblclick(function(e){
e.preventDefault();
});
The above code prevents the double click for a button. This is in jQuery.
Oracle Apex does not offer this functionality as a setting or etc.
However you can use
$('#button').click(function(event) {
if(!event.detail || event.detail == 1){
// This will be executed once even user clicks multiple times
}
});
Note that your selector must be the id or the class you provide to this button.
By default 'add row' button's classes are:
class="a-Button a-Toolbar-item js-actionButton"
Another solution would be to have apex handle this. Suppose this is on page 1.
Create a page item P1_POPULATE_ROWS_CLICKED with a default value of 'N'
In the page process that populates the table, add the following line before the actual load:
:P1_POPULATE_ROWS_CLICKED := 'Y';
Add a condition to the page process that populates the table of "Item not equal to value", P1_POPULATE_ROWS_CLICKED , Y
Yet another solution is to only execute the insert statement if no rows exist with that condition yet. I can't show you how to do it because you didn't show how the table is populated but happy to do so if you edit your question. This last option is propably the most suitable.
I am looking for a way, to swap the layout of my site between to options.
I got this form right now that I use:
form(action="/xxx" method="post")
.row
.col-lg-2.col-md-2.col-sm-4.col-xs-8
.input-group
select.form-control.text-center(name="selectOptionVat")
each taxRate in taxRates
option.text-center= taxRate
span.input-group-btn
button.btn.btn-success(type="submit") #{getText('Submit')}
The form is used to update everything in a table.
I want to add another form that gets visible once the user clicks one radio button in the table, and then also hides this form. So swap between the two of them :-)
I know I could do this in many ways, but if it is possible, I have various reasons that I really want to do it only through Jade/pug :-)
Also, if the user deselect all radio buttons again, the original form should be shown again, and the other one hidden once again - but I suppose I can implement this myself, in case anyone got any hints of how to solve this.
I solved the issue by using JavaScript (and jQuery) as suggested. The solution is not so short as I hoped, but here it is, in case it helps anyone else.
https://jsfiddle.net/ushdo9cu/
$('body').on('mouseup', 'input[type="radio"]', function () {
var radio = $(this);
uncheck_radio_before_click(radio); });
I have been stuck in somewhere around validating the form. I have a nice 10-11 fields in
my .cshtml page in MVC. Those fields are using data anotations from model and here I
am using client side validations using jquery and unobtrusive javascript. So, validations
are firing up very good on submit but we need to implement a logic where a user will click on the
submit button but the page will automatically drags the user to the location of mandatory field.
Assume that all 11 fields in my form are mandatory. user has filled the first two and
left the third blank .So on submitting the form, the cursor should focus to that control
with the validation message.Due to the length of the page, it should be scrolling up and down
accordingly. And if suppose only first two fields are filled and others are empty,
the validation message should show the 3rd field with the focus on control and then
if user filled the 3rd field and hit save, it should focus to the fourth field.
On one instance it looks easy and I am trying it with following code snippet on click of submit button.
AS this is the class which mvc uses when validation fires, I select element from the first class like below:
var element = $('#' + $('.input-validation-error:first').attr('id'));
once I get the element then I am using the below code:
if (element.selector !== '#undefined') {
// The class "RequiredFeildDropdown" is applied to the control so that I can
check if that is kendo dropdown and I should focus to that kendo control of the element.
if (element.hasClass("RequiredFeildDropdown")) {
element.data("kendoDatePicker").element.focus();
}
// This class "RequiredFeildDate" has been applied to check whether the kendo control is datepicker
so that I can focus it.
else if (element.hasClass("RequiredFeildDate")) {
element.data("kendoDropDownList").focus();
}
// So here comes the real problem.The primaryaddressData contains the collection
of objects. Actually my page also consists of some table elements that i have created using for loop.
So, while validating , if primaryaddressData.length have count < 1, this div should show.Actually there should
be atleast one primary address. The div which have table elemets is "primaryaddressErrorMessage"
else {
if (primaryaddressData.length >= 1) {
$("#primaryaddressErrorMessage").hide();
} else {
$("#primaryaddressErrorMessage").show();
$('html,body').animate({
scrollTop: $("#primaryaddressErrorMessage").offset().top
}, 'slow');
isValid = false;
}
element.focus();
To make more clear of the second portion,My page also has a div called "primaryaddressErrorMessage" which I have described above
<div class="common-box padding25 ">
<span id="primaryaddressErrorMessage" class="margin-btm30" style="display: none; color: #ce3a36; font-size: 11px; font-family: 'signikaregular', Arial">Primary Addressed are required.</span>
#{Html.RenderPartial("~/Areas/Admin/Views/Common/_AddressPartial.cshtml", Model);}
</div>
So, This partialview has a set of controls which user uses to add primary address.
When this partial view loads, by using ajax request, I check from database
If this user has atleast one primary address,If yes, I keep its count it
"primaryaddressData"=1 and so when user submits a new primary address,
after an post request to controller, I get the primary address count from
database and again set "primaryaddressData"= count that I get from database through Json.
As this "primaryaddressData" is global, when user hits save from the main page i.e from the main
view which was containing the above partialview, I check the length of
"primaryaddressData" and if is having less than one, I will have to focus to
this span having id="primaryaddressErrorMessage"
I am going very hard through this. There might be someone who has also faced this problem in past. So, it could be a duplicate question but I asked it for this particular scenario. Please let me know if some more explanation is required.
I have an asp.net page that contains gridview. It has one or more record. If a user choose a row, it will close jquery dialog modal and populate parent form
I have attached the sample. It does not look nice, but it is easier for me to create in word than try to prototype on ASP.NET
Once user click the button (pick this one), let's say first one, id (1) and name (a) will be populated on the parent page
I have researched many websites. Most websites have helpful hints if there is a static button. When a user click the button, something happen. However, the griview is constructed dynamically, so are the buttons. Obvious, binding the button on jquery dialog box model will not work.
What is the best approach to handle this
Thank you
Why wont Jquery work? I'm sure the buttons have an id or name..
`$('#tableID tbody').on("click", "tr td:nth-child(1) a", function () {
var $row = $(this).closest("tr");
var ID = $row.find('$row td:nth-child(2) label').val();
$.get("/Home/MyModal/" +ID, function (data) {
$("#modalDiv").html(data);
$("#modal").modal('show');
});
});`
In the example I make a call to the mvc controller which returns a partial view loaded with the modal data. That html data returned from the controller is then passed to a div with an ID of 'modalDiv'. Then I open the modal using modal.show event.
Not sure if this is what you were looking for but this will load a modal with the information
I did a lot research. I ended using postmessage method.
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
I really don't like this solution. I am doing research on security risk related to postmessage. if anyone has better, let me know.
Here is the algorithm
1) Once the user clicks one of the links/buttons (remember they can be multiple rows), save the current row information in the hidden fields
2) call javascript to postmessage (see the link)
3) in the parent listen to the event (see the link)
4) assign the hidden fields to the various text fields on the parent form
5) oh reference the fields in iframe is little bit tricky. Luckily, someone on the internet shows me this trick
http://codedisplay.com/jquery-to-get-set-read-access-iframe-content-textbox-value-data-using-asp-net-c-vb-net/
6) close jquery dialog box
My original plan was creating some kind of events on dialog box during the creation to do all the work. I am hoping people here can help me that.
At least i figure out the solution. I just need to address the security issue.
I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks
If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.