Is it possible to refresh parent page from child's child page using javascript.
I have a webform which opens a child window, a button on child window closes the present child window and opens a subchild window. Now a button on subchild should close the window and refresh the parent form.
Please suggest me the way of doing it.
Thank You.
For button click event
Code in Parent Page
function fun()
{
window.open('Child.aspx');
return false;
}
Code in child page
function fun()
{
window.close();
window.open('SubChild.aspx');
return false;
}
Use following in your child window.
<script type="text/javascript">
function openwindow()
{
opener.document.location.reload(true);
}
</script>
EDITED
create two files
1] parent.html
<script type="text/javascript">
function openwindow(url)
{
window.open(url, "mywindow","location=1,status=1,scrollbars=1,resizable=no,width=650,height=650");
}
</script>
Open Child
2] child.html
<script type="text/javascript">
function openwindow()
{
opener.document.location.reload(true);
}
</SCRIPT>
Refresh Parent
EDITED LATEST
write a function in child1.html
function child1()
{
opener.document.location.reload(true);
}
call that function form child2.html as follows
function child2()
{
window.opener.child1();
}
Have you tried using these?
window.opener.reload();
window.opener.location.reload();
I think window.opener.opener.reload(); may work..
EDITED after seeing your code. The problem is you're opening the 2nd window from the 1st window and closing the 1st window so you have no reference back to the opener. You can instead call a method in your Parent window to open the 2nd window, that way the Parent is still your opener.
Parent.html
function openWindow(sURL){
window.open(sURL);
}
Child1.html
function fun(){
window.opener.openWindow('Child2.html');
window.close();
}
Child2.html
function fun(){
window.opener.location.reload(true);
}
Related
This is just a test of something I'm trying to accomplish here that is probably incredibly simple but is racking my brain. I've reviewed some of the closest matches already available here, but I wasn't able to make any of them work.
I'm trying to load content into a div using a button, like so:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() { $(".load-container").load("/test-1.html"); });
$(".load-second").click(function() { $(".load-container").load("/test-2.html"); });
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
</script>
And this actually works on the first try, but then, when "/test-1.html" loads, the next button doesn't work. This is what is in /test-1.html file:
This is the first one.<br>
<button class="load-second">Load Second</button>
Clicking the second button should load the next bit of content but it does nothing. Is the problem that the button is inside of the destination container div? I need a container div with buttons inside that can load new content in this way.
Because at the time the page is loaded, the "load-second" button was not there yet, thus the click() event was not registered to the button that is yet to come via the load() content, you need to attach your event after your buttons are created in the DOM, try the following:
<div class="load-container">
<button class="load-first">Load First</button>
</div>
<script type="text/javascript">
$(".load-first").click(function() {
$(".load-container").load("/test-1.html", function(){
// now load-second button is available, register the click handler
$(".load-second").click(function() {
$(".load-container").load("/test-2.html", function(){
// now load-third button is available, register the click handler
$(".load-third").click(function() { $(".load-container").load("/test-3.html"); });
});
});
});
});
</script>
I have a web application created in asp.net. In which, I would like to show a div (which is hidden initially) when a button is clicked with a css transition.
Additional Request:
The div that is shown on button click, will have some content added to it dynamically at run time.
How this can be done?
Here is a variation of the script from #geevee which I tend to use a lot, the DIV will slide up or down with a close and open option. Note the 500 is the speed of execution in milliseonds, you can change that to what ever suits you.
$(function(){
$('#BUTTON_ID').click(function(){
if ($('#DIV_ID').css('display') =='none')
{
$('#BUTTON_ID').html('Show DIV');
$('#DIV_ID').slideDown(500);
}
else
{
$('#BUTTON_ID').html('Hide DIV');
$('#DIV_ID').slideUp(500);
}
});//end .click
});//end onload
Hope this helps
Plain Javascript:
document.getElementById('BUTTON_ID').addEventListener('click', function(){
document.getElementById('DIV_ID').style.display = 'block';
})
Alternatively, with jQuery:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').show() });
});
replace BUTTON_ID and DIV_ID with real element IDs.
UPDATE:
if you want the div to be shown with transition, i'd recommend to use jQuery as following:
$(function(){
$('#BUTTON_ID').click(function(){ $('#DIV_ID').fadeIn() });
});
notice the .fadeIn() method, which can be replaced with .show(), .slideDown() and more. jQuery is fun.
UPDATE 2:
in order to inject dynamic content into the div, do as following:
$(function(){
$('#BUTTON_ID').click(function(){
$('#DIV_ID').html('<b>Hello, dynamic content!</b>');
$('#DIV_ID').fadeIn();
});
});
hope that helps.
After a postback, I want my page to have focus on a child control of a gridview, but scroll the page to a different part.
the standard myGridView.Focus(), called on the Page_Load or Page_prerender, insert a
WebForm_AutoFocus('myGridViewClientID');
in the rendered html.
This function move also the scroll not to the required position
Any suggestion?
my try: use some function injected by Asp.NET:
function FocusWithoutScroll(focusId) {
var targetControl;
if (__nonMSDOMBrowser) {
targetControl = document.getElementById(focusId);
}
else {
targetControl = document.all[focusId];
}
var focused = targetControl;
if (targetControl && (!WebForm_CanFocus(targetControl))) {
focused = WebForm_FindFirstFocusableChild(targetControl);
}
if (focused) {
try {
focused.focus();
}
catch (e) {
}
}
}
but in order to use this code, I have to include some .axd resource files: it seems ASP.NET automatically include them when you set
someControl.Focus();
in your server side code. but this in turn insert the
WebForm_AutoFocus('myGridViewClientID');
which scroll the page to the wrong position
There's a client-side method scrollIntoView that scrolls page till the element is visible. You can issue server-side command:
ClientScript.RegisterStartupScript(this.GetType(), "MyScript","document.getElementById('SecondElementID').scrollIntoView();", true);
Where 'SecondElementID' is id of the element you want to scroll to.
Demo: http://jsfiddle.net/v8455c79/ this demo shows how focus can be set on one element and page scrolled to another
I have a link which downloads a file on click. I wrote a function on onclick event of that link tag to do some ajax operations when it is clicked.
But the function is not getting called when we click on that link.
However, if i debug the code or place a alert box in that js function, it just works fine. what will be the cause for this?
My code:
HTML:
<a href="DllLocation.dll" onclick=fntrackdownloads() ></a>
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
}
Working code:
JS:
function fntrackdownloads() {
$.get("default.aspx?RT=1", Responsetrackdownloads);
alert("something");
}
Any help will be appreciated.
note: the anchor tag is generated dynamically from code behind and
written to dom. i am unaware of what dll location will come in href
attribute.
$(document).("click", "a.putaclass", function(e) {
//what to do on the click
var $a=$(this);
$.get(pathtoserver,function(d) {
alert('data received:'+d);
})
return false; //or e.preventDefault
});
It's probably because the default anchor behaviour interrupts your AJAX response.
Try to put return false at the end of the function that's called on click and see what happens.
I think you are missing the "quotes" here:
//--------------------------------^------------------^
or more in jQuery way:
$('a[href="DllLocation.dll"]').click(function(){
fntrackdownloads();
});
and
$('a[href="DllLocation.dll"]').click(fntrackdownloads);
);
I use a ASP.NET Menu control with Orientation=Horizontal. It is kind of irritating that the popout menus appear on mouseover, which causes it to show by accident if you move the mouse over the menu when you want to click on something right below the menu. Then the menu popout hides the element you actually wanted to click on!
Is it possible to change the functionality so that the popout requires a mouse click instead of mouseover?
Well, I found a solution myself (kind of a hack...).
This solution requires use of AJAX to capture the menu item onclick postback event, so it can be picked up client side in javascript before doing the actual postback when you click the menu item.
First, I override these functions that is defined by the Menu control
to ignore the menu popout in the mouseover event:
var activeMenuItem = null;
function Menu_HoverStatic(item) {
// Register the active item to be able to access it from AJAX
// initialize postback event
activeMenuItem = item
// Apply the style formatting on mouseover (colors etc).
// This was also called in the original Menu_HoverStatic function.
Menu_HoverRoot(item);
}
function Menu_Unhover(item) {
activeMenuItem = null; // This is the only difference to the original
var node = (item.tagName.toLowerCase() == "td") ?
item:
item.cells[0];
var nodeTable = WebForm_GetElementByTagName(node, "table");
if (nodeTable.hoverClass) {
WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass);
}
node = nodeTable.rows[0].cells[0].childNodes[0];
if (node.hoverHyperLinkClass) {
WebForm_RemoveClassName(node, node.hoverHyperLinkClass);
}
Menu_Collapse(node);
}
// Then I added a renamed copy of the original `Menu_HoverStatic` function:
function Menu_ClickStatic() {
// Pick up the active menu item that is set in the
// overridden Menu_HoverStatic function.
// In the original, the item was input parameter.
var item = activeMenuItem;
// The rest is identical to the original Menu_HoverStatic.
var node = Menu_HoverRoot(item);
var data = Menu_GetData(item);
if (!data) return;
__disappearAfter = data.disappearAfter;
Menu_Expand(node, data.horizontalOffset, data.verticalOffset);
}
Then I snap up the onclick postback event in AJAX that is triggered by the menu. This must be done to cancel the onclick postback and display the menu popout instead.
// Get the Page Request Manager that provides all the .NET
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Register postback event for asyncronous AJAX postbacks
if (prm) prm.add_initializeRequest(InitializePostback);
function InitializePostback(sender, args) {
var element = args.get_postBackElement();
//Check if the postback element is the menu
if (element.id == 'myMenu') {
// Name of the menu element that triggered is the postback argument
var postbackArguments = document.getElementById('__EVENTARGUMENT');
if (postbackArguments)
// Check on the menu item name to pick up only the menu items that shall
// trigger the popout (not the items that does an actual command).
if (postbackArguments.value == 'MenuTopItem1'
|| postbackArguments.value == 'MenuTopItem2'
|| postbackArguments.value == 'MenuTopItem3') {
// Abort and cancel the postback
prm.abortPostBack();
args.set_cancel(true);
Menu_ClickStatic(); // Call my own copy of the original function
return;
}
}
}
Note:
I found out the details about these functions by using the script viewer in Firebug.
The soluton provided above doesn't work in everone's case. One can also try this out, it worked in my solution-
var jq = jQuery.noConflict();
jq(document).ready(function () {
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
jq(document).on('click', '#ctl_id_Here', function () {
Menu_HoverStatic(this);
Menu_HoverRoot(this);
});
});
3 Steps:
Stop the current hovering effects:
On page load (or on ready), write following line: $('#Menu1').find('ul .level2').css('display','none');
Once you do that, it'll stop the hovering effect of that menu. But once you do that, then you would only be able to open the submenu by making it display block, so for that I wrote following lines, onclick of an image inside the menu: $('#Menu1').find('ul .level2').css('display','block');
Open the menu on click of an element: I don't think need to explain it. Just make menu display block on click of the identified element.
Close the opened menu: 2 ways to do it: First; Use property Disapperafter as below:
Second: Write below code to close it onclick of anywhere else on the screen:
$('body').click(function(evnt) {
if($(evnt.target).parents('table#menu').length == 0)
{
$('#MenuInvitePatient').find('ul .level2').css('display','none');
return;
}
else
{
return;
}
});