Updating a page from another page without refreshing the page - asp.net

I have two web pages written in VisualBasic.Net:
Upload.aspx
Default.aspx
There is a link in the Default page that opens Upload page in a different window.
In the Upload window I upload a file, and I want to display the name of this file in a textbox, which in turn is in a gridview on the Default page.
I think I want an asyncronous process that won't cause the Default page to refresh, but I don't know how to do this.

I created a very simple example for you. Here is the code of the first page (your Default.aspx let's say):
<html>
<head>
<script>
function ow() {
window.open('w2.html');
}
function update(updatestr) {
document.getElementById('update').innerHTML = updatestr;
}
</script>
</head>
<body>
open window
<div id="update"></div>
</body>
</html>
This page contains a link, which opens a new window (this will be your Upload.aspx page). It also contains a simple function called update, which puts a parameter value as a div html content.
This is code of a second page (your Upload.aspx like):
<html>
<head>
<script>
function update() {
window.opener.update(document.getElementById('txt').value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="button" value="Update" onclick="update()"/>
</body>
</html>
This page contains a textbox and a button. After a button click, the content of the textbox will appear in a div on the first page. You can do something similar in your case.
I've put a working demo for you.

Related

How to get the text from an link on the master page?

I have a master page with a few links on it, not asp:Hyperlinks, just normal tags. The links are on a menu bar that runs along the top of the page.
Then on the child page, when I click a button, I want to be able to get the value of a specific link on the menu bar at the top of the screen on the code behind page.
Does anyone know if I can do this, and if so, how?
I'm using .net web forms.
You can use jQuery to access elements within the master page.
<script>
$(document).ready(function () {
//Some function for someID on your master page:
$("#someID").toggle();
});
</script>
Since the master page and child pages are rendered before the (document).ready method completes, it ensures that all elements built onto the final page are visible.
Placing the above script into your child page will allow you to access elements in the master page file.
You will just need to ensure you have a jQuery link/reference:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
EDIT #1:
For getting the text off the master page into the code-behind of the child page you can do this (add hidden field to child page):
<asp:HiddenField ID="hdField" Value="SomeValue" runat="server" />
<script>
$(document).ready(function () {
//Some function for someID on your master page:
$("#hdField").value = ("#IDofLinkOnMasterPage").Value;
});
</script>
Then when your form posts to the child code-behind, you can look for the value of the hidden field by doing this:
var x = hdField.Value.ToString();

Browser tab information for image created by servlet

I'm using a servlet to show images on page. The links looks like
http://webappname.com/getImage?p=imagename.jpg
But the resulting image in the browser tab shows
getImage (100x200)
I would like to output there more useful information like string, so how can I do it?
As the response is an image, it cannot contain additional information (such as the page title) as an HTML response could. One possible workaround to this would be to return a simple HMTL page with your image in it.
You could trigger then trigger the regular download (the existing behaviour) with an additional URL parameter. So for example:
http://webappname.com/getImage?p=imagename.jpg
Would return this HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="img-dl-style.css">
<script type="application/javascript">
// JavaScript to trigger image download when #dlButton is clicked
</script>
<title>Full Image Name</title>
</head>
<body>
<div class="container">
<h1>Full Image Name</h1>
<img src="http://webappname.com/getImage?p=imagename.jpg&dl=1>
<button id="dlButton" type="button">Download this image</button>
</div>
</body>
</html>
Any direct access to this URL:
http://webappname.com/getImage?p=imagename.jpg&dl=1
Would return the image directly, complete with the default browser title.
To see this in action, take a look at Dropbox's shared file viewer. A link such as:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx
Returns a full webpage with a preview of the shared file and a download button. Clicking the button triggers the download with this URL:
https://www.dropbox.com/s/qmocfrco2t0d28o/Fluffbeast.docx?dl=1

Masterpage and Masterpage in jQuery UI Dialog giving same ID

Background:
I have a main Masterpage that I use on all the pages of my website, certain pages in the website launch jQuery UI modal dialogs that in turn load other webforms that have their own special Modal MasterPage.
Directory Structure:
/
/templates/Main.master
/templates/Modal.master
/htmlmodals/popup.aspx
/main.aspx
The Problem:
there appear to be two problems. Firstly when I complete any action within the Modal Masterpage that causes a postback, the (popup.aspx) page attempts to try and look within the directory of the file that called the modal, so I end up with an error like
Description: HTTP 404. The resource you are looking for ...blah blah blah...
Requested URL: /popup.aspx
Another issue that I have just found, is that the generated source code form main.aspx shows that I have two form fields with exactly the same ID, even though I specified the Modal to have a different one.
<form name="aspnetForm" method="post" action="main.aspx" id="aspnetForm">
...
</form>
<div id="modal-holder">
<form name="aspnetForm" method="post" action="popup.aspx" id="aspnetForm">
...
</form>
</div>
Query:
Do I need to specify a <html><head></head><body>... etc in the Modal.master file? I ask because the pages load exactly how I want them to (including processing of code behind), with the exception of postbacks, just using the following code:
Modal.master
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="modal.master.vb" Inherits="--REMOVED IDENTIFIER--.Web.Site.modal" %>
<form id="modalForm" runat="server">
<div>
<div class="alert-box" id="error-area--modal">
<p></p>
<div class="error-content"></div>
<div class="error-synopsis"></div>
<div class="validity-summary-container">
<ul></ul>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<script>
initialiseEvents();
</script>
</form>
A typical modal would be launched using the following jQuery code
$('#<%= btnPopup.ClientID %>').click(function(e){
e.preventDefault();
dHeight = ($(window).height()) * 0.95;
baseDialog.dialog('option',{title:'Edit', width:'95%', height:dHeight, open:function (e, ui) {$('#modal-holder').load('/htmlmodals/popup.aspx');}}).dialog('open');
});
Update : Adding the relevant html/head/body tags to the modal master does NOT fix the postback/duplicate ID issue
Update 2 : Added an update panel around the part of the popup.aspx that posts back, doesn't appear to have worked either, still trying to do a normal postback to /popup.aspx
This SO question when-i-load-an-aspx-page-using-jquery appears to be very similar to my own question, so the answer looks like i'll have to write a javascript method to update my page instead of posting back.

dijit.form.DateTextBox is not visible when the page is loaded

When my page is loaded I cannot see calendar:
When I click on the birthday field of the form it appears, but it does not look as I expect:
The code I use to display in jsp file:
<label for="birthday">Birthday<br/> </label>
<sf:input path="birthday" id="birthday"
pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}"/><br/>
<script type="text/javascript">
Spring.addDecoration(new Spring.ElementDecoration({
elementId:"birthday",
widgetType:"dijit.form.DateTextBox",
widgetAttrs:{ datePattern:"dd-MM-yyyy", required:true }}));
</script>
So my questions are:
How to make calendar always visible as soon as the form is loaded?
How can I manage with its css, so I could set backgournd and other properties via css file? If it is not possible, then via JavaScript params.
Thanks.
In order the calendar works I had to set the following css class to the html body element:
<body class="tundra">
It helped.

iFrame source can not be retrieved

<iframe id="myFrame" runat="server" name="main" width="100%" src="http://www.somewebpage.com/" />
This is simple iFrame I put on my webpage. After I click on couple of buttons on that website, iframe source remains the same. But I want to be able to retrieve the changed source every time I click on buttons, links etc...
How can I achieve this?
Edit: This is the screenshot of my work. When I click on "Git" button, webpage loads on the iFrame. However, when I surf on the website, I want textbox to be updated to the source of the iFrame.
Ok, here is an idea that I test it now and its work. You change the input box after the iframe loads using the onload event of the iframe
<script>
function HasChange(me)
{
document.getElementById("WhereIamId").value =
document.getElementById("WhatIShowID").src;
return false;
}
</script>
and the html
<input type="text" id="WhereIamId" value="" />
<iframe src="page1.aspx" onload="return HasChange(this);" id="WhatIShowID" ></iframe>
You can use also the document.getElementById("<%=myFrame.ClientID>") to get the rendered id. After your iframe loads you update the text box with the current url.

Resources