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.
Related
QUESTION ANSWERED HERE -- Needed to check for load-success.bs.table to wait for the table to fully load
wait till bootstrapTable is fully loaded before doing something
I have a weird problem with Bootstrap-Table. I'm rendering it as follows, and then I need to attach some jQuery handlers to the generated fields.
function createTable(){
$('#myTable').bootstrapTable('refresh', {
url: 'loadRequests'
});
// After the construction of the Bootstrap-Table, the dynamically-rendered fields (e.g. checkboxes) are now available
// Attach a handler to de-select the 'All' checkbox at the top if an individual checkbox is unchecked
$('.requestor_checkbox').on('click', function(e) {
if (!$(this).is(':checked')) {
//de-select the All checkbox at the top
$('#ckbCheckAll').prop('checked', false);
}
});
}
One of the fields generated by the Bootstrap-Table (via Data-Formatter) is checkboxes with the CSS style 'requestor_checkbox'. It happens here, note the data-formatter that will output individual checkboxes; and the header will have the 'All' checkbox:
<th class="numeric" data-formatter="checkboxFormatter">
<input type="checkbox" name="ckbCheckAll" id="ckbCheckAll" class="btn btn-primary" value="Select all">
</th>
JS handler for Data-Formatter
function checkboxFormatter(id, row, index) {
return '<input type="checkbox" class="requestor_checkbox checkBoxClass" value="' + row.id + '">';
}
As you can see in the top section of the code, I need to attach a jQuery event handler to the just-generated checkboxes. The weird thing is, there is a delay, and the checkboxes aren't found.
But if I set my event binder to execute 1 seconds later after a timeout, then it does work. The following works:
// 1. Render Bootstrap-Table
$('#myTable').bootstrapTable('refresh', {
url: 'loaRequests?requestId=' + requestId
});
// 2. 1-SEC DELAY: After the construction of the Bootstrap-Table, the dynamically-rendered fields (e.g. checkboxes) are now available
// Attach a handler to de-select the 'All' checkbox at the top if an individual checkbox is unchecked
setTimeout(function (){
$('.requestor_checkbox').on('click', function(e) {
if (!$(this).is(':checked')) {
//de-select the All checkbox at the top
$('#ckbCheckAll').prop('checked', false);
}
});
}, 1000);
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 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 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
Having this div:
<div id="advSearchDialog" style="visibility:hidden;">
<xx:search ID="searchUC" runat="server" />
</div>
And a button:
<input type="button" id="btnAdvSearch" value="Search" />
I turn it into a jQuery dialog, where the button opens the dialog:
$(document).ready(function() {
$('#advSearchDialog').dialog({
autoOpen: false,
height: 500,
width: 600,
modal: true,
bgiframe: true,
title: 'Avanceret søgning',
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
$('#btnAdvSearch').click(function() {
$('#advSearchDialog').css('visibility', 'visible');
$('#advSearchDialog').dialog('open');
});
});
Using ASP.NET, I get a problem.
If I push some other button on the ASP.NET page (inside an update panel), and after that clicks the btnAdvSearch button, nothing happens. Why is that?
Thanks in advance
maybe the partial page refresh removes your click event, hard to say without seeing the whole page.
the solutions to that problem would be using jquery live events
http://docs.jquery.com/Events/live
hth
Check the emitted HTML using firebug or somthing similar and you will probably notice that your button is no longer inside the form tags and is at the end of the body tag.
In you're OK button callback you can use something like
dialogBox.appendTo($('#FormIdHere'));
dialogBox is a variable set as so
var dialogBox = $('#DialogDiv').dialog({ autoOpen: false });
This should add your button back into the form.
EDIT:
Here is a code snippet I've recently used (all the code below is fired within an onload function but reasonPostBack must be declared outside the onload function)
var button = $('input.rejectButton');
reasonPostBack = button.attr('onclick');
button.removeAttr('onclick');
var dialogBox = $('#ReasonDiv').dialog({ autoOpen: false, title: 'Please enter a reason', modal: true, bgiframe: true, buttons: { "Ok": function() {
if ($('input.reasonTextBox').val().length > 0) {
$(this).dialog('close');
dialogBox.appendTo($('#theform'));
reasonPostBack();
}
else
{
alert('You must enter a reason for rejection');
}
}
}
});
button.click(function() {
dialogBox.dialog('open');
return false;
});
First i take a reference to the .Net postback with
var reasonPostBack = button.attr('onclick');
and hold it for later then strip the click event from the button to stop the post back ocurring "automatically". I then build the dialog box and add an anonymous function for the OK button, this runs my code to test if there is anything in a text box, if there isn't it simply alerts the user otherwise it;
Closes the div
$(this).dialog('close');
Adds the div back inside the form tags ready for the post back
dialogBox.appendTo($('#theform'));
and then calls the original postback
reasonPostBack();
Finally the last bit of code
button.click(function() {
dialogBox.dialog('open');
return false;
});
adds our own event handler to the .Net button to open the dialog that was instantiated earlier.
HTH
OneSHOT