Hi I am trying to pop a modal up when I click a button. The modal appears and disappears in a split second before I could use it to collect data. I am using asp.Net controls and Javascript to pop up the modal.
Below is the code for the modal
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Shows.aspx.cs" Inherits="BeanJJ.Shows" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Your BEANJJ shows
<p class="expressions">ADD, UPDATE or DELETE shows in this management panel</p>
<br />
<button class="add-show"><span style="color:cornflowerblue; font-size:2rem;">+</span> <%--Add Show--%></button><%--//yet to fix class names--%>
<button class="add-show"><span style="color:darkseagreen;font-size:2rem">∞</span> <%--Update Show--%></button>
<button class="add-show"><span style="color:red;font-size:2rem;">⁃</span><%--Delete Show--%></button>
<br />
<div class="addshow hidden">
<p class="expressions">Enter the details of the show and save.</p>
<br />
<label for="email">Show name</label>
<input type="text" runat="server" id="showname" name="showname" placeholder="Show name" />
<br />
<label for="platform">Platform</label>
<input type="text" runat="server" id="platform" name="platform" placeholder="Amazon/Netflix/HBO...etc" />
<br />
<label for="partswatched">Parts Watched</label>
<input type="text" runat="server" id="seasonswatched" name="seasonswatched" placeholder="Number of seasons watched" />
<br />
<label for="Note">Note</label>
<input type="text" runat="server" id="note" name="password" placeholder="Optional note" />
<br />
<label for="Completed">Whole show watched/</label>
<input type="text" runat="server" id="completed" name="completed" placeholder="Have you completed the show?" oninvalid="setCustomValidity('Enter number of seasons watched !!')" />
<br />
<label id="lblerror" name="lblerror" class="info" runat="server"></label>
<br />
</div>
<div class="overlay hidden"></div>
</fieldset>
</asp:Content>
And below is the JS for the code:
'use strict';
const addshow = document.querySelector('.add-show');
const modal = document.querySelector('.addshow');
const overlay = document.querySelector('.overlay');
//function for showing overlay to blur background when modal pops up
const showOverlayToBlurBackground = function () {
overlay.classList.remove('hidden');
}
//function to show modal pop ups will be used by more than one modal so it could be refined after I learn more JS
const showModal = function () {
modal.classList.remove('hidden');
showOverlayToBlurBackground();
}
addshow.addEventListener('click', showModal);
Well, when it NOT required to write code to have a click event? (seems kind of funny to write code to get code to work!!!).
When using jQuery.UI dialogs, bootstrap dialogs, sweetalert, and the 1000+ other dialog systems out there?
Well, if your button has a post back, then the dialog will display, but only flash by, since with a post-back the web page travels op to the server, page is processed, and then the WHOLE page is send back to to the client side. Thus the whole page re-plots, the displays, and then JavaScript starts running (if you have any that supposed to run). So, in effect, your WHOLE page is quite much starting over from scratch with a post-back.
So, dump this auto magic go around find a button, add some click event to that button:
addshow.addEventListener('click', showModal);
Get rid of above, and ONLY EVER use the above approach to add a click even when you crossed the desert, lost your family, are starving to death, and you have exhausted EVER OTHER possible choice on planet earth. Now, as I stated, it ok to use code to add click events, but ONLY AFTER you exhausted EVERY other possible road. Using code to attach click events to other bits and part on your page WHEN you don't need to? Then just don't.
Ok, so now lets take that button, and ensure that it does not post-back:
Say, like this
<button class="add-show"
onclick="showModal();return false">
<span style="color:cornflowerblue; font-size:2rem;">+</span>
</button>
So, by adding the return=false, then the button does not post-back, and you popup or whatever you have should work.
Also, note how nice it is to look at the button, and SEE and KNOW and have RIGHT in front of your eyes what the click event does? Sure seems better then having to trudge though all the markup, and then more js code, and buried somewhere in there we attach a click event? Good luck trying to maintain that code in a few years!!
On the other hand, I strong, and in fact BEYOND strong suggest you adopt a standard dialog system. Either bootstrap ones, or jquery.UI or at the very least make a choice.
I personal prefer jquery.UI dialogs. They don't look great (in fact close to ugly), but they just work, work great. , but they well, work well, and tend to be far easier to setup then bootstrap ones.
So, assuming jquery, and jquery.UI. Then our show model pop would be this:
Well, lets add a new function:
So, say this:
<button class="add-show"
onclick="showModal2();return false">
<span style="color:cornflowerblue; font-size:2rem;">+</span>
</button>
and now our dialog:
Just give your div a id, say like this:
<div id="mycooldialog" style="display:none" >
<p class="expressions">Enter the details of the show and save.</p>
<br />
<label for="email">Show name</label>
etc. etc. etc.
And now our jquery.UI pop function:
<script>
function showModal2() {
alert('start')
var mydiv = $("#mycooldialog")
mydiv.dialog({
modal: true, appendTo: "form",
title: "My Title in title bar", closeText: "",
width: "400px"
});
}
And now we have/see this:
So, adopt a standard pop dialog - you get a consistent look, but more so get a library that you can use over and over.
Related
I'm using materializeCss for my latest project and I have a problem.
I use sideNav to open a 'modal' inside of which is a contact form.
This contact form should be used in multiple occasions and different informations should be prefilled depending on which button does user click.
Let me explain it in an example:
If user clicks on Send Message then the forms input title should be something like
<input type='text' id='title' name='title' readonly value="General message">
and if user clicks on button Request Candy then this input should be something like
<input type='text' id='title' name='title' readonly value="I want candies!">
Since the sideNav opens by clicking on an element of type
<i class="material-icons">menu</i>
I had an idea to react on the click as
$(document).on('click', '.button-collapse', function() {
console.log('got it!');
$('#title').val('My custom message from data-* or something..');
})
but this doesn't work since probably materialize hijacks click events on these a.button-collapse's. I don't even get the console log got it!.
Does anybody know a way to pass some data to the newly open sideNav?
UPDATE:
jsfiddle
<input> is a "head only" tag - has no closing </input> and yet element has no content.
So you markup shall look like
<input type='text' id='title' name='title' value='General message' readonly></input>
UPDATE:
Change to this:
$('.button-collapse').on('click', function() {
$('#title').val($(this).data('title'));
console.log('I have been clicked');
})
and it will work. Seems like document or framework is consuming the event so you cannot handle it on that level.
Theres a bug in your event handler, this will work.
$('.button-collapse').sideNav({
menuWidth: 200, // Default is 240
edge: 'right', // Choose the horizontal origin
//closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
//draggable: true // Choose whether you can drag to open on touch screens
});
$(".button-collapse").click((e) => {
$('#title').val($(e.target).data('title'));
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<ul id="slide-out" class="side-nav">
<input type="text" id="title" name="title" value="my Title">
</ul>
Option 1
Option 2
I have a javascript handler method for giving a confirmation if page unloads.
<script language="javascript" type="text/javascript">
function handler(form)
{
confirm("are u sure?");
}
</script>
And I have used it here
<asp:Button ID="CreateTestButton" runat="server" Text="Submit" class="btn btn-default" OnUnload="handler(this)"
OnClick="CreateTestButton_Click"/>
Thanks for the help!
OnUnload is a server side event. It is called when the control unloads from memory on the server. You can't use it to call a JavaScript function.
I think your misunderstanding comes from the difference between server side and client side. In web frameworks, your server side code executes first and renders HTML (along with CSS and JavaScript). That's all sent to the client where it is then executed in the browser.
If you want to have the user confirm before they navigate away from the page, you need to add an event handler from the appropriate event on the client side. Like this:
window.onbeforeunload = function() {
// Do something
}
See this question for more detail.
Keep in mind that you should not abuse this capability by asking them on every page. You typically only do this if there is important page state, such as the user has partially filled out a form.
Well, may be you can do something like below,
<form action="YourPageName.aspx" method="post">
<input name="TextBox1" type="text" value="" id="TextBox1" />
<input name="TextBox2" type="password" id="TextBox2" />
<input type="submit" name="Button1" value="Button" id="Button1" />
</form>
I feel like I'm missing something simple, so apologies in advance if the answer should be obvious, but here goes:
On my page, I have a number of lists, the intended behaviour is for the user to click on a list item, and have a details pane populated with data (some of which is universal, some of which pertains to a particular day) -- so far so good. However, the details pane also contains a form that allows the user to select a different day. All of this works swimmingly in IE10. However, in Firefox, the "Select day" form is completely unresponsive -- the input box doesn't allow input, nor does the submit button work. In fact, none of the text in the details pane is selectable, it's visible, but the user can't do anything with it.
On the main page, I have an empty div with the id "details" that's loaded thusly:
$("ul").on('click', 'li', function(event) {
if($("#details").is(":hidden")) $("#details").toggle("slow");
var id = this.id.substring(2);
$.ajax(appRoutes.controllers.Dashboard.getDetails(id)).done(
function(data) { $("#details").html(data); });
});
The details div is loaded with this html:
<h2>Details</h2>
<div id="universal details">
...data...
</div>
<div id="dailyInfo">
<script>
$(function() {
$("#daiDate").datepicker({dateFormat: "mm-dd-yy"});
});
$("document").ready(function(){
$("#detailsform").submit(function(event) {
event.preventDefault();
appRoutes.controllers.Dashboard.dailyDetails().ajax({
data : $("#detailsform").serialize(),
success: function(data) { $("#dailyInfo").html(data); }
});
});
});
</script>
<h4>Daily Details</h4>
<form action="/dfdetails" method="GET" id="detailsform" enctype="multipart/form-data">
<input type="hidden" name="partID" value="146" />
<input type="text" name="dataDate" id="daiDate" value="05-22-2014" />
<input type="submit" value="Get" class="btn primary" id="getDAI">
</form>
<div "daily details">
...data...
</div>
</div>
To reiterate, this all works perfectly in IE10, for reasons beyond my control (corporate policy), I can't test this in Chrome. I'm using jQuery 2.1, if that makes any difference.
I have a program that acts sort of like a wizard, so it goes from Page 1, click next, page 2, click next, page 3, etc...on button clicks I am using javascript to put certain checkbox control values into localstorage. My problem is, when I press back to go to a previous page the control values are reset to 0/false. How can I make a pageload type effect in MVC to refill these values from local storage.
One option would be to use DIVs that are hidden:
#using(Html.BeginForm()) {
<div id="step1">
<!--form objects-->
<input type="button" id="to_step2_button" />
</div>
<div id="step2" style="display: none;">
<!--form objects-->
<input type="button" id="to_step1_button" value="Back" />
<input type="button" id="to_step3_button" value="Next" />
</div>
<div id="step3" style="display: none;">
<!--form objects-->
<input type="button" id="to_step2_button" value="Back" />
<input type="submit" id="finish_button" value="Finish" />
</div>
}
And use jquery/javascript hide/show the DIVs depending on the step.
This method has other benefits such as: you can use 1 page, 1 model, 1 form, no reloading needed.
Anecdote: I worked on a property rental website, and the listing form had 87 fields that were grouped, and each group had a tab in a tabbed view (which were just hiding and showing divs within the form). And we added Next and Previous buttons which cycled through the tabs. It worked really well, made sense to the client, and we didn't have to mess around with trying to maintain form field states between pages. Everybody won.
I decided to put JavaScript directly on my View that references my JavaScript file. I put what I called LoadPage() method in the #Javascript section at the top of my page...Inside the LoadPage() I had code that looked like this:
function loadPage(currentPage) {
var currentPage = currentPage;
if (window.localStorage.getItem("chkProvider") == 'true') {
document.getElementById('chkProvider').checked = true;
}
if (window.localStorage.getItem("chkSubscriber") == 'true') {
document.getElementById('chkSubscriber').checked = true;
}
}
This runs when the page loads and sets the values that I need updated. This is an example of how one might update their View using JavaScript and local storage. I hope my solution helps someone!
i just can't get rid of such .... error
i'm using a free textbox control on my page that is hidden by setting css properties to "none"
i want to make this free textbox available for edit whenever a user clicks on another
button actually by setting style.. to "block" without postingback my page
the result is showing the textbox but in a way that it's not enabled
i need some event to post back the page to make it available for edit
i know the reason should be something with rendering and etc but how can i solve this
in a way i achieve my targets on page such as:no postbacks ,. ...
any hep would be appreciated
thank all
using jquery
$(document).ready(function() {
$("#buttontoclick").click(function()
{
$("#textboxtoshow").show();
});
html
<input id="buttontoclick" type="submit" Text="Click me" />
<input id="textboxtoshow" type="text" style="display: none" />