How to pass data from child (mvc) window to parent window?
a few seconds ago|LINK
I have a situation where I need to pass some data from a child (MVC) page to parent window. But in this case the user does not need any interaction with the child window. The child window will simply open from the parent via a button click, to run a server-side process and return some code value to parent window and will need to close.
I am unsure how to pass data from a mvc page controller to a parent page and also how to close the child window itself..
Any suggestions?
I think this may answer your question:
parent window - parent.asp
<html>
<script language="javascript">
function openwindow() {
retval=window.showModalDialog("child.asp")
document.getElementById('passedChild').value=retval
}
</script>
<body>
<form name=frm>
<input name="passedChild" id="passedChild" type=text>
<input type=button onclick="javascript:openwindow()" value="Open Child">
</form>
</body>
</html>
child window - child.asp
<html>
<head>
<%
'... i work in classic asp so can run asp here and then flow into JS for retrun
%>
//
<script language="javascript">
function changeparent() {
window.returnValue="passed value"
window.close()
}
</script>
</head>
<body>
<form>
<input type=button onclick="javascript:changeparent()" value="Change passedChild">
</form>
</body>
</html>
Related
Problem:I am assigning a div to the content property of a kendo tooltip... problem is, when I attached the tooltip... the div is sitting there, and the tooltip does not REALLY wire up until I hover over the element I attached it to... you can see in my code below how this is not working... paste into a kendo dojo, and seee.... just click the button (DO NOT HOVER over the text box yet).. then you will see the div show up, and when you hover over the text box, it will do what it's supposed to do... I made a workaround , which is commented out... but it flashes for a second... is there a way to just make the tooltip wire up and hide the content div?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.223/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view" data-bind="enabled: isNameEnabled">
<button id="button1" data-bind="click: updateTooltip">Change Tooltip</button>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<input id="text1" type="text" data-bind="value: name" />
<div id="toolTipDiv"></div>
</div>
<script>
var viewModel = kendo.observable({
isNameEnabled: false,
name: "John Doe",
updateTooltip: function () {
var kendoToolTip = window.toolTipEl.data("kendoTooltip");
// comment this out to see
//div1.hide();
//kendoToolTip.show();
//kendoToolTip.hide();
//div1.show();
//end comment
div1.text(text1.value);
}
});
var div1 = $("#toolTipDiv");
window.toolTipEl = $("#text1");
kendo.bind($("#view"), viewModel);
window.toolTipEl.kendoTooltip({
content: div1, position: "top",autohide:true
});
</script></body>
</html>
The div shows up because it is visible and you just made its contents non-blank. Once the tooltip is shown once, kendo takes over control and wraps it in another div that it hides and shows as necessary.
Note that "aria-hidden: true" does not actually hide the div...it is simply a directive to screen-readers...you still have to actually use real CSS to hide the div.
You need to ensure that the div is hidden initially(before kendo wraps it) and remove the display: none; once you "hand it off" to kendo.
Or...hide the div and set the content to a function that just returns the content of the div instead of binding to the div itself, i.e.
<div id="toolTipDiv" aria-hidden="true" style="display: none"></div>
...
updateTooltip: function () {
div1.text(text1.value);
}
...
window.toolTipEl.kendoTooltip({
content: function(e) {
return div1.text();
},
Example: http://dojo.telerik.com/#Stephen/iqaLA
Update
Turns out that the content only gets called the first time the tip is shown for the element, not every time the tooltip is shown, so dynamic changes to the contents (or even the input's title attribute) don't change the tooltip.
So, ignore my answer and try this: http://www.telerik.com/forums/dynamic-content-de3951ae5752
<!DOCTYPE html>
<head>
<meta charset=" UTF-8">
<title> Document</title>
</head>
<body id="chat">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.0/socket.io.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<form v-on="submit: send">
<input v-model="message">
<button>Send</button>
</form>
<script>
var socket = io();
new Vue({
el: '#chat',
date: {
message: ''
},
methods: {
send: function(e)
{
e.preventDefault();
alert("a");
}
}
})
</script>
</body>
I want to call the send method defined in new Vue when the form is submitted ,
But when i submit the form, page is reloading.
I have created a Vue object and linked it to the chat element.
I guess e.preventDefault() is not working.
Interesting, I just helped somebody with a similar issue, the syntax for Vue.2.0 is v-on:submit="send" not v-on="submit: send". Vue already has a way stop the form submitting which is: v-on:submit.prevent so you don't need the e.preventDefault, you would get:
<form v-on:submit="send" v-on:submit.prevent>
or a shorter version:
<form v-on:submit.prevent="send">
There are a few more issues here, so I will go through them for you:
Firstly, you are never submitting the form. To submit a form you need a submit input, not a button:
<input type="submit" value="Send" />
However, from what I can see it's likely you don't even need a form, and can simply use a button with v-on:click:
<div>
<input v-model="message">
<button v-on:click="send">Send</button>
</div>
And then get what was submitted from the view model:
send: function()
{
alert(this.message);
}
You should also use the console (under developer tools in your browser) and log any output rather than alert (console.log(this.message)), because it will also sniff out any general errors with your code - for example I can see that you also have a typo (the same one I always make) it's data not date:
data: {
message: ''
},
Okay, what about this
<form #submit.prevent="send">
<input v-model="message">
<button>Send</button>
</form>
And then you can remove preventing default browser action from your send() method
I have a simple file to test onclick function which I copied straight from w3schools' example. It works fine in the Tryit editor, but the button with the onclick function does nothing when I place it on my server.
<!DOCTYPE html>
<html>
<head>
<script>
function open_win()
{
window.open("http://www.<valid address>");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>
Where should I look first?
It does work for me and it is valid code, so I don't know why it's not working for you. But here's an alternative:
<input ... onclick="window.open('http://www.<valid address>');">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
If it still doesn't work then check if you have JavaScript enabled in the browser you are using to access your server.
I want to fire a button's click event when pressing ENTER inside a input and I find it quite difficult with AngularJS.
My view (simplified, updated):
<!doctype html>
<html lang="en" ng:app="test">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/app.css" />
</head>
<body ng-controller="TestController">
<button ng-click="onButton1Click()" class="btn1">Click Me</button>
<button ng-click="onButton2Click()" class="btn2">Don't click me</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/testcontroller.js"></script>
</body>
</html>
My controller for this view:
'use strict';
angular.module('test', [])
.controller('TestController', ['$scope',
function($scope) {
$scope.onButton1Click = function() {
alert("Hello");
}
$scope.onButton2Click = function() {
$('.btn2').click();
}
}])
I simplified all the code to this. When I click on btn2 I get this error
$apply already in progress
No, I can't call $scope.onButton1Click() directly, I must simulate the btn1 click.
You mentioned
fire a button's click event when pressing ENTER inside a input
So if it is safe to assume that you can have a form I would prefer using ng-submit as shown below.
<form ng-submit="clickEventFunction()">
<input type="text"/>
<button type="submit">Click</button>
</form>
Note button type should be submit.
This took me a while to figure out (lots of fiddles).
<form id="nowsorting" ng-submit="getData(sc_user)">Now sorting the Soundcloud likes of <input type="text" ng-model="sc_user"><input type="submit" value="Sort"></form>
Make a form and use ng-submit to fire the event (likely a function).
Then create two inputs (one is "text" and the other "submit").
Then pushing enter should fire the ng-submit event/function.
I think, you just have to call your $scope.onButtonClick()
Please check this Plunker
$scope.onKeyPress = function($event) {
if ($event.keyCode == 13) {
$scope.onButtonClick();
}
};
I am working just one week with ASP.NET MVC 3. This might be a very basic question or someone might have asked similar question before. I am seeking help to show me right path/method to accomplish the problem I am facing getting the partial view designed.
I have created a partial view login (in side bar) as below. What I would like to achieve here is, when I hit the "login" button, I must be a able update the partial view with information such as
**Welcome [UserName]
Last SuccessFul Login : [DateTime]
Member Since : [Date]**
I am not sure if I need to create another partial view to display this information Or the login partial view can be updated on the fly based on the action.
Login Partial View
#model AlanBeezLab.Models.LoginModel
#using (Ajax.BeginForm("Login","UserLogin", new AjaxOptions { UpdateTargetId =Model.UserName }))
{
<div >User Name
#Html.TextBox(" ")
</div>
<div>Password
#Html.Password(" ")
</div>
<p><input type="submit" value="Let me in!" /></p>
}
Below is the _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<!--link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />-->
<link href="#Url.Content("~/Content/SiteStyle.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="Header" style="background-image: url('/Content/Images/Banner_Final3.png'); background-repeat:no-repeat; width :1500px; height : 150px;" >
</div>
<div id="SideBar">
#Html.Partial("UserControls/UserLogin", new AlanBeezLab.Models.LoginModel())
</div>
<div id="Content">
#RenderBody()
</div>
<div id="Footer">
<p>Copyright © XXXXX</p>
</div>
</body>
</html>
Below is the Login Controller
public class UserLoginController : Controller
{
//
// GET: /UserLogin/
public ActionResult Index()
{
return View();
}
public ActionResult LogIn()
{
return [Not Sure];
}
I am not sure if this is best/right approach to accomplish this. I would appreciate if I am directed to the right path/approach.
Thanks
I've had this discussion with my peers before.
IMO login/logout should not be done via AJAX, it should be a regular HTTP POST.
Why? Well what if your on a page that requires Administrator access, then you logout via AJAX? Your still on the page - when you shouldn't be authorized to do so (unless of course you update the main portion of the page as well, which is kind of silly)
So my advice - make the login button do a regular POST to an action method, then use the PRG pattern to redirect back to the original page.
Of course, if you don't have the concept of administrators/permissions/roles then an AJAX login/logout will be fine.
Regardless, you've done the right thing with the partial view.
Your partial view should figure out if the user is authenticated, then render an appropriate editor/display template based on that.
E.g: _Login.cshtml:
#if(Request.IsAuthenticated) {
#Html.DisplayFor(Context.User.Identity)
} else {
#* editor fields *#
}