Develop Reference

How to use Popover inside a Angularjs function

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/>

select asp.net grid view row on jquery dialog box and populate on text fields on parent form

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.

Clear all option select entries by clicking radio button [duplicate]

This question already has an answer here:
Reset values from jQuery Mobile
(1 answer)
Closed 8 years ago.
I've been trying all day to figure this out, and it seems simple enough, but how can I clear (not remove) all the selections from a group of select option drop downs at once? I want them set back to their default state when the div was first loaded. I can't use .reset because there will be other information in the form that I need to gather, but I need to allow users to change their minds without penalty (having to fill the form out all over again).
This SO question shows you how to remove the options which isn't what I need.
This SO question seemed to give the answer, but I haven't been able to get it to work.
And this jQuery bug entry seems to imply that it can be done with .empty(), but that doesn't work either.
This SO question lists a bunch of different ways to do exactly what I want, and I've tried all of them (see code below), none worked. I'm obviously missing something.
Here's a JSfiddle with the problem.
How to view the problem in the fiddle:
At Repair Status, click on Repaired; two new inputs are shown, a set of radio buttons and then select-option drop downs for each. Under Category, choose Part Quality, then choose any item from the drop down. That choice should now show up in the drop down. Now click on any one of the other Categories, and then back to Part Quality. The same choice you just made will still be shown instead of the default of "Select Part Quality Reason", which is what I want.
My attempts have focused largely on the Part Quality radio button for proof of concept, but the production code needs to clear all of the entries from all of the option-selects in the form except the Reporting Department drop down. Preferably I can use a generic selection with a $(this) construct, but that's not required. Something like this:
$("select option:selected").each(function () {
$(this).val(''); //doesn't work
});
Requirements:
When the user chooses a different radio button (Category), all of the option select drop downs will be reset to their default states. That way when the user makes their final choice & hits Submit, there are no extraneous entries. When they change their choice of Category, the underlying code must preserve the Reporting Department drop down choice.
I can then gather all the bits and pieces of their choices to be placed into a JSON string for an AJAX call to my code-behind and insert the data into a MySQL database.
I don't care if the answer uses jQuery or just plain JavaScript, I can use either happily.
Here's a bunch of attempts that haven't solved it yet:
$("#formEvent_repair input[type='radio']").on('change', function () {
//$("#select_part_quality_repair option:selected").attr("selected", false);
//$("#select_part_quality_repair").find('[selected]').removeAttr("selected");
//$('#select_part_quality_repair').attr('selectedIndex', '-1');
//$('#select_part_quality_repair').val(null);
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//$("select option:selected").val([]);
//$("select option:selected").html('');
//$("select_part_quality_repair").html('');
$("select_part_quality_repair").append().html('');
$("select option:selected").each(function () {
console.log("Emptying select options");
$("#select_part_quality_repair").find('option:first').attr('selected','selected');
//#select_part_quality_repair-button > span
//$("#select_part_quality_repair").prop('selectedIndex', -1);
//$("#select_part_quality_repair").find('option').attr("selected", false);
//$("#select_part_quality_repair option").attr("selected", false);
$("#select_part_quality_repair option:selected").attr("selected", false);
console.log(this);
$(this).val([]);
});

Because you are using jquery mobile you need to issue a refresh command to the elemnt that you change.
$('#select_part_quality_repair').val('').selectmenu('refresh');
This will deselect any option and then refresh the layout to show the change..
For radio buttons you set in code use
$(<radio-button-selector>).checkboxradio("refresh");

You clear a dropdown selection like this:
$("#select_part_quality_repair").val("");
That will clear the selection without removing the members.
Also, this line in your code is improperly formed:
$("select_part_quality_repair").append().html('');
You forgot to put the "#" before the element ID, as is required by JQuery. That line won't help you anyway, so you should not even bother with it.
Cheers,
-=Cameron

Unchecked all radio button
$(".clear").click(function(){
$('input:radio').each(function () {
$(this).removeAttr("checked");
});
});
EDIT 2 :
Unselected all options
$(".clear").click(function(){
$('select').each(function () {
$(this).removeAttr("selected");
});
});

Get validation to work in form where fields have been removed

I'm gonna try to keep this one as simple as possible, sorry if it's messy..
I've built (don't ask why) a custom validation for a form on a wordpress site with jQuery/JS.
The generall idea is I have an array with ID's of input fields that it should check. So the list goes:
toValidate=new Array();
toValidate[0]="#name";
toValidate[1]="#location";
toValidate[2]="#method";
and it loops them with $.each(toValidate) and then if they're empty gives a popup and does some other stuff like add red borders to the fields. Now all of this works fine. But I have another problem. I have a couple of fields that are always required, but I also have a checkbox, when they check it, a TR is supposed to be removed, that TR has a couple of fields in it that are required IF visible.
Now the problem is that even if I click the checkbox, hence remove the TR, I can't get it to work so that the required fields of that remove TR are no longer required. I've tried multiple ways but keep getting different problems depending on what solution I try.
What I've tried for an example is to change the array so that if they check the box, it removes a couple of the array objects (those that are in the row that is removed). But it doesn't work, it just acts as if they're still there.
Sorry for making this long but what I'm trying to ask is what would be best practice to do here? What would YOU do? I don't want code, just a general idea of how I should plan it this as I'm stuck..
Edit: I forgot to mention, my way with the array may be a worthless idea too, so any ideas on how to improve it and make it work are appreciated.

Rather than adding/removing visibility in javascript, do it in css. It'll simplify your selectors when validating.
css:
table tr.ignore {
visibility: hidden;
}
javascript:
$('input.hide_thing').click(function() {
$('tr.whatever_tr').toggleClass('ignore', !$(this).checked)
});
validator:
$('tr:not(.ignore)').validate();

You could preface your validation by checking if the element is visible.
$.each(toValidate, function(index, element) {
if (!$(element).is(':visible')) return;
// ... proceed to validate
});

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.

// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..

The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.

You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps