Hi Tiago Simões

I am creating a popup window using AJAX, It(popupwindow) is having one textbox.After user entering the value in textbox im storing the value in database, and in codebehind of popup window page im writing javascript code to close popup window autometically.Upto here it's working fine.The problem is after closing popup window the parent window is reloading to get the newly created value( im displaying that newly created value in dropdowlist).so user lost the entire data what he entered in parent window before he opening popup window.Im using opener.location() method to reload parent window.That's why it is reloading entire parent window is there any way to reload only dropdownlist...?

Any help plz......?
Thanks,
Aswath.

Hello Aswath,

I see three possibilities:
First:
There's a way to refresh the page using AJAX, although it's not the simplest one. Try searching our community for AJAX and you'll find some samples.

Second: (I'm assuming you're using OS v4.0.X or higher)
If refreshing the page, without AJAX, is not a problem then you could do the following.
Put a button in your web screen and associate it with an empty screen action. Give that button a name! In the extended properties define a style rule with 'display: none;' so that your button is invisible. Also don't forget to disable validations for this button.
Now put in your web screen a non escaped expression with:

"<script>

function refreshPage() {

   document.getElementById('" + buttonName.Id + "').click();
}

</script>"

You can just copy and paste this and replace the buttonName variable by the name you gave to your button. This will refresh your page without loosing user input. Now all you have to do is invoke this function from your popup window.

Third: (and I think that the better solution)
You can use DOM manipulation to change the combobox. What you'll have to do is:

• Give a name to the drop down widget
• Pass the Id of this widget (name.Id) to the web screen of the popup window as an input parameter
• Use this Id to build your javascript, something like

  window.opener.document.getElementById('" + name.Id + "').innerHTML += 
  
  '<OPTION value=""<<your new value here>>""><<your new description here>></option>';
  

I hope this helps you to continue. If you need more help, please tell us.
Cheers,
André

HI André Vieira,
Still i have some doubts in your Answer.In popup window im using the following code Code:<JS>
Response.Write("<Script language='JavaScript' type='text/javascript'>opener.location='Company.aspx?id=" + s_id + "';self.close(); </Script>")

Here 'Company.aspx' is Parent window.And 's_id' is newly created value.Now after closing popup window opener.location() method autometically reloads parent window.so user lost data.

And comming to ur answer(3rd),where i need to put the code(javascript) in popup window page or in parent window...?

Im passing dropdown id to popup window and in popup window im writing the following code to close
Response.Write("<Script language='JavaScript' type='text/javascript'>self.close(); </Script>")

Now im retriving the new value in parent window with same of ur code.but im getting empty value.I don't know how to use properly.plz tell me the steps.
Thanks,
Aswath.

Hi Aswath,

I'm getting more intrigued with your questions. In order to give you a better answer I ask you, if you can, to post here the oml file where you're working on. It can even be a striped-down version of it as long as it has all the things related with this issue.

What's puzzling me more is the ASP like syntax: 'Response.Write(...'. Where really are you using this?
You know that, using OutSystems Service Studio you do not need to know a single line of ASP or ASP.NET!
Cheers,
André

Hi all!

As far as I understood, you don't want to refresh the parent page, you just want to update the contents of the dropdown list. You can do this either by fetching the whole page again or by manipulating the DOM object that represents the dropdown control.

I believe the simplest way to be the first one. You can fetch the page without losing all the data that the user already entered in the form if instead of reloading the page (using the "location" property) you submit the form without actually doing anything with the submitted data. You can accomplish this by creating a button with a style that has "display: none", or inside a container with such a style. You could set the button to invoke an action that would do nothing. If the screen preparation updates the list on the dropdown box, then you could use the created button's "click()" method to update the screen. By invoking the click() method, the form is submitted to the server but nothing is done with the data (the action is empty), the user is sent to the same page without having the form's data cleared and with the dropdown list updated.


The other alternative is rather more complicated, specially if you don't already have some experience with javascript and ajax. It may also be harder to debug, but the visual effect (of not refetching the whole page) may justify the additional effort. If you want to use AJAX, you can create a page that only contains the dropdown box and have your javascript to fetch it in background and replace the pages' dropdown box contents with the fetched one. If you only have one dropdown box on both documents, that could be accomplished with something like this:

function updateDropdown() {
var xmldoc;
try { xmldoc = new XMLHttpRequest(); }
catch(e) {
xmldoc = new ActiveXObject(Microsoft.XMLHTTP);
}
xmldoc.onreadystatechange = function() {
if(xmldoc.readyState == 4) {
if(xmldoc.status == 200) {
// get node from the fetched document
var clone = xmldoc.responseXML.getElementsByTagName('select').item(0).cloneNode(true);
// get node from the main document
var p = document.getElementsByTagName('select').item(0).parentNode;
// replace the dropdown in the main document with the one from the fetched document
p.replaceChild(document.getElementsByTagName('select').item(0), clone);
}
}
}
// don't forget to replace this relative URL with the location of the page that only has the dropdown box.
xmldoc.open(GET, "/yourESpace/yourPage.aspx", true);
xmldoc.send(null);
}

I didn't test this code, but with some modifications to fit your particular webscreens it should be quite suitable for the job. I'd recommend however googling for AJAX tutorials and the W3C recommendations for the DOM model, should you chose this latter alternative.