I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
Related
I want to move my div class="contentlinks" tag with its content, to place it in the div class="row" after the div class="col-12".
Here is the basic html architecture :
<span id="data">
<section id="" class="thesectionQ">
<div class="container">
<div class="row">
<div class="col-12">
<h1>Title</h1>
</div>
</div>
</div>
</section>
<div class="col-12 contentlinks">
<a class="btn">link1</a><a class="btn">link2</a>
</div>
</span>
Tags are dynamically created in js... my problem is that I can't seem to use appendChild ...
my problem is that I can't seem to use appendChild ...
I'm trying to target my section with a class="thesectionQ" in a variable as well as my div class="contentlinks" that I want to move :
for example...
var thedata2 = document.getElementById('data').getElementsByClassName('thesectionQ');
var thedata = document.getElementById('data').getElementsByClassName('contentlinks');
thedata2.appendChild(thedata);
but I have errors ... and too often
give section id so it become easy.
document.querySelector('#sectionId div.row')
.appendChild(document.querySelector('div.contentlinks'))
My code is:
<div ng-controller="myCtrl">
<div class="row">
<div class="col-md-4 col-sm-3">
<checked-input ng-scope="$eventID"></checked-input>
</div>
<div class="col-md-4 col-sm-3">
<output ng-scope="$postbackOutput">***This is where I want the text typed in the textbox to go***</output>
</div>
<div class="col-md-3 col-sm-3">
<a ng-click="generateURL($eventID)" class="btn-plus">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
</div>
So what I'm trying to do is get that $eventID that's inside the first column div, then pass it as an argument to the function call generateURL() when the link in the <a> tag is clicked in the third column. Inside the controller I have:
app.controller('postbackCtrl', function($scope) {
$scope.generateURL = function(eventID) {
$scope.postbackOutput = eventID;
}
});
But it doesn't seem to be setting the text in the <output> correctly. Could anyone help? I've just started out with angular so it's a bit confusing.
You can just bind the var to the view with handlebar brackets:
<output ng-scope="$postbackOutput">
{{ postbackOutput }}
</output>
Here is a working plunkr
Attempting to auto increment step numbers for a form. Certain elements of the form may hide or show dependent on answers from above.
HTML
<div class="confirmation-step">
<span class="step-number"></span>
</div>
<div class="confirmation-step" style="display:none;">
<span class="step-number"></span>
</div>
<div class="confirmation-step">
<span class="step-number"></span>
</div>
jQuery
$('.confirmation-step').each(function() {
if($(this).is(':visible')) {
//set variable stepNum
//Haven't come up with anything good yet
} else {}
$(this).find('.step-number').html(stepNum);
});
Sample Output
<div class="confirmation-step">
<span class="step-number">1</span>
</div>
<div class="confirmation-step" style="display:none;">
<span class="step-number"></span>
</div>
<div class="confirmation-step">
<span class="step-number">2</span>
</div>
Thanks!
How about
$('.confirmation-step:visible .step-number').text(function(i) {return i+1;});
FIDDLE
I have a problem with my jQuery code, I want the page to slideToggle one div ones the other is clicked, the problem is that I don't want to write all the code again and again so I tried to create a code that works all the time, but I'm stuck. Box is the div which should be clicked and it should contain a class that's also used on the div that's gonna slideToggle. It should pull the class from the tab and then use it to slideToggle the right object. Please help :S (the elements are not placed close to each other which makes next or children not possible). If you have any questions - ASK!
The jQuery code of mine:
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("Klassen").slideToggle(300);
});
HTML:
<!-- These should be clicked -->
<div data-toggle-target="open1" class="box ft col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>HöstlovsLAN</h4>
</div>
</a>
<div data-toggle-target="open2" class="box st col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>NyårsLAN</h4>
</div>
<div data-toggle-target="open3" class="box tt col-lg-3">
<div class="mer">
Läs mer
</div>
<div class="bild"><img src="images/sakerhet.jpg"></div>
<h4>Säkerhet</h4>
</div>
<!-- These should be toggled -->
<div class="infobox" id="open1">
<h1>HöstlovsLAN</h1>
</div>
<div class="infobox" id="open2">
<h1>NyårsLAN</h1>
</div>
<div class="infobox" id="open3">
<h1>Säkerhet</h1>
</div>
EDIT - NEW PROBLEM - STILL AIN'T WORKING!
The code didn't work in my situation and would like you to take a look at the JS-fiddle I created:
http://jsfiddle.net/Qqe89/
undefined has presented the solution.
I would warn you about using this approach, if you add any classes to the .box div then your code will break.
Instead consider using data attributes to target the div to be toggled:
<div data-toggle-target="open1" class="box green"></div>
<div id="open1">
Opens
</div>
Which can then target with
$('.box').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).slideToggle(300);
});
jsFiddle with example using your html - crudely formatted sorry!
$(".box").click(function() {
var Klassen = $(this).attr("class");
$("."+Klassen).slideToggle(300);
});
class attribute may contain several classes ($(this).attr("class") OR this.className)
$("."+Klassen) will not work if there are several classes
"Klassen" does not correspond to any DOM element as there is no such tag in HTML.
A webpage with HTML looks like this:
<div id="Parent-div" > </div>
<div class="first-child-div"> </div>
<div class=" second-child-div">
<div class="first-grand-child"> </div>
<div class="second-grand-child"> </div>
<div class="Third-grand-child">
<div class="Grand-grand child">
<button class="Confirm-button">Confirm!</button>
</div>
</div>
</div>
I've Tried This code using greasemonkey to remove
a button from the div with the class named "Grand-grand child"
This is what I did:
var targetDiv = document.querySelector("#<Parent-div>. Grand-grand.child");
targetDiv.innerHTML = "Hello world!";
The Button wasn't replaced by the Hello world! text, What did I do wrong?
document.querySelector('.Grand.grand.child');
Demo: http://jsfiddle.net/yGv3v/
You should change <div class=" Grand grand child"> to <div class="Grand-grand-child"> and then you can select it with $('.Grand-grand-child').
Edit
If you want to use pure JavaScript, then you can select the node element via
var grandChildChildNode = document.getElementsByClassName('Third')[0].children[0]
This should work in sufficiently modern browsers.