I want to emit an event throught socket whene the drop of the div is done. Here is code that i have tried , i couldn't change the event.
<script>
function dragIt(theEvent) {
theEvent.dataTransfer.setData("Text", theEvent.target.id);
}
function dropIt(theEvent) {
var theData = theEvent.dataTransfer.getData("Text");
var theDraggedElement = document.getElementById(theData);
theEvent.target.appendChild(theDraggedElement);
theEvent.preventDefault();
}
</script>
<div id="parent-div" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<div class="myDIV myDIV1" class="ui-widget-content draggable" draggable="true" ondragstart="dragIt(event);" id="myDIV">
ARTEFACT2
</div>
<div class="myDIV myDIV2" class="ui-widget-content draggable" draggable="true" ondragstart="dragIt(event);" id="myDIV2">
ARTEFACT
</div>
</div>
Related
I have created this card list with several mudblazor components.
this is the code for this card list.
<MudGrid>
#foreach (var pincard in pincards)
{
<MudItem xs="6" md="3">
<div class="dashboard-tile-card">
<div class="dashboard-tile-card-header">
<span> #pincard</span>
<MudIconButton Icon="#Icons.TwoTone.PushPin"/>
</div>
<div class="dashboard-tile-icon ">
<img src="/img/finance.svg" width="50%" />
</div>
<div class="dashboard-card-action">
<a class="text-white">...</a><MudIcon Style="#($"color:{Colors.Grey.Lighten5};")" Icon="#Icons.Filled.ArrowForward"></MudIcon>
</div>
</div>
</MudItem>
}
</MudGrid>
#code{
List<string> pincards = new List<string>();
protected override async Task OnInitializedAsync()
{
pincards.Add("Mycard1");
pincards.Add("Mycard2");
pincards.Add("Mycard3");
pincards.Add("Mycard4");
}
}
The purpose of this top right corner pin button is to provide an unpinning option for each card if we want. when we press that pin button, it should be unpinned or removed from this list. then I need to know how to do this ?? appreciate your help
First of all, you can create your card with the component MudCard from MudBlazor it will be easier
To answer your question . Create a function
private void RemovePinCard(string cardId){
pincards.Remove(cardId);
}
<MudGrid>
#foreach (var pincard in pincards)
{
<MudItem xs="6" md="3">
<div class="dashboard-tile-card">
<div class="dashboard-tile-card-header">
<span> #pincard</span>
<MudIconButton Icon="#Icons.TwoTone.PushPin" OnClick="#(()=>RemovePinCard(pincard))"/>
</div>
<div class="dashboard-tile-icon ">
<img src="/img/finance.svg" width="50%" />
</div>
<div class="dashboard-card-action">
<a class="text-white">...</a><MudIcon Style="#($"color:{Colors.Grey.Lighten5};")" Icon="#Icons.Filled.ArrowForward"></MudIcon>
</div>
</div>
</MudItem>
}
</MudGrid>
I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup.
In my routes (located under app/client), I have this:
Router.map(function() {
this.route('home', {
path: '/',
template: 'dashboardWrapper',
waitOn: function() {
return Meteor.subscribe('nasdaq');
},
cache: true
});
});
My dashboardWrapper template looks like this:
<template name="dashboardWrapper">
{{#if Template.subscriptionsReady}}
{{> dashboard}}
{{/if}}
</template>
My dashboard template looks like this:
<template name="dashboard">
<div class="container">
<h2>Priority - 1 Incidents Over Time</h2>
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
</div>
</div>
<div class="row">
<div id="gain-loss-chart">
<strong>Days by Gain/Loss</strong>
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="quarter-chart">
<strong>Quarters</strong>
<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="day-of-week-chart">
<strong>Day of Week</strong>
<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="fluctuation-chart">
<strong>Days by Fluctuation(%)</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-move-chart">
<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | Reset All
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
</template>
The relevant part of Meteor.client looks like this:
if (Meteor.isClient) {
var ndx,data;
Template.dashboardWrapper.onCreated( function() {
var template = this;
template.subscribe("nasdaq");
});
Template.dashboard.onCreated( function() {
data = Nasdaq.find().fetch();
ndx = crossfilter(data);
});
Template.dashboard.onRendered(function(){
var self = this;
self.subscribe("nasdaq", function() {
self.autorun(function() {
data = Nasdaq.find().fetch();
});
});
What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up.
What happens is absolutely nothing - no data and no errors.
If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total).
Is there a way reliably force the app to wait until every single document loads up?
Try subscribe right before load the current template, may be it will work.
Router.route('/dashboardWrapper/:_id', {
name: 'dashboardWrapper',
waitOn: function () {
return [
Meteor.subscribe('nasdaq')
];
},
data: function () {
return Nasdaq.findOne(this.params._id);
}
});
I need to search for a keyword in the span element (class "D") and then based on the matching criteria, I want to click on the Choose input element button.
Assuming I am searching for "Test", I would like to see working code on how to achieve this.
Example markup:
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test</span>
</div>
</div>
Below is an code sample in java
//Get the text from span
String text = driver
.findElement( By.xpath("//span[#class='js-open-more-info']") )
.getText();
//if the text is equal to Test then click on the button
if( text.equals("Test") ){
driver.findElement( By.xpath("//input[#class='C']") ).click();
}
EDIT
For dealing with multiple divs of same structure sample html(just tweaked ur html and added multiple divs)
HTML
<html>
<body>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test1</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test2</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test3</span>
</div>
</div>
</body>
<script>
document.getElementsByClassName('C')[2].addEventListener("click", myFunction);
function myFunction() {
alert('deleted');
}
</script>
</html>
Code in Java
//get all the divs into a list
List<WebElement> divs = driver.findElements(By.xpath("//div[#class='A']"));
//loop through the list
for(int i=0;i<divs.size();i++)
{
//get text of all the span elements inside multiple divs
String text=divs.get(i).findElement(By.xpath(".//span[#class='js-open-more-info']")).getText();
System.out.println(text);
//if text of span element is equal to Test3 click on the respective delete button
if(text.contentEquals("Test3")){
divs.get(i).findElement(By.xpath(".//input[#class='C']")).click();
}
}
Hope this helps you....Kindly get back if you need any further help
I have a modal window with angular-material tabs and a ui-bootstrap datepicker. When I open datepicker, the text field moves up, and I cannot access either the datepicker or the field.
Here's a demo in jsFiddle
Here's my code:
var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
.controller('myController', function ($scope, $modal) {
$scope.showModal = function () {
var modalInstance;
modalInstance = $modal.open({
templateUrl: "addNew.html",
controller: 'myController2',
size: 'lg'
});
};
$scope.showModal();
})
.controller('myController2', function ($scope, $modal) {
$scope.datepickers = {
start: false
}
$scope.openDatepicker = function ($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.datepickers[which] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.dateFormat = 'mediumDate';
});
<div ng-app="myApp">
<div ng-controller="myController">
<script type="text/ng-template" id="addNew.html">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add</h3>
</div>
<div class="panel-body">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="date">
<div class="form-horizontal">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<label for="dateStart" class="col-sm-2 col-md-4 control-label">
Date Start
</label>
<div class="col-sm-10 col-md-8">
<div class="input-group ui-datepicker">
<input type="text"
class="form-control"
name="dateStart"
id="dateStart"
datepicker-popup="{{dateFormat}}"
ng-model="campaign.dateStart"
is-open="datepickers.start"
datepicker-options="dateOptions"
ng-required="true"
ng-click="openDatepicker($event, 'start')"
close-text="Close"/>
<span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
</md-tabs>
</div>
</div>
</div>
</script>
</div>
</div>
I used a css trick to add the scroll bar in this fiddle, but it's not very neat. So I was wondering if there is a way to expand the tab height when the datepicker is opened or the datepicker is shown over a modal window like the select window opens.
You'll want to have the dropdown datepicker appear as part of the regular document flow, that way it will occupy space and the tab picker will automatically make room for it. It doesn't do that currently because it uses .dropdown-menu, to which Bootstrap adds position: absolute;
Just override like this:
.dropdown-menu[datepicker-popup-wrap] {
position: static;
}
There are some other stylistic things you can do, but that is the basic principle.
Demo in jsFiddle
I have the following code in this jsFiddle.
The problem I'm having is that my child items do not update properly.
I can Click "Edit User" with a problem and see the data changing, but when I attempt to add a note or even if I were to write an edit note function, the data does not bind properly
http://jsfiddle.net/jkuGU/10/
<ul data-bind="foreach: Users">
<li>
<span data-bind="text: Name"></span>
<div data-bind="foreach: notes">
<span data-bind="text: text"></span>
Edit Note
</div>
Add Note
Edit user
</li>
</ul>
<div id="userModal" data-bind="with: EditingUser" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing user</h3>
</div>
<div class="modal-body">
<label>
Name:</label>
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
Save changes
</div>
</div>
<div id="addJobNoteModal" data-bind="with: detailedNote" class="fade hjde modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>
Editing Note</h3>
</div>
<div class="modal-body">
<label>
Text:</label>
<input type="text" data-bind="value: text, valueUpdate: 'afterkeydown'" />
</div>
<div class="modal-footer">
Save changes
</div>
</div>
function Note(text) {
this.text = text;
}
var User = function(name) {
var self = this;
self.Name = ko.observable(name);
this.notes = ko.observableArray([]);
}
var ViewModel = function() {
var self = this;
self.Users = ko.observableArray();
self.EditingUser = ko.observable();
self.detailedNote = ko.observable();
self.EditUser = function(user) {
self.EditingUser(user);
$("#userModal").modal("show");
};
this.addNote = function(user) {
var note= new Note("original")
self.detailedNote(note);
$("#addJobNoteModal").find('.btn-warning').click(function() {
user.notes.push(note);
$(this).unbind('click');
});
$("#addJobNoteModal").modal("show");
}
for (var i = 1; i <= 10; i++) {
self.Users.push(new User('User ' + i));
}
}
ko.applyBindings(new ViewModel());
Change this:
$("#addJobNoteModal").find('.btn-warning').click(function() {
To this:
$("#addJobNoteModal").find('.btn-primary').click(function() {
You were targetting the wrong button :)
I think the problem after all was that you must bind to "value:" not "text:" in a form input/textarea.