Currently i have my project which works this way
Keep Filling a form
Click on a button new window popups
fill data in popupwindow and submit
Popup window closes and data on that window is saved to database
Continue filling parent form and save the data
Now i want to replace the pop-up window with jQuery UI Dialog and perform the same operations
(Step 2 3 4)
Here some code
$( "#rtrDialog" ).dialog({
autoOpen: false,
height: 300,
modal: true,
width: 350,
buttons: {
"Continue..": function() {
alert("Button Clicked");
var url = "contractDetails.htm";
window.open(url, '_blank');
}
}
});
$("#RTRButton").click(function(){
$("#rtrDialog" ).dialog("open");
});
<!-- This form is used to capture the RTR related Dialogs -->
<div id="rtrDialog" title="Enter RTR Details">
<form>
<fieldset>
<p><b>Enter Details for ?</b></p>
<input type="radio" name="entity" value="applicant"/>Applicant<br/>
<input type="radio" name="entity" value="co-app1"/>Co-Applicant 1<br/>
<input type="radio" name="entity" value="co-app2" />Co-Applicant 2<br/>
<input type="radio" name="entity" value="co-app3" />Co-Applicant 3<br/>
<input type="radio" name="entity" value="guarantor1" />Guarantor 1<br/>
<input type="radio" name="entity" value="guarantor2" />Guarantor 2<br/>
<input type="radio" name="entity" value="guarantor3" />Guarantor 3<br/>
</fieldset>
</form>
</div>
How can i go about doing that ??
Do i have to do the jQuery-Ajax way ? Or is there anything better to do this
Use twitter bootstrap for opening the dialog box and perform your action..
http://getbootstrap.com/2.3.2/javascript.html#modals
check this..
Hope this will help ..
Related
I have a hidden form in a dialog which I want to submit automatically.
HTML Code :
<form #formVal method="POST" [action]="urlvalue">
<p *ngFor="let item of redirectData.RedirectData.Form.Parameter;
let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</p>
</ form>
`
In my previous angular 1.5 code I was doing
$timeout(() => {
angular.element('#3DSForm').submit();
}, 100);
and it was working but here in Angular 6 I tried using ViewChild in ngAfteronInit but still no luck I am getting error for native element, I even used ngNoform in my HTML but didn't work out.
#ViewChild('formVal') form: ElementRef;
setTimeout(() => {
this.form.nativeElement.submit();
}, 200);
Kindly suggest what am I missing
You probably have some element called submit.
Example:
<input type="hidden" name="submit">
Rename it to something else, e.g btnSubmit.
You should call click event for submit button like this,
<form #formVal method="POST" [action]="urlvalue">
<div *ngFor="let item of redirectData.RedirectData.Form.Parameter; let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</div>
<input type="hidden" name="submit" #submitBtn>
</ form>
in ts file
#ViewChild('submitBtn') submitBtn: ElementRef;
submitForm() {
this.submitBtn.nativeElement.click();
}
after that call the submitForm() function from where you want to submit the function.
I was able to achieve it using HTMLFormElement.
<form ngNoForm name="myForm" id="myForm" [action]="urlvalue" method="POST">
<button type="submit" class="test" style="visibility: hidden;"></button>
</form>
This code in the component.
const form: HTMLFormElement = document.getElementById('myForm');
form.submit();
Using jquerymobile 1.4.5
I have a series of radio buttons
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Condition (handles etc.):</legend>
<input name="radio-choice-h-28" id="radio-choice-h-28a" value="1" type="radio">
<label for="radio-choice-h-28a">Satisfactory</label>
<input name="radio-choice-h-28" id="radio-choice-h-28b" value="2" type="radio">
<label for="radio-choice-h-28b">Unsatisfactory</label>
<input name="radio-choice-h-28" id="radio-choice-h-28c" value="0" type="radio">
<label for="radio-choice-h-28c">Not Applicable</label>
</fieldset>
and two buttons
<form>
<input id="set" data-inline="true" value="Save" type="button">
<input id="reset" data-inline="true" value="Reset" type="button">
</form>
The events are attached in the document ready area
<script type="text/javascript">
$(document).ready(function () {
$("#set").click(function() {
$('#radio-choice-h-28a').attr("checked", true).checkboxradio("refresh");
$("input[type='radio']").checkboxradio("refresh");
$('#radio-choice-h-28a').checkboxradio("refresh");
});
$("#reset").click(function () {
$("input[type='radio']").attr("checked", false).checkboxradio("refresh");
$("input[type='radio']").checkboxradio("refresh");
});
});
</script>
I can set the value of the radio the first time through, and reset all the radio buttons the first time through.
When i click the set button the second time, nothing happens.
the second click of the reset also does not fire after the first click.
firebug does not show any error messages, but the breakpoint is hit each time the buttons are clicked (both set and reset)
What am i missing?
Found it....
I changed the attr to prop and now it works...
$("#radio-choice-h-28a").prop("checked", true).checkboxradio("refresh");
try using
$(document).on('click', "#set", function(){
});
Instead of
$("#set").click(function() { });
I am using two groups of radio buttons
Group 1:
State
City
Group 2:
A-C
D-H
I-M
N-R
S-Z
When I toggle between state and city, I want A-C from group 2 to be set to checked while the others are set to unchecked.
I have it working in this fiddle here fiddle
HTML:
<div id="sort-radio">
<input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
<input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
<label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
<label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
<label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
<label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
<label for="S-Z">S-Z</label>
</div>
JavaScript:
$(function () {
$("#sort-radio").buttonset();
});
$(function () {
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
document.getElementById("byState").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
document.getElementById("byCity").addEventListener("click", function () {
document.getElementById("A-C").checked = true;
document.getElementById("D-H").checked = false;
document.getElementById("I-M").checked = false;
document.getElementById("N-R").checked = false;
document.getElementById("S-Z").checked = false;
}, false);
However, when I use this exact code in my website, it does not work (it leaves the previously selected button from group 2 selected). I am using jquery-ui-1.10.1.custom.css which displays the radio buttons nicely, as found here: jquery ui button.
Any clue why this would affect it? When I remove the line <link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" /> from my index.php, it works beautifully.
A few problems:
The button widget works by responding to click events on the radio button's label. This means that the click event you are listening to on the radio buttons themselves won't get fired, since you actually aren't clicking the radio buttons themselves, but their labels. You can work around this by using the change event.
You need to call .buttonset('refresh') after manually updating the checked state of a radio button.
Just setting the checked attribute on one radio button in a group is enough to make the rest become unchecked automatically. You shouldn't need to set the checked property on each one.
You should put your event handlers inside the document.ready handler as well. You can also just use one instead of two.
With all of those things in mind, here are the changes I would make:
$(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
document.getElementById("byState").addEventListener("change", function () {
document.getElementById("A-C").checked = true;
$("#alphabet-radio").buttonset("refresh");
}, false);
document.getElementById("byCity").addEventListener("change", function () {
document.getElementById("A-C").checked = true;
$("#alphabet-radio").buttonset("refresh");
}, false);
});
Example: http://jsfiddle.net/Fzq8L/2/
Since you are using jQuery, you can simplify this a great deal by adding a class to the radio buttons - of which only one can be "set" SO listen to the change event on those. Remove the extra function at the start, pick one of the "array" of buttons to click from the second group. (since only one can be picked)
Simpler version markup :
<div id="sort-radio">
<input type="radio" class="picker" id="byState" name="sort-radio" checked='true'
/>
<label for="byState">By State</label>
<input type="radio" class="picker" id="byCity" name="sort-radio"
/>
<label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
<input type="radio" class="secondgroup" id="A-C" name="alphabet-radio"
checked='true' />
<label for="A-C">A-C</label>
<input type="radio" class="secondgroup" id="D-H" name="alphabet-radio"
/>
<label for="D-H">D-H</label>
<input type="radio" class="secondgroup" id="I-M" name="alphabet-radio"
/>
<label for="I-M">I-M</label>
<input type="radio" class="secondgroup" id="N-R" name="alphabet-radio"
/>
<label for="N-R">N-R</label>
<input type="radio" class="secondgroup" id="S-Z" name="alphabet-radio"
/>
<label for="S-Z">S-Z</label>
</div>
Code:
$(document).ready(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
$('.secondgroup').eq($('.picker').index(this)).prop("checked", true);
$('#alphabet-radio').buttonset('refresh');
});
Working example:http://jsfiddle.net/MarkSchultheiss/8x28x/2/
Set back second group, first to item when either of first group is changed:
$(document).ready(function () {
$("#sort-radio").buttonset();
$("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
$('.secondgroup').eq(0).prop("checked", true);
$("#alphabet-radio").buttonset("refresh");
});
Fiddle for that: http://jsfiddle.net/MarkSchultheiss/8x28x/3/
I tried this code to achieve what I want to do. It worked when I tried it in my ordinary HTML file, but when I tried it in my JQuery Mobile page, the code did not work well for me. Are there different ways or code to select JQuery Mobile checkboxes?
Here's the code that I tried:
JAVASCRIPT:
<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
HTML
<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears
</label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff
</label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore
</label>
<br>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">
I was not aware that JQuery Mobile's checkboxes need to be refreshed after unchecking/checking them via JQuery or Javascript. Here's the code:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
http://api.jquerymobile.com/checkboxradio/#method-refresh
Try this:
function SetAllCheckBoxes(FormName, CheckValue){
$.each($("#"+FormName+" input[type=checkbox]"), function(){
$(this).attr("checked",CheckValue).checkboxradio("refresh");
});
}
I removed the FieldName because your function was named SetAllCheckBoxes, just your input fields are the same. You just need tell what's your form and the state of your checkboxes.
To toggle / refresh checkboxes in jquery mobile you need to use .prop, rather than .attr.
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
Gidday
Just learning the jquery UI, and have made some really good progress today, but have got stumped when figuring out how to get the ID of the selected button in a buttonset before the form is submitted.
I know how to make the AJAX POST work once I get the ID of the selected button.
How is the first part done?
Here's my jquery:
$( "#pi" ).buttonset();
$( "#req1" ).dialog({
resizable: false,
height:350,
minWidth: 310,
modal: true,
buttons: {
"Send request": function() {
//what goes here to retrieve the ID of the selected button?
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
And my form...
<div id="req1" title="make your selection:">
<form>
<div id="pi">
<input type="radio" id="p1" name="pi" /><label for="p1">3</label>
<input type="radio" id="p2" name="pi" /><label for="p2">2</label>
<input type="radio" id="p3" name="pi" /><label for="p3">1</label>
<input type="radio" id="p4" name="pi" checked="checked" /><label for="p4">0</label>
<input type="radio" id="p5" name="pi" /><label for="p5">1</label>
<input type="radio" id="p6" name="pi" /><label for="p6">2</label>
<input type="radio" id="p7" name="pi" /><label for="p7">3</label>
</div>
Thanks for your time and help.
Try this:
var id = $('#pi input[name=pi]:checked').attr('id');