I need a terse, clean way to implement this in asp.net mvc (+/- jquery or js)?
User clicks an element in webform A;
Webform B pops up;
User interracts with webform B;
On closing webform B, probably by a submit button, the source element in webform a is updated with a value from webform B
Thanks.
With ASP.NET MVC, I'd probably render a DIV on the page, initially hidden, perhaps via AJAX if the contents depend on values selected on the initial page. I'd use the jQuery UI dialog plugin to popup the dialog. The dialog could contain a form that submits back to the server. You could also use the onclose handler for the dialog to both copy values from the inputs in the dialog for use on the rest of the page. If you populated the dialog via AJAX you could have the server generate the HTML -- say by rendering a partial view and returning it -- or return json and generate the dialog on the fly in the browser.
I've resorted to using cookies. I've found this to be the only reliable way to do this. I'm using GrayBox for my dialog, so I have a function in the dialog that looks like this:
function selectValue(id, name) {
SetCookie("_someuniqueprefix_RetID", id);
SetCookie("_someuniqueprefix_RetValue", name);
parent.parent.GB_CURRENT.hide();
}
Then in my calling page I am launching the dialog which displays a partial in the GrayBox:
$(function() {
var selectUrl = '/_somecontroller/Select';
// attach a method to the chooseButton to go and get a list of
// contact persons to select from
$("#chooseButton").click(function() {
GB_showCenter('Select My thing', selectUrl, 500, 620, function() {
var id = GetCookie("_someuniqueprefix_RetID");
var value = GetCookie("_someuniqueprefix_RetValue");
DeleteCookie("_someuniqueprefix_RetID", "/", "");
DeleteCookie("_someuniqueprefix_RetValue", "/", "");
$("#MyID").val(id);
$("#MyName").val(value);
});
});
});
Also you'll need to grab a function off the web for SetCookie and GetCookie
Hope that helps
You can use javascript from the popup window to call functions on the opener via window.opener. So your popup could call a function on the parent page to pass the data back when the user clicks the submit button.
I'm not sure what your requirements are, but IMO using ajax for this sounds like overkill. If all you need is some form data from the popup webform passed to the opener webform, then there's no need to make a call to the server.
Related
I am using this WordPress plugin as a store locator on my website. On pages that do not have the interactive map, I have a form that that acts as a map search form.
In other words, I have a form with a location field. The user enters the location in the field and clicks the search button. When they click the search button, the page redirects to the page with the map and the location field is filled with the location entered on the previous page:
/* This is the search form on the page that does not have the interactive map */
$('#searchonly #wpsl-search-wrap form').submit(function(e){
e.preventDefault();
var loc = $('#searchonly #wpsl-search-wrap form #wpsl-search-input').val();
localStorage.setItem("loc",loc);
window.location.href = "http://localhost/inform/find-a-doc/";
});
/* This is the page with the interactive map */
jQuery(document).ready(function( $ ) {
var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc);
});
I now need the the search button on the page with the interactive map to automatically be clicked (or the form submitted) on page load.
There are a couple of roadblocks. The first is that I am using a WordPress plugin so editing the actual plugin files isn't an option. The second (this might not be a roadblock, I am not sure) is that the plugin is already running some ajax calls on page load. I would assume this means that the form submit button shouldn't be programatically clicked until the initial ajax is complete.
Here are the individual solutions I have tried. Each line break represents a different solution I have tried:
/* #wpsl-search-btn is the submit button for the form */
$(document).ajaxSuccess(function() {
$("#wpsl-search-btn").submit();
});
$(document).ajaxComplete(function() {
$("#wpsl-search-btn").submit();
});
$("#wpsl-search-btn").submit();
$("#wpsl-search-btn").trigger('submit');
None of those solutions are working and I am receiving no js errors in Chrome's inspector.
I'm not sure if this will help but here is the plugin's main js file.
Take a look at $.Deferred()
https://api.jquery.com/category/deferred-object/
You can bind promises that are executed after a request is processed.
I was able to answer my own question. This is the code that solved my problem:
var loc = localStorage.getItem("loc");
$('#wpsl-search-wrap form #wpsl-search-input').val(loc);
function clickBtn() {
$("#wpsl-search-btn").trigger('click');
}
$(document).one('ajaxComplete', function() {
clickBtn();
});
I have two applications webApp1 and webApp2. In webApp1 , HTML page contains an tag on click of it an HTML page in webApp2 will be opened in new browser window, page contains one text box and save button. If user enters something in text box and click on save button, need to send a notification from webApp2 to webApp1 so that webApp1 can close the newly opened window and perform some operation after closing window.
How can I achieve this using Java script?
What you are looking for is window.opener.
In Webapp1, window 1, you would have a function in javascript that would need to be done after closing.
function AfterClose() {
// code to execute in Webapp1, triggered in Webapp2
}
In Webapp2, within your save function, do the following.
function Save() {
// ...
// code to save your information
// ...
window.opener.AfterClose();
self.close();
}
Why not just call window.close() as part of the save button click function in webapp2?
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
I have a master page in which leftnavigation.jsp and header.jsp are present.Now leftnavigation contains hyperlinks to few of the webpages(say general.jsp, contact.jsp).On clicking these hyperlinks , these webpages gets opened.like if i click general link, it gets opened, and if i click the link of contact.jsp , contact webpage gets opened.Now these webpages have validations on the save button at the end of the form .
Now i want to have these validation (every webpage has a validation function on save button)to work when a user clicks a link on the left navigation to change the webpage.
The leftnavigation.jsp does not contain any form element. it just contains links or scripplets
any suggestions?
Sounds simple enough. You could make the navigation bar links call the validation function for the forms when clicked. Something like this perhaps:
<a href="anotherpage.jsp" onclick="validate(); return true;>Click me!</a>
Just a warning though: it's impossible to guarantee validation in this manner, users could bypass the validation (the user could click a back button for example). If this is what you're trying to achieve, consider running a validate function onpropertychanged or onkeyup. And, as always, form validations should (almost) never be a hinderance; don't show alert messages or do anything REALLY distracting if a user doesn't type something right.
Notice how the code above would let the user change pages regardless of the form's validation status. You could make the onclick function return false if the form failed validation, but this can be bypassed, and it is a hinderance to users.
If this is really necessary, have the links work regardless, but show a small message, possibly in the form of a div quietly pop up at the top of the page warning the user that one of their form entries was incorrect.
Listen for a click event on your navigation links then run your validation function:
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, func);
}
}
var links = document.getElementsByTagName('a');
listen('click', links, validationFunction);
If you're passing in variables, then wrap your validate function in an anonymous function:
listen('click', links, function(param) { validationFunction(param); });
i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!
What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp
you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/
To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!
HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m
You will not be able to do this with alert, but you should take a look at how to create modal windows.
I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.