Html.ActionLink: popup(custom), then redirect - javascript

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();
});

Related

Any other way to Refresh the page using ng-Route

I have taken a text-box to input the content and after the input , I have created refresh() btn to refresh. My code is working fine. But the part is On the click of refresh() button , only the page should get refreshed , but my code is refreshing the complete window. I tried using $route.reload(), but it din't work properly. I browsed through some sites, but I din't got the appropriate result. I tried my best to do it. But hopefully, I couldn't continue further.
My plunker : https://plnkr.co/edit/0r7DXPWWtXmFYsHwY6Q3?p=preview
Here you can check it out.
Why you want reload the whole page? You can do just clear the fields instead of reload the whole page.
$scope.reloadPage = function(){
$scope.name = '';
}
or trigger your page load function or code
$scope.reloadPage = function(){
//You should call the function as what you did when the page load.
}
EDIT:
I know that functionality. But I have n number of text-fields. So its not an good practice to carry it
Then you should use with an object like $scope.objectname={textboxes1,2.....};
So you can easily clear the object like $scope.objectname={};
I have update your plunkr. please take a look that.
https://plnkr.co/edit/UxTNY1zgD4CrUEvERcHT?p=preview

How can I prevent the JavaScript Prompt Leaving site From Appearing

Hey guys I am trying my best to figure it out how to remove the Javascript prompt/confirm that says "Do you want to leave this site?" like this:
https://prnt.sc/famast
Basically what's happening here is that when a modal got opened and the user click on "YES" it will redirect to a page. But I don't want the JavaScript confirmation but just redirect it to that page.
Any idea if you know some scripts that could make it happen?
Please help!
As other said above me, you can do it with onbeforeunload:
window.onbeforeunload = function() {
return '';
// The browser shows a pre-defined message so you don't have to write your own
}
You can also use addEventListener, in this way:
window.addEventListener('beforeunload', function() {
return '';
});
See an example (Link updated)

Fire a Javascript function after submitting a Gravity Form

I have a multi-page form where the url remains the same when moving between pages.
I am trying to change some HTML after the submit button has been clicked.
I can run this in the console and the result is as I want it.
How can I get this run after submit?
I've tried window.onload and document.onload functions but they are not working. I've also tried an onclick function but it seems moving to the next page stops this working?
var confirm = document.getElementById('gform_confirmation_message_14');
if(confirm) {
document.getElementsByClassName("entry-title")[0].innerHTML = "PAYE Worker";
}
Thanks
Perhaps the gform_page_loaded event? From the documentation it:
Fires on multi-page forms when changing pages (i.e. going to the next or previous page).
$(document).on('gform_page_loaded', function(event, form_id, current_page) {
// do stuff
});
There are a bunch of javascript events available, and if not this one, maybe another serves your purpose, e.g. gform_post_render.
I removed the Javascript completely and created a confirmation in Gravity Forms that redirects to a new page upon submission.
Created a title for this new page "PAYE worker"
Problem solved

Conditionally open url in new tab

I have a page that currently redirects if a check box is selected and then a "submit" button clicked:
if request.Form("myCheckbox") = "on" then
response.Redirect("/newPage.asp?txt="staff"")
else
response.Redirect("/thisPage.asp")
end if
If the check box is selected, I'd like it to open in a new tab.
I gather from similar questions on here that this can't be done in HTML and would probably be best achieved with Javascript but am unclear as to how to proceed beyond the following:
function sendForm(action){
if (document.getElementById('myCheckbox').checked) {
window.open('/newPage.asp?txt="staff"', '_blank')
}
}
I know it's wrong as it stays on the same page but that's as far I've managed.
Can someone tell me what I'm doing wrong?
As you've found out, a new tab/window cannot be opened from the server using Classic ASP.
Your 'window.open' line is correct and should fire so I assume the problem is with the function and/or the ID of your checkbox.
See my JSFiddle for a working example, or below for the code.
document.getElementById('yourForm').addEventListener("submit", function(e) {
if (document.getElementById('myCheckbox').checked) {
window.open('http://www.jsfiddle.net', '_blank');
}
e.preventDefault();
});

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.

Categories

Resources