Is there a way to set a button inside the dojo dialog box and have it close the dialog box it is residing in?
Putting dijits inside of dijits doesn't work, and I can't beleive there isn't a way to do that.
Sure you can put a dijit widget inside another widget. And in a standard Dojo release there's even a test case Dijit Dialog focus & destroy included that demonstrates closing dialog with a button inside of it. Here's the relevant part:
var btn = new dijit.form.Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
dojo.connect(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
Note, since Dojo 1.7 onwards, the connect module has been replaced with dojo/on. The equivalent of the above is therefore:
require(['dojo/on', 'dijit/form/Button'], function (on, Button) {
// etc
var btn = new Button({ label: "Close" });
dlg.containerNode.appendChild(btn.domNode);
on(btn, "onClick", function(){
console.log("destroying, while visible");
dlg.destroy();
});
});
Related
I want to capture which button is clicked in page load method of code behind file.
Button is user control button and It does not post back. Since it used by many other forms, I don't want to changes that button.
I tried this
Dim ButtonID As String = Request("btnRefresh.ID")
But it doesn't work.
Is it possible to know without touching in user control and using Javascript?
Thank you
As described here How to check whether ASP.NET button is clicked or not on page load:
The method: Request.Params.Get("__EVENTTARGET"); will work for
CheckBoxes, DropDownLists, LinkButtons, etc.. but this does not work
for Button controls such as Buttons and ImageButtons
But you have a workaround, first of all you have to define a hidden field in the Parent Page. In this field you will store which button inside the user control was clicked using javascript/jquery. And then in your Parent Page Page_Load method you just read the hiddenField.Value property:
JQuery
1) Add listener to every input type submit button:
$(document).ready(function () {
$("input[type=\"submit\"]").on("click", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
2) [Better one] Add listener to some indentificable div inside the user control and delegate the event to child inputs like this:
$(document).ready(function () {
$("#someElementOfUserControl").on("click", "input[type=\"submit\"]", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
Javascript
Since everything done with JQuery can be done with Javascript you can do the following (i will not write both samples, just one):
function handleClick(event) {
alert(event.target.name);
document.getElementById("hiddenField1").value = event.target.name;
}
var inputsInUC = document.getElementsByTagName('input');
for (i = 0; i < inputsInUC.length; i++) {
inputsInUC[i].addEventListener('click', handleClick, false);
}
Remember to define this javascript after all your html elements.
EDIT:
Also, for the completeness of the answer let me tell you that the proper way in case you can change the user control behaviour is to use events as described here How do i raise an event in a usercontrol and catch it in mainpage?
I am using jquery-ui modal with gridview to add/update records in an asp.net application. The user can click on the cross to close the modal? I want to clear the modal content (including any ViewState). So far I have used the following code:
$('#editData').dialog({
....
close: function () {
**// Here I want to clear the form**
}
You can just reset the form:
$('#formId').trigger("reset");
$('#editData').dialog({
....
close: function () {
// Here I want to clear the form
$('#formId').trigger("reset");
});
http://jsfiddle.net/pNALN/1/
You can also use document.forms["formId"].reset(); if you wanted to achieve it via JavasScript.
I have a bootstrap page that lists items in a table. Each item has its own delete link that launches the modal.
<a href="#modalDel" data-idtodelete="<?php echo $value->id; ?>" class="deletelink">
Delete this item
</a>
...
jQuery("a.deletelink").click(function(event){
var id2del = $(this).data('idtodelete');
jQuery("#myModalLabel").html("Delete item: "+id2del); //works great
jQuery('#modalDel').modal('show');
});
I can pass data to the modal easily, but now I have to make the main button in modal to reflect the dynamic url and call to it (only) when this button is clicked
Any ideas? Thanks
PS: cannot use the hidden event for this, because modal can also be hidden with the cancel button. Also, modal should be closed after/before calling the dyn. delete url of main button
I'll hazard a guess at this. Haven't tested because I'm not really sure about the setup.
var $ = jQuery; // using as a shortcut
$('#modalDel').on('show',
function() {
// Composes delete URL with arguments
var dynUrl = composeUrl(args);
// assuming the modal button is an anchor element
$('#modalButton').attr('href', dynUrl);
// Also closes the modal box after being clicked
$('#modalButton').on('click',
function(e) {
$('#modalDel').modal('hide');
});
});
How to disable/enable a button? which is not in a form , in a navBar. I'v tried some examples , all fail.
I'm changing my textarea text $("textarea").val(x); The text is changing , the problem it doesn't get auto re-size , I see the ugly scroll bar on the side , If I manually resize it , its OK... is there a method to force refresh or something like that?
Thanks
Update (TextArea):
If i click on the text area and then press any key -> it opens up as should be,
I'm trying to simulate it .. but fail , the binding is works , but the trigger for keypress/keydown doesn't , I tried some codes from googling, this should work , I think , mayb for nomral jQuery 1.6 , but not jQuery mobile.. My test are are on Chrome and iPhone 4
$('#textarea').bind('click', function() {
var e = jQuery.Event("keypress", { keyCode: 64 });
$(this).trigger( e );
});
UPDATE:
Link button example:
http://jsfiddle.net/gRLYQ/6/
http://jsfiddle.net/gRLYQ/7/ (Header button example)
JS
var clicked = false;
$('#myButton').click(function() {
if(clicked === false) {
$(this).addClass('ui-disabled');
clicked = true;
alert('Button is now disabled');
}
});
$('#enableButton').click(function() {
$('#myButton').removeClass('ui-disabled');
clicked = false;
});
HTML
<div data-role="page" id="home">
<div data-role="content">
Click button
Enable button
</div>
</div>
NOTE: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html
Links styled like buttons have all the same visual options as true
form-based buttons below, but there are a few important differences.
Link-based buttons aren't part of the button plugin and only just use
the underlying buttonMarkup plugin to generate the button styles so
the form button methods (enable, disable, refresh) aren't supported.
If you need to disable a link-based button (or any element), it's
possible to apply the disabled class ui-disabled yourself with
JavaScript to achieve the same effect.
Regarding your second question, you can cause a textarea to autogrow by triggering a keyup() event on it.
Considering your original example code, the following works for me:
/*Note: I'm using 'on' instead of 'bind', because that's what I've actually tested
with, but I'm pretty sure this will work with 'bind' as well*/
$('#textarea').on('click', function() {
//First we'll add some text to #textarea
$('#textarea').val('some dummy text to be added to the textarea');
//Then we trigger keyup(), which causes the textarea to grow to fit the text
$('#textarea').keyup();
});
Short and sweet version of the above, this time chained and with no comments:
$('#textarea').on('click', function() {
$(this).val('some dummy text to be added to the textarea').keyup();
});
Adapted from 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