Develop Reference

Html.ActionLink: popup(custom), then redirect

I want to show popup when person clicks on button(which is already done with Html.ActionLink - older code; popup only shows if session variable equals some value...this part is alredy figured out) and is then redirected or new view is returned(this is done in controller).
I have Html.ActionLink(<button name>, <controller>, <action>) and out of that with help of other answers here I made Html.ActionLink(<button name>, <controller>, <action>, null, new { onlick: 'myPopup();'}) where myPopup() is function that creates qjuery modal popup.
But my issue is that sometimes popup doesn't even show or only for few seconds. I think that it's because javascript is async and controller is faster so it returns before javascript code is executed. Does anyone know how to execute javascript code first and then controller code.
I tried to Html.ActionLink(<button name>, <controller>, <action>, null, new { onlick: 'myPopup();return false;'}) as return false should stop default behavior(redirecting to Controller/Action) and then in jquery code I put ajax redirect to controller when button OK in popup is clicked. But problem is I can't seem to make this work, it may be even wrong way?
Any suggestions how to add this function?

Hi and welcome to SO :)
You would need to handle the redirect within your myPopup() function. Assuming you have a "continue" button within your modal. One way you could do it is -
$('#actionLinkId').click(function (e) {
e.preventDefault();
var link = $(this).attr('href');
$('#continue').attr('href', link);
$('#yourModalId').modal();
});

add "please wait" javascript modal to aspx DetailView insert button

Using insert functionality of an aspx DetailsView. Would like to show a javascript modal popup window while the new record is processed and added to the database. I can hook the button click in DetailsView_ItemCommand. It's not working, so I started trying to figure out whats going on by simply displaying a javascript Alert() popup. But can't get that to even work. Here's the relevant DetailsView_ItemCommand:
protected void DetailsViewInsertFPL_ItemCommand(object sender, DetailsViewCommandEventArgs e)
{
if (e.CommandName == "Insert")
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "waitMessage", "alert('Please wait while your request is processed');", true);
return;
}
}
After the record is inserted, there is a redirect to another aspx page.
Can anyone steer me down the right path? I'll be looking at some of the aspx page and DetailsView properties next to see if something there isn't set correct.

You cant just use
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "waitMessage", "alert('Please wait while your request is processed');", true);
then preceeded by a
response.redirect("toanotherpage.aspx");
ScriptManager.RegisterStartupScript will render your script after all the elements in the page (right before the form's end tag) hence not executing it when you use response redirect on the same code block.
To achieve what you want you could do one of the following solutions,
Create a Javascript and place you the redirect or for this instance
window.location there after the Alert message you want
Create a pop-up modal using other methods like bootstrap, on the modal declare a button with a code for response.redirect.

Alex Kudryashev's suggestion to enclose the DetailView within an asp:UpdatePanel and use the asp:UpdateProgress to show the "please wait while your request is processed" gave me the solution I needed in this case.
Infrequent user here, so not sure how to give the points to Alex as his suggestion was a comment rather than an answer. Feel free to let me know how to handle the votes in that case.
Thanks!!!! I've been banging my head against the wall for a couple of days to get this one working.

Alert Box error

I have alert boxes all around my site, that have been working up until now, ( I have done a few updates to my blog recently before this started happening ) the problem I am experienceing is that when I click on a link ( in my case a image link ) and the alert box appears, I submitt the ok button and suddenly im rediercted to a white page with 'true' in the top corner. My alert box scripts are inside my blog template.
I tested this alert box script out in a blog post:
<"a href="javascript:onClick=alert("Not an active link");">CLICK<"/a>
withouth the extra "
and then went to preview the post, however the same error occured. This is not a browser problem as it only happens on my site, when i got to someone elses with alert boxes, it works. Please help with this I have been asking about it for about a week now and would appreciate someone who can help
here is a screenshot of what I get redirected to:
http://img813.imageshack.us/img813/2674/true.png
Thanks for all help.

Use this
CLICK
Demo here: http://jsfiddle.net/e2fkT/embedded/result/

I think you have some typos... It would be:
click
Use simple quotes inside or escape double quotes.
I don't understand the use of onclick there too... Just the alert will open an alert box when you click.
click
Also it would be better to separate javascript from html... You could include with the following content (jquery example, i forgot almost everything about old javascript... just get the idea) into a non-active-links.js file or in a block:
$(document).ready(function () {
$('a.non-active-link').click(function () {
window.alert('Not an active link');
return false;
});
});
That way all links in the page with a class attribute of "non-active-link" will fire up the alert box.

I think you messed up with javascript inside href and the onclick attribute. Your snippet is actually assigning the result of the alert function call to the variable onCLick. The display of true might be the return value of the alert method. Still an odd behavior.
CLICK
CLICK
Those two cause no problems to me.

Refresh parent page after closing Iframe Modal box

The basics:
I have a webpage where a user can 'add an article'; when they click to 'add an article' it opens an iframe (a pop-up modal box).
In the Iframe there is a form with 'save' and 'cancel' buttons - what I'm trying to do is make it so when the user hits 'save', it will close the modal box, and then refresh the page.
I have it set so the iframe closes and the data is saved to the database, but I can't get the page to refresh (which would then display the new article)
I've been unable to do this as of yet, despite googling for days. I'm not a javascript pro, but I've learned enough in the past couple days to do a thing or two.
Here is the code for the button:
<a class="toolbar" href="#" onclick="javascript: submitbutton('save'); return false;">
Here is the end of the javascript function that handles the saving of the data:
function submitbutton(pressbutton) {
...
<?php endif; ?>
submitform( pressbutton );
parent.$('sbox-window').close();
}
}

http://community.getk2.org/forum/topics/solved-adding-articles-on-the?xg_source=activity
That link is the fix that I was looking for - this question was originally aimed at the K2 Component for Joomla.
Myself and another person were able to resolve the issue by writing some code of our own. In that thread as well as the one linked in the replies, a solution is arrived upon.
EDIT: A request was made to post the solution here, so here's a short summary
If you have users creating articles from the front end and you want the 'save' button to close the model box window that pops up when they add or edit an article - just follow the steps below to achieve this:
*Note: there are a few other fixes that work to close the box, but not refresh the page - this does both.
The key is passing an extra parameter through the URL that gets created when the user clicks "Save", then we just check to see if that parameter (which I will call 'step') exists - if it does, we refresh the page.
Lets follow along, first we must add this parameter to the URL created -
Open the item.php file located at:
Yoursite->administrator->components->com_k2->models->item.php
On or around line 646 - you will see some text that resembles:
case 'save':
default:
$msg = JText::_('Item Saved');
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&tmpl=component';
else
$link = 'index.php?option=com_k2&view=items';
break;
So what we need to do is add our parameter to that URL so it will look like this (remember I called the parameter 'step', and will be setting it =1) - the code will now look like this:
if ($front)
$link = 'index.php?option=com_k2&view=item&task=edit&cid='.$row->id.'&step=1&tmpl=component';
Now when the user clicks 'save' the parameter 'step' is getting passed along, and when the form reloads to show the user their information they had entered, step=1!
So then we have to add the php to check for that - that's simple enough:
Open the form.php file located at:
Yoursite->components->com_k2->views->item->tmpl->form.php
In there you can see where the form actually begins (on or around line 249), what we want to do is just add a little bit of php that checks to see if our 'step' parameter is equal to 1. If it is - we'll refresh the parent page using some javascript, that will automatically close the model box and cause the 'item saved' text to display to the user letting them know what happened.
The existing code looks like :
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<table class="toolbar" cellpadding="2" cellspacing="4">
When finished it will look like this:
<form action="index.php" enctype="multipart/form-data" method="post" name="adminForm" id="adminForm">
<div class="k2Frontend">
<?php if (JRequest::getInt('step')=='1') { ?>
<script language="javascript">
var XHRCheckin = new Ajax('index.php?option=com_k2&view=item&task=checkin&cid=<?php echo $this->row->id; ?>', {
method: 'get'
});
dummy = $time() + $random(0, 100);
XHRCheckin.request("t"+dummy);
parent.$('sbox-window').close();
window.parent.location.reload();
</script>
<?php } ?>
<table class="toolbar" cellpadding="2" cellspacing="4">
That checks to see if 'step' is =1. If it is - it runs javascript to refresh the parent window - closing the box and refreshing the page automatically. It also checks in the article on the backend.
This ensures the easiest possible thing for the user (i.e. they don't have to click 'back' and 'refresh' which is extremely counter-intuitive) and gives the front end user a back-end experience.
I hope this helps people - it took me a LOT of chasing things in the wrong direction before I thought of this solution.
I'm pretty saddened the developers never helped with something that's affected so many people, but oh well - problem was solved!

Try window.location.reload
You'll also want to get rid of the "return false;" from your onclick handler. That may prevent the page from refreshing. Also in general, put any "return" statements from within the event handler function.

I think you're looking for
parent.location.reload();
Incidentally, you don't actually need to close the iframe - once you reload the parent page, it'll be gone anyway.

Check out jQuery fancyBox.
fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.
It' has a "Reload page after closing", function.
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});

jQuery code repeating problem

I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key

From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.

This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.

If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.