I have a Gridview on "Webform1.aspx" ,i want when i click the refresh button on "webform2.aspx","webform1.aspx" refresh or better way "webform1.aspx" gridview just refresh.
Provided that from webform1 opened the webform2, try:
webform2.aspx From here you can refresh the webform1.asp or you can call a function.
<script>
function refresh_webform1(){
window.opener.location.reload();
}
function CallFunctionFrom_webform1(){
//example function display_ct();
window.opener.display_ct();
}
</script>
<input type="button" onclick="refresh_webform1()" value="Refresh webform 1">
<input type="button" onclick="CallFunctionFrom_webform1()" value="Call Function From Webform1">
webform1.aspx
<script>
function openWebform2(){
window.open("webform2.aspx","windowName", "width=200,height=200,scrollbars=no");
//or
//window.open("webform2.aspx","_blank" );
}
//example function display_ct();
function display_ct() {
var x = new Date();
document.getElementById('ct').innerHTML = x;
}
</script>
<span id='ct' ></span>
<input type="button" onclick="openWebform2()" value="Open WebForm 2">
Related
I am new to Meteor this is how I kept the button in html file.
<input type="button" class="number" value="1">
<input type="button" class="number" value="2">
<input type="button" class="number" value="3">
How to get the value of these buttons in the js file.
Any one help me.
Thanks in advance.
Get the value using an event:
'click .number': function(event, template) {
console.log(event.currentTarget.value);
}
Or plain Jquery:
$($('.number')[0]).val()
$($('.number')[1]).val()
$($('.number')[2]).val()
well to determine which buttons get clicked you can simply use event handlers for your template. And its very important to know that the buttons are identified through their class names. Therefor you have to choose unique classnames.
For example if you have the buttons inside a template called template1 you just do the following:
//in your .html inside your template1
<button class="button1">Button1</button>
<button class="button2">Button2</button>
<button class="button3">Button3</button>
and the corresponding JS:
//in your clientside JS
Template.template1.events({
"click.button1": function () {
//exec code when button1 clicked
//[...]
},
"click.button2": function () {
//exec code when button2 clicked
//[...]
},
"click.button3": function () {
//exec code when button3 clicked
//[...]
}
});
if your buttons aren't in an template, but just inside your just use the area as template. for example Template.body.events will handle events in your body.
Can be done like below:
Template.TemplateName.events({
'click .number': function (event,template) {
return event.target.value;
}
});
I have a list of forms in a page of my meteor app, the list is generated dynamically and all the forms have the same class.
So i made the event submit on the events area of my template, but when i submit the form, only the first form works, if i submit the second form for example, meteor event understand that the event came from the first, and i don'k know how to pass the form id to meteor events, so i can't get the data from the right form. Someone can help me?
This is my event:
'submit .form-equation': function (e, t) {
e.preventDefault();
var name = t.find('#name').value,
equation = t.find('#equation').value,
order = Number(t.find('#order').value),
isChart = t.find('#isChart').checked;
var equationData = {
name: name,
equation: equation,
order: order,
isChart: isChart
};
var station = Stations.findOne(Session.get('stationNewID'));
var sensorId = t.find('#sensorId').value;
Meteor.call('insertEquation', station, sensorId, equationData, function (error, result) {
if (error)
console.log(error);
});
}
I think there is something else wrong with your application. The behavior you described (having multiple forms of the same class with different IDs) works correctly on a clean example.
Check out the demo I made that demonstrates this: http://meteorpad.com/pad/8CPL2xvS7taeL6jZS/MultipleFormSubmitExample
Basically, the forms look like this:
<template name="example">
<form id="1" class="yolo">
<input type="submit" value="Submit">
</form>
<form id="2" class="yolo">
<input type="submit" value="Submit">
</form>
<form id="3" class="yolo">
<input type="submit" value="Submit">
</form>
</template>
And there is only one event listener:
Template.leaderboard.events({
'submit .yolo': function (e, t) {
e.preventDefault();
alert($(e.target).attr('id'));
}
});
Coming from WebForms getting my head around some MVC stuff is not quite intuitive and I am struggling to find a way to modal to pop-up from the controller (depending upon the postback result)..
The modal
<div id="PopupModal" class="modal fade in out">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title" id="ModalTitle"></h4>
</div>
<div class="modal-body" id="ModalBody">
<h5 id="ModalBodyText"></h5>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
This is how I would have raised the event in WebForms
Private Sub ModalValidation(Message As String)
Try
Dim SB As New StringBuilder
SB.Append("$(document).ready(function(){")
SB.Append("$('#PopupModal').modal();")
SB.Append("var vBody = document.getElementById('ModalBodyText');")
SB.Append("vBody.innerHTML = '" & Message & "';")
SB.Append("var vTitle = document.getElementById('ModalTitle');")
SB.Append("vTitle.innerHTML = 'Validation';")
SB.Append("vTitle.style.color = 'orange';")
SB.Append("});")
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ValidationShowModal", SB.ToString, True)
Catch ex As Exception
Dim vError As New SendError
vError.MailError(60, PageName, ex)
End Try
End Sub
How can I raise the same event from the controller?
Thanks
Edit = Big thank you to Vitor Salgado for pointing me in the right direction
Added this to the controller - Index
Function Index() As ActionResult
Dim vPopup As New UploadFilesResult
If Not Session("PopupMessage") Is Nothing Then
vPopup.PopupMessage = Session("PopupMessage")
Else
vPopup.PopupMessage = "None"
End If
ViewData("UploadFilesResult") = vPopup
Return View("BlueImpMinView")
End Function
Added this to Controller - ActionResult (where the action completed normally)
Session("PopupMessage") = "The file was successfully uploaded!"
Return Redirect("/blueimp/Index#Completed")
Added a hidden field to the view
#code
Dim vPopup As MVPTest.UploadFilesResult = CType(ViewData("UploadFilesResult"), MVPTest.UploadFilesResult)
Dim vPopupMessage As String = vPopup.PopupMessage
#Html.TextBox("MessageTB", vPopupMessage, New With {.type = "hidden"})
End Code
and the javascript for the modal
<script>
window.onload = function () {
var vType = location.hash;
var vMessage = document.getElementById('MessageTB').value;
switch (vType) {
case '#Completed':
//run code for completed modal
$(document).ready(function () {
$('#PopupModal').modal();
var vBody = document.getElementById('ModalBodyText');
vBody.innerHTML = vMessage;
var vTitle = document.getElementById('ModalTitle');
vTitle.innerHTML = 'Success';
vTitle.style.color = 'green';
});
break;
case '#Error':
//run code for error modal
break;
case '#Validation':
//run code for validation modal
}
}
</script>
In controller code, you could append to your querystring some marker parameter or return a specific cookie, then, in your javascript code, you can identify one of these marker values and show your modal window.
Here some sample code..
The controller
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(RegisterModel model)
{
return Redirect("/Home/Register#registered");
}
The view
#using (Html.BeginForm())
{
<label>Login</label><br />
#Html.TextBoxFor(x => x.Login)
<br />
<label>Name</label><br />
#Html.TextBoxFor(x => x.Name)
<br />
<label>Email</label><br />
#Html.TextBoxFor(x => x.Emai)
<br />
<input type="submit" value="Register" />
}
<script type="text/javascript">
window.onload = function () {
if (window.location.hash == '#registered') {
alert('Your modal code here!');
}
};
</script>
The action Register(POST) is the server side code that will create some marker to your client side code. In the sample, a added a hash value to url. You could return a cookie value or better, add some value to hidden field and read the value from it. In the view, a have simple JS code that executes on page load. The JS search for the hash value and show the modal.
There are several ways to do this that fit within the MVC way of doing things. Here's what I would do...
If you need the server to decide whether or not to show the modal, but you don't wish to refresh the page, then AJAX is probably what you want. Use can use jQuery's ajax calls to post data to a controller action, make a decision on the server, then send back a result that your js can use to either show the modal or not. This way, the page does not need to refresh yet you make a round trip to the server to decide what you need to do.
I am a little new to JQuery. let's suppose that we have this jquery function :
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
and this form :
<form id="myForm" action="/Monitor/Test/FormPost" method="post">
<div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
<div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
<div>Age: <input name="Age" type="text" value="43" /></div>
<input type="submit" value="Save Contact" />
<div id="postResult">?</div>
</form>
How can I bind the save button with the jquery function ? Thank you
One simple way would be to bind to the click event of the button. Something like this:
$('#myForm input[type="submit"]').click(function () {
var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
});
This specifically looks for the submit input that's a child of the form of id "myForm" (in case there are other buttons, etc.) and responds to its click event with the function in question.
Just to be safe, since you're essentially short-circuiting the form and posting via AJAX, you should also probably change the submit to a normal button:
<input type="button" value="Save Contact" />
Or perhaps:
<button value="Save Contact" />
Which would change your jQuery selector to:
$('#myForm input[type="button"]')
Or:
$('#myForm button')
$(document).on("click","input[type=submit]",function(e)
{
e.preventDefault();
var form = $(this).closest("form");
$.post(form.attr("action",form.serialize(),function(d){
//result
});
});
more general way.
//this handler can work on any form that need to post all values
$("form input[type='submit']", f).click(function(e){
e.preventDefault();
var $this = $(this);
var f = $this.parents('form');
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
$("#postResult").html(data);
});
return false;
})
In this code you are subscribing click event.
[e.preventDefault();][1] will stop your form from premature submittion and you can do the work you want.
I want to create a small count button but don't know how to make it in JavaScript...
Here's the code :
HTML
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins">
<input type="button" value="+" id="plus">
</div>
It must increase AND decrease the number in the input[type=text] when click on the -/+ button.
Can someone help me ?
You'd need two things.
Variables - which are the way to store information in JavaScript
Event handlers, which are the way to react to events in JavaScript
First, let's create a script tag, and put a JavaScript count variable in it, we'll put it in the bottom of our body tag:
<script>
var count = 0;
</script>
Now, we want to create a handler, that is something that executes whenever the plus and minus signs are clicked
<script>
var count = 0;
function plus(){
count++;
}
function minus(){
count--;
}
</script>
We've created two functions to call when the buttons are clicked, but we do not update the value in the HTML, or call them yet, let's update the value in the HTML.
We'll do so by document.getElementByID for the element to update and then change its value. Our script tag should look something liks this:
<script>
var count = 0;
var countEl = document.getElementById("count");
function plus(){
count++;
countEl.value = count;
}
function minus(){
count--;
countEl.value = count;
}
</script>
One last thing, we need to tell the elements in the DOM to execute those handlers.
<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
</div>
We've added them as event handlers to the DOM reacting to a click on the buttons, completing the task.
Now, here are some things we can improve:
We can use addEventListener to avoid polluting our DOM, and create unobtrusive JavaScript.
We can use a more advanced tool like KnockoutJS to handle binding the value we have to the DOM element instead of updating it ourselves.
We can read Eloquent JavaScript and learn more about how the language works!
Good luck, happy JavaScripting, and happy learning :)
DEMO FIDDLE FOR JAVASCRIPT
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" onClick = "doMinus();" />
<input type="button" value="+" id="plus" onClick = "doPlus();" />
</div>
code javaScript -
function doMinus(){
document.getElementById("count").value = --document.getElementById("count").value;
}
function doPlus(){
document.getElementById("count").value = ++document.getElementById("count").value;
}
jQuery Version
DEMO FIDDLE FOR JQUERY
code html -
<div id="input_div">
<input type="text" size="25" value="0" id="count" />
<input type="button" value="-" id="minus" />
<input type="button" value="+" id="plus" />
</div>
code jQuery -
$('#minus').click(function(){
$("#count").val(parseInt($("#count").val())-1);
});
$('#plus').click(function(){
$("#count").val(parseInt($("#count").val())+1);
});
U can write some script as shown
<script>
function increase(){
var a = 1;
var textBox = document.getElementById("count");
textBox.value = a;
a++;
}
</script>
<body>
<button type="button" onclick="increase()">+</button>
<input type="text" id="text">
</body>
similarly u can do it for - decrease button
in this case, I use input type range that display a slider :
<input type="range" id="myInputRange" value="15" min="0" max="50" step="1" onchange="document.getElementById('output').textContent=value" ><span id="output">15</span>
(instead of input type number that is not supported by IE)
This seems pretty simple.
(function() {
var count = 0;
var minusButton = document.getElementById("moins");
var plusButton = document.getElementById("plus");
var countBox = document.getElementById("count");
minusButton.onclick = function(e) {
countBox.value = --count;
};
plusButton.onclick = function(e) {
countBox.value = ++count;
};
})();