I have a form page that opens a dialog in order to enter new information. I open the dialog in the "standard" jQM way:
Open dialog
What I need to do is pass back some of the values that were entered so that I can update the page with those values. How do I do that?
As an added bonus, I also really need to be able to submit the values. It seems like jQuery Mobile is setup close the page on any link click. This is an ASP.NET application, and so I need for the page to last long enough to hit the Button_Click() event in the code behind.
Here's the pieces you need:
Html in the dialog:
Cancel
Submit
In pagecreate:
$("#btnSave", pagediv).live('click', function () {
var s = page.Model;
s.serverName = $("#txtName", pagediv).val();
s.Save(function () {
$('.ui-dialog').dialog('close');
});
});
s.Save is a function that writes to the datastore, updates a global model object that is accessible to all pages, then calls the callback function.
In the pageshow handler for the parent page, update the controls from the model. You can't update the parent page directly from the dialog as the parent page may not exist at that point - if data-dom-cache isn't set, it will be removed as soon as the dialog is displayed and will not be recreated until you call close.
Related
I'm using telerik radgrid control with following layout:
I'm curious if anybody can provide general guidance in what approach I should take to reliably update user control that initiated popup window action?
On radWindow OnClientClose event you can write up javascript code to reload the user control which initiated the action.
I had a somewhat similar requirement sometime ago, where I needed to rebind the grid after closing the radWindow and used the onclientclose
function RefreshGrid() {
var masterTable = $find("<%= GRIDNAME.ClientID %>").get_masterTableView();
masterTable.rebind();
}
In any case, I suggest you to look into the javascript api on how to update the user control(depends on what you want to update on the user control).
So here is how I've solve the problem:
I created "hidden" button on each tab's user control that needs to be updated and passed in button client id when opening popup. this button client id is stored as java script variable and when user close modal rad window I execute code that simulate hidden button click:
$find(myStoredButtonClientIdJSVariable).click();
That in turns execute proper user control server side code and my grid is properly refreshed.
Hope somebody might have some benefits reading this.
I have a popup window where i store an a arraylist in sessionvariable, when clicking on closebutton (the X in the right top corner) or the cmd input button in the form i want to remove the sessionvariable containing my arraylist. How can i do this?
The popup window is currently closed by a javascript:
function cmdClose_onclick() {
self.close();
}
Session variables are stored on the server, so you need to inform the server that something happened on the client, and call an appropriate function to remove the session variable.
There are a couple ways you could do this.
You could make an AJAX request to a page, a page method or a custom HTTPHandler. If you write a custom .ashx file, you could simply make a request to it's URL and have it delete the session variable.
Make your page do a postback when you close the window. You can manually trigger postbacks by calling __doPostBack() in javascript, or just executing a button click or form submit.
I'd go with option #1 if you can.
I'd suggest getting the javascript to make an AJAX call to a WebMethod which clears the session variable.
I have a DIV in which I have a asp:repeater which, based on data, puts information in this div. I then use Jquery's UI dialog to display the data to the user via a button click. This all works swimmingly.
So, I want to be able to add records to the data which populates the repeater. I have another part of the screen where people can enter this data, and it is saved to the database using an ajax call. This, too, works swimmingly.
I then want to update the data on my dialog box, without having to do a full postback to the server. So, this is normally pretty easy. I put my div into an UpdatePanel, and from Jquery initiate a __doPostBack. which then refreshes the data, which too, works swimmingly up to a point.
Once the __doPostBack is complete, the div is no longer hidden. It is now displayed on my page (with the updated data mind you), but the javascript i use to show the dialog, now no longer works.
Some investigation shows that:
On initial load of the page, the javascript which tells jquery to create a dialog from a div takes the div from wherever it is on the form, and appends it to the body element.
When the update panel posts back, the div is recreated, but the javascript to turn it into a dialog either isn't executed again (which I can understand... we haven't done a full load of the page, so the javascript doesnt execute again.
This means that the div is no longer a 'dialog' but a simple div on my page, which is not what I want.
So, my questions are is:
Is there a way of injecting javascript aftr the updatepanels postback which will execute and create the dialog properly again?
The solution would be not to use Updatepanel at all and just change the innerHTML of the div with data received through a jquery ajax call.
I found another solution to this. I put the dialog initialization javascript in a separate function called SetupDialog instead of being inside the $(function () { }); block.
Then I used ScriptManager.RegisterStartupScript in Page_Load to register the script so that it runs every time the Update Panel updates:
ScriptManager.RegisterStartupScript(this, GetType(), "SetupDialog", "SetupDialog();", true);
In this case, the dialog will only work after the UpdatePanel has been updated. If you need the dialog before that, then you can call SetupDialog inside the $(function () { }); block as well.
I have a web service that validates some form data. The service is a ScriptService, and I am calling it from the client. I need to display a modal popup if the validation fails. If the user clicks "OK" on the modal popup, then I want to post back and save my data. "Cancel" should allow them to close the modal popup and let the user correct data, allowing one to resubmit. Currently, the modal popup displays every time regardless of the result of the validation.
I tried calling hide() and returning false, but neither worked.
I tried approaching this problem from a different perspective by assigning the TargetControlID property of the modalpopupextender to a hidden button and then calling show() on the modal popup if validation failed, but this did not cancel the postback. The modalpopup displays for approximately one second and the page posts back.
So you want to do something like:
function ValidateInput() {
MyScriptService.ValidateInput({however you are passing form data}, OnValidateComplete);
}
function OnValidateComplete(response) {
if ({response is bad}) {
$find('<%= ModalPopupExtender.ClientID %>').show();
}
}
You can then keep your TargetControlID, OnOkScript, etc. all the same. Perhaps with some code we can actually see what you are doing.
I have a table that is created in a DataList in ASP.Net. This table has three fields of text, then a field with an edit button, and a field with a delete button. When a person clicks the delete button, it posts back, deletes the items, and then binds the DataList again. The DataList is in an UpdatePanel so the item smoothly disappears after a half of a second or maybe a little more, but what I'd really like is for the row to slide out (up) as soon as they hit the delete button, and then have it delete the item on the post back.
I can make the row slide out with jQuery, but the postback gets in the way. How do you deal with that?
You can use page methods in asp.net to send a request to the server without doing a postback. They are very simple to use and you can do whatever effect you like when the ajax call is completed (you get a function called on success).
If you want to stick with the post back one solution is the following:
<asp:Button id="myButton" OnClientClick="return fadeThenAllowSubmit()" ... />
and in js something like:
var allowSubmit = false;
function fadeThenAllowSubmit() {
if (allowSubmit) return true
// do the jquery stuff that will be completed in, let's say, 1000ms
setTimeout(function() {
allowSubmit = true
$("input[id$=myButton]").click()
allowSubmit = false
}, 1000)
return false
}
It's a bit of a hack, the idea is to cancel the postback initially, do some stuff then set a timer where the postback will be enabled. The big problem with this approach is that the fade effect and the actual delete are independent (in case of an error you still get the fade effect).
have you tried looking at any of the Ajax control toolkit items? I believe there are some controls in there that will head with client side (java) code if your not extremely familiar
I would use client side Javascript to manually scale the "opacity" CSS property down to zero, then mark the element as "display: none" then submit the post-back.
I believe that in Internet Explorer, you need to use the "Filter" CSS property to do this as it does not support opacity.
You could just code up a routine to set both properties and that should cover all the major browsers.
Register the handler for form "submit" event.
$("form").submit(function() {
// if user initiated delete action
// do your thing with deleted row (effects, etc.)
// after you're done with it, submit the form from script
// (you can queue the submission after the effect)
// the submission from the script won't trigger this event handler
return false; // prevent submission
}
Preventing form submission is necessary to avoid interference with the effects you want to perform. After they are finished, you are free to proceed with submission.