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
Related
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.
I am developing a web application. You can find the website here.
If you click on the "road" icon, and after the menu opened the plus sign ("+"), a text input will appear with a label. This <ul> is using the jQueryUI Sortable plugin, to - of course - be able to sort the addresses after input.
I would like to add a click event to the label of these address fields, so that when a user clicks the number, a dialog box will appear where he/she can manually edit the number (it can get a little counter-productive if there are hundreds of addresses).
Since the <li> elements, in which the label and the inputs are gets created later, I tried to delegate the click event, like so:
$(document.body).on('click', '.control-label', function () {
console.log($(this));
});
However the event never fires. I am starting to think that maybe the sortable plugin disables my events to that label?
Here is the HTML code of an address field (label+input+delete button)
<li>
<div class="form-group">
<label class="col-md-1 control-label">1.</label>
<div class="col-md-11 input-group">
<input type="text" name="waypoints[]" class="form-control form-control-square waypoint animated fadeInRight" placeholder="Megálló" autocomplete="off" required=""><span class="input-group-btn animated fadeInRight"><button type="button" class="btn btn-square btn-danger btn-removewaypoint animated fadeInRight">×</button></span>
<div class="search-suggestions">
<ul></ul>
</div>
</div>
</div>
</li>
Here is the addWaypoint() function which adds a new row. This gets called every time when the user clicks the + button.
Edit: Apparently it isnt the sortable plugin, but something else that blocks the click event. Anyone got any ideas?
You need to setup a variable related to each control-label class in order to console.log it (or alert it, or use it anyway you want).
This is how I suggest you modify the javascript:
$(document.body).on('click', '.conrtol-label', function () {
var spanText=$(this).text();
console.log($(this));
alert(spanText);
});
Maybe this fiddle would help: http://jsfiddle.net/jo6957au/1/
Modified to use li's http://jsfiddle.net/jo6957au/3/
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.
EDIT: The buttons in the corner will not be submitting the search. The go button would still be clicked to submit it.
So, I'm working on a little project when I'm bored at work. It isn't meant to be anything serious and I'm teaching a bit of javascript, jquery, html and css as I go (Thanks to you fine folks of course). This part I can't figure out, or find anything about.
My page is: http://afrohorse.netau.net/
As of right now, I have a form that when you type in, and press go, it will search google. I plan on having it so I can click one of four buttons (located on each corner of the page) and it will change where it searches when you submit. Here is the code for my form.
<form onsubmit="location.href='https://www.google.ca/#q=' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go"><span>GO!</span></button>
</form>
So, Ideally, I would like to have it so "https://www.google.ca/#q=" would change to "http://www.youtube.com/results?search_query=" after clicking the youtube button. Is this doable? If so how would be the easiest way?
Thanks. :)
You're actually better off removing the form and just using a button. You could do what you have above like this...
HTML
<input type="text" id="myInput" class="search left" value="" autofocus/>
<button class="go" id="search-button">GO!</button>
Javascript
$(function() {
$("#search-button").on("click", function() {
var query = $("#myInput").val();
// if using Google search...
location.href = "https://www.google.ca/#q=" + query;
// if using Youtube search...
location.href = "http://www.youtube.com/results?search_query=" + query;
});
});
I would do it diffirently. I would give the button/ an ID. If this button/ is clicked i would check what button, so youtube or google. Then get the input and send the user to the correct link. so something like this:
google it
youtube it
<input type="text" id="input_search" placeholder="What are you searching for?">
the JS:
$('btn_google').addEvent("click", function(e){
e.preventDefault();
location.href='http://www.google.ca/#q='.$('input_search').value;
});
$('btn_youtube').addEvent("click", function(e){
e.preventDefault();
location.href='http://www.youtube.ca/results?search_query='.$('input_search').value;
});
btw i use mootools :) so the events are abit diffirent in jquery
I want to be able to add arbitrary text as link hrefs using wysihtml5. For example: I want to generate this link
I have worked out how to do this -- here's a simplified example of what I'm doing:
editor = new wysihtml5.Editor("text_area_content", {toolbar: "wysihtml5-toolbar"})
editor.composer.commands.exec("createLink", { href: "[~"+55+"~]" })
The problem I now have is that, after creating a link, when this link is selected in the editor, the dialog box shows the link as "http://current_url/[~55~]". I want it to show just "[~55~]".
I have tried to bind a new event to links within the editor, but I couldn't work out how to do that (since they are in an iframe).
How can I get the wysihtml5 link dialog to show the link address without displaying the current url?
In wysihtml5/src/toolbar/dialog.js a method _interpolate is called on the link which takes the link's attributes and displays them in the dialog. So whatever is in the href="..." is displayed in the input element of the dialog.
Example from the inline documentation:
https://github.com/xing/wysihtml5/blob/master/src/toolbar/dialog.js
<!-- original link -->
foo
<!-- dialog: -->
<input type="text" data-wysihtml5-dialog-field="href" value="">
<input type="text" data-wysihtml5-dialog-field="target" value="">
<!-- after calling _interpolate() the dialog will look like this -->
<input type="text" data-wysihtml5-dialog-field="href" value="http://www.google.com">
<input type="text" data-wysihtml5-dialog-field="target" value="_blank">
So if you can extend the method _interpolate in your application you could check when the attribute name is href and then just display the relative part (without the server name).