I am using modal.js to pop up dialog box in a page. When the user clicks on a link an iframe will show on a modal dialog box. There is a button inside that iframe. When the button clicks, the modal should be closed and page should redirect to another url. Is it posssible?
You can use jQuery binding to trigger a custom event.
On the click, before you show the iframe, do the following in javascript:
// Bind a trigger
$('body').unbind('myUniqueEventName', SomeJavascriptFunction);
$('body').bind('myUniqueEventName', SomeJavascriptFunction);
Elsewhere in javascript define the function SomeJavascriptFunction:
function SomeJavascriptFunction(event, extraData) {
// This is run when the button on the popup is clicked
// You can pass along data using the extraData parameter
// You can also redirect to another page
var someData = extraData.someData; // Will contain 'someValue'
}
Now all we have to do is trigger the custom event from the iframe. We do this by adding the following code in the iframe when the button is clicked.
parent.$('body').trigger(
'myUniqueEventName', {
someData: 'someValue'
});
});
Related
I have a MVC web application with two buttons - Save and Submit.
When a user first Submits and simultaneously clicks the Save button as soon as he clicks the submit button there is a error in the data send.
I am pretty new to programming and hence have no idea how can i avoid the simultaneous clicks.
Any suggestions on how i can handle this?
Thanks
You can do the following:
Have Submit button as “Submit” button (rendered in html as input type=“submit”)
Have Save button as normal button.
To have Save button rendered as normal button (rendered as input type=“button” you can have UseSubmitBehavior: False.
You can then use OnClientClick on one of the buttons and prevent the other button from being clicked.
Here you can get creative also. You can disable the clicked button and show “Saving ...” like below:
// its a button or document.getElementById
if (button.getAttribute('type') == 'button') {
button.disabled = true;
button.className = "inactive class";
button.value = "Saving, please wait. Have some peanuts while we save...";
Try disabling the Save button in the code of the Submit button HTML onclick=" ... "
Simple solution with jQuery:
$("[type='submit']").on("click", function (e) {
// !!!IMPORTANT!!!
e.preventDefault();
var $self = $(this), $form = $self.closest("form");
// Valid - before submit
if ($form.valid()) {
// Update text in button, ex: Sending..., Loading...
$self.attr("disabled", "disabled").html("<i class='fa fa-spinner fa-pulse fa-lg fa-fw' aria-hidden='true'></i>Loading...");
// Block all inputs.
$form.find(":input:not([type=hidden])").attr("readonly", "readonly");
// Submit form.
$form[0].submit();
return true;
}
// !!!IMPORTANT!!!
return false;
});
I have a save button that saves the input data and a submit button that redirects to the next page. When this page first loads up, the submit button is hidden and when save is clicked, the submit button is visible and redirects to the next page when clicked. If users wants to edit the inputs, they can go back to the previous page where the inputs remain in the controls. My problem is that I want the submit button to be hidden when going to the previous page so that it forces users to save first. How do I do this?
if you use serverside conttoller
if(IsPostback)
{
btn.Visible =false;
}
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
if ($("#TextBox1").val()) //if input has value
$("#Button1").hide(); //hide button
})
</script>
Server side code is not possible because on browser back no request is made, the page is retrieved from cache so it should be done with client code
Page_Load()
{
if(IsPostback)
{
btnSubmit.visible=false
}
}
If this is a web forms based application, try setting
btnSubmit.Visible = false in the Page_Load method
I have a parent page to display the project details, and user enter part details by uploading a template in a modal pop-up.
To open the modal popup I'm calling this function
function importfile()
{
var url="SCN_UploadPart.aspx";
var selSCE=window.showModalDialog(url,'win','help:no;status:no;scroll:no;resize:no;dialogHeight:300px;dialogWidth:490px');
return false;
}
Earlier I was using OnClinetClick method of Uplaod Button to call this method, then the project page or parent page was automatically reloading. But now I'm calling it like this.
ClientScript.RegisterStartupScript(this.GetType(), "project", "<script language='javascript'>importfile();</script>");
onclick of same Upload Button.
I font why the page does not reload now. I want the page to be reloaded as I am showing the content in the parent page after uploading the parts.
Please suggest me the way to reload the Parent page on click of close in modalpopup.
U can refer below link its show the demo
http://codedisplay.com/automaticaly-refresh-parent-window-whenever-popup-window-is-closed/
http://www.mindfiresolutions.com/Refresh-parent-page-on-closing-modal-child-windowpopup-29.php
Hope it helps u
I am using window.open to open a child pop-up in my MVC page for when closing the popup i should refresh my parent Jquery Grid without refreshing the whole page is it possible?
You can use reloadGrid to refresh the grid and can use the onbeforeunload event to trigger the grid refresh like the code given below, substitute your grid ID and window URL with yours ID and URL
var myWindow = window.open('your_url')
myWindow.onbeforeunload = function(){
$("#your_grid_id").trigger("reloadGrid",[{current:true}]);
}
I have iframe fancybox on my page. On the child page, I add something to DB when Add Button clicked. After this process I want to close the fancybox and reload the parent page. How can I do it?
this should be called on page reload..
window.parent.closeDialogFormSubmit();
//Or
window.top.parent.closeDialogFormSubmit();
this closeDialogFormSubmit function should be on fancy box open on that page.
closeDialogFormSubmit write code for fancy box close code.
the function should be written outside $(document).ready(function(){}); or $(function(){}); else it will not find the function and gives error undefined.
1). In the child page
Use the API method parent.$.fancybox.close()
You could create a button like :
<img src="myCloseButton.png" alt="close fancybox" />
Bear in mind that interaction between those pages is subject to the same origin policy so if the child page is in another domain parent.$.fancybox.close() may not work.
EDIT : if the child page should be closed after a form is submitted, then set the closing method using the onsubmit attribute in the form tag like :
<form id="login_form" action="process.php" onsubmit="javascript:parent.jQuery.fancybox.close();">
See this post for further reference and demo.
2). In the parent page
Add to your custom script the afterClose callback like :
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
... to reload the page after closing fancybox. See JSFIDDLE