i have one group of radiobutton:
<div id="id1">
<input id="pack1" type="radio" class="pack" name="pack" value="OK" />OK
<input id="pack2" type="radio" class="pack" name="pack" value="NG" />NG
</div>
i want if the radiobutton which id="pack2" is checked,the jquery-ui modal form dialog will appear.i have tried like this but doesn't work:
$("#pack2").click(function(){
$("#mydialog").dialog('open');
});
The jQuery dialog widget has an 'auto-open' option, that is true by default.
So you don't need to call the 'open' method. Just do:
$("#pack2").click(function(){
$("#mydialog").dialog();
});
(By calling open like you have, you're calling a function on a dialog that hasn't been properly constructed.)
If you want to reuse the dialog, call .dialog on your dialog div in your document ready handler:
$(document).ready(function() {
$('#mydialog').dialog({
autoOpen: false
});
// ...
});
Then you can open it as you have done.
Reference here
Related
I'm using bootstrap 3 to create a modal box. I want to have it autofocus on the input area. I tried with jQuery, but I don't know, what is the problem?
JavaScript:
$('#click').click(function () {
$('input').focus()
});
Here is a demo on JSFiddle
I've updated your JSFiddle. When using the bootstrap modal window there are a number of custom events you can use. one of those is shown.bs.modal wich runs after a modal is fully shown (and your input field is focusable). Remember that the event will be triggered on the modal, not on whatever opened the modal.
$('#myModal').on('shown.bs.modal', function () {
$('input').focus();
})
This may be hard code but add a Timeout function to focus it.
The fact is the modal isn't here yet so the browser can't focus an element in it.
$('#click').click(function() {
setTimeout(function(){
$('input').focus()
},500);
});
I am also use this code
<script>
function setFocusOnModal(){
$('#searchModal').on('shown.bs.modal', function () {
$('#q').focus();
});
}
</script>
Where #searchModal is modal div ID and #q is input element ID
Use this code in button
<button type="button" onclick="setFocusOnModal()">Open Modal</button>
I currently have a button that when pushed, opens up a text box. I want to do it so that the focus is automatically on this text box when the button is pushed.
I have the following HTML to render the button and input, and toggle between the button/input
{{#if modeIs 'edit' }}
<input class="col-xs-9" placeholder="Enter your new task and press enter" id="insertTask" type="text"/>
{{else}}
<button id="btnNewTask" class="btn btn-success btn-lg" role="button">New Task</button>
{{/if}}
Helper function to check the mode.
Template.insertNewTask.helpers({
modeIs: function (modeToCheck) {
return Session.equals('mode', modeToCheck);
}
});
This is the code I would like to use when the button is clicked to change the mode and focus on the input.
'click #btnNewTask': function (event, template) {
Session.set('mode', 'edit');
var input = $(template.find('#insertTask'));
if(input){
input.focus();
}
},
The bit to change the 'mode' works and the button changes to a text box when I click on it.
My problem is this query $(template.find('#insertTask')); returns nothing because although I've set the mode, it hasn't re-rendered the HTML yet and the text box doesn't actually exist yet.
Is there a way that when I set the mode to 'edit', to tell Meteor to just immediately re-render the HTML before proceeding with the rest of the function? Is there a better way to structure my code so that I can reference HTML components that don't exist until after Meteor re-renders the HTML?
Use the rendered hook:
Template.insertNewTask.rendered = function() {
var $input = $("#insertTask");
if (Session.equals('mode', 'edit')) $input.focus()
}
You could set another flag somewhere to indicate when you want to focus the input (eg. if you don't always want to focus it after rendering the edit view, just after clicking the button).
I am facing this issue where I manage to disable button but somehow the function didn't run. I suspect that the function stops right after my button is disabled. Any idea that can solve this issue when user click on the button, the button will be disable immediately and the button will runs the function behind. Below are the codes that I'm using for my button.
<INPUT TYPE ="Submit" NAME ="Submit1" ID = "Submit1" VALUE ="Create New Sales Contract"
SIZE ="30" onclick="**this.disabled=true;*** CheckGWidth(this.form),
this.form.ContractType.value='N'*" >
Note:
this.disabled=true; To disable this button
CheckGWidth(this.form),this.form.ContractType.value='N'
This is a function that will process this page'
Disabling a button won't stop the rest of the code from firing. I suspect there is something else going on.
This works using document.getElementById instead of this.form:
<form id="form1" action="" method="post">
<INPUT TYPE ="submit" NAME ="Submit1" ID = "Submit1" VALUE ="Create New Sales Contract" SIZE ="30" onclick="this.disabled=true;CheckGWidth(this.form);document.getElementById('ContractType').value='N';return false;" />
<INPUT TYPE="text" NAME="ContractType" ID="ContractType" />
</form>
<script>
function CheckGWidth(f){
alert("This works");
}
</script>
JS Fiddle Demo
Use Firebug or Chrome or Developer Tools and check your javascript issues...
I need to give a custom alert to the user when the user places the cursor in a textbox item in asp.net. How do I go about doing this?
Please help.
<input type="text" onfocus="alert('Got focus!');"/>
or a bit more involved:
<script>
function InputFocus()
{
var inp = document.getElementById('myInput');
inp.onfocus = null;
alert('Got focus - ' + inp.id);
setTimeout(function() { inp.onfocus = InputFocus; }, 100);
}
</script>
<input type="text" value="one"/>
<input id="myInput" type="text" onfocus="InputFocus();" value="two"/>
<input type="text" value="three"/>
Javascript on focus event.
On Page_Load or Page_Init method add this code:
mytextBox.Attributes.Add("onfocus", "enterTextBox();")
Then on the page add a script tag with this :
function enterTextBox() {
alert('hello');
}
the two events that you need are onfocus (elemant has focus and can accept input) and onblur which gets fired when leaving the element (say a text box). Disabled elements cannot have focus so these events will not occur in that case.
I want to find out which input opened the dialog.
$('#dialog').dialog({
autoOpen: false,
open: function (event, ui) {
// find the opening button here?
},
buttons: {
"Save": function () {
// if button "Add" opened dialog
// do something...
// if button "Edit" opened dialog
// do something...
},
Cancel: function () {
$(this).dialog("close");
}
}
});
<form id="myForm">
<input id="Add" type="button" value="Add" />
<input id="Edit" type="button" value="Edit" />
</form>
During debugging, set a breakpoint on the modal dialog code. When it is reached, the stack trace should show you what input triggered it. If during production use, instrument your code that calls the modal dialog to store a string representing the calling context in some convenient persistent place (as a new 'window' property, for example). Then the modal dialog can fetch the calling context. I doubt that jquery itself can do this.