I have a number of <div> tags and I'm assigning them a function that allows me to display a kind of modal with details from the <div> element by changing it's css propriety 'display' to 'block' instead of 'none'. for some reason the modal doesn't display when I click on the <div> element. but when I assign the same function to a button it does.
$scope.CountryDetailStyle = {
'display': 'none'
};
$scope.CountryDetail = function(idCount, nameCount, descCount) {
$scope.detailId = idCount;
$scope.detailName = nameCount;
$scope.detailDesc = descCount;
$scope.CountryDetailStyle = {
'display': 'block'
};
// alert('idCount : '+idCount+' nameCount : '+nameCount+' descCount : '+descCount);
}
<div id="pageContent" ng-controller="myAdminController">
<div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)">
<label> {{country.nameCount}} </label><br/>
<img ng-src="uploads/{{country.image}}" alt="Image Not Found"><br>
</div>
</div>
<div>
<button ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>
<div class="countryDetails" ng-style=CountryDetailStyle>
<!--this is the modal i want to display -->
<div class="content">
<div class="boxHeader">
<label>{{detailName}}</label>
</div>
<div class="boxContent">
<form>
<p>{{detailDesc}}</p>
Read More
</form>
</div>
</div>
</div>
can someone tell me what's the problem? thanks.
you should not display/hide elements based on some display: none condition. thats what ng-show (and ng-if) is for. Use a $scope variable like $scope.isModalVisible and set that to true or false.
Then you can use on your element ng-show="isModalVisible"
var app=angular.module("myApp",[]);
app.controller("myAdminController",["$scope",function($scope){
$scope.CountryDetailStyle = {'display': 'none'};
$scope.countries=[
{
idCount:"1",
nameCount:1,
descCount:1
},{
idCount:"2",
nameCount:2,
descCount:2
},{
idCount:"3",
nameCount:3,
descCount:3
},{
idCount:"4",
nameCount:4,
descCount:4
}
]
$scope.CountryDetail = function(idCount, nameCount, descCount){
$scope.detailId = idCount;
$scope.detailName = nameCount;
$scope.detailDesc = descCount;
$scope.CountryDetailStyle = {'display': 'block'};
}
}]);
<html lang="en">
<head></head>
<body ng-controller="myAdminController" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="pageContent">
<div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)">
<label> {{country.nameCount}} </label><br/>
<button ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>
<br><br>
<div class="countryDetails" ng-style=CountryDetailStyle>
<div class="content">
<div class="boxHeader">
<label>{{detailName}}</label>
</div>
<div class="boxContent">
<form>
<p>{{detailDesc}}</p>
<a href="#" class="btn" style="text-decoration:none;" >Read More</a>
</form>
</div>
</div>
</div>
</body>
</html>
So I found a solution, still don't know why it works but it does. I moved the </div> of the div with the id="pageContent" to just before the body closing tag. That fixed everything. Thank you guys for the help.
Related
Update:
I have updated the question with the code I am using, for example based on (select) element if (option)paint(/option) selected I want to show or hide the whole "working class" div .working or if (option) Body Shop (/option) selected I want to show the whole "non-productive class" div .non-productive
I have multiple HTML elements with similar divs structure but different class names however some of these divs do share certain text, how can I use .show() to show those divs using their .class name which contains that certain shared text?
$('#qualifications').change(function(){
if($('#qualifications').val() == 'Paint'){
$('div:contains("Paint")').show();
}
})
});
this is bad example cause I want to target the element using class name instead of ('div:contains('Paint')')
here's the code:
<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>
<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>
<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>
Try this :
$(document).ready(function(){
$("#qualifications").on("change",function(){
if($(this).val() == 'Paint')
$("div.working:contains(Paint)").show();
})
})
I in below example use red border instead of show , because To show you what selected if you select paint of select box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>
<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>
<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#qualifications").on("change",function(){
if($(this).val() == 'Paint')
$("div.working:contains(Paint)").css({border:"2px solid red"});
})
})
</script>
</body>
</html>
You can just use this syntax: $('div[class*="Paint"]').show()
I'm trying to access text from an other div only by classes and with JQuery. I'm always struggling with JQuery because I'm not that familiar with it but for the most times i can get it to work somehow.
I tried something like this:
$(function() {
$(".quote_button").click(
function () {
var text = $(this).parent('.openticket_footer').prev('.openticket_warper').find('.answer_message').text();
alert(text);
}
);});
And many other ways but i cant figure it out.
The easiest way to show you what i want to do is by this picture:
Quote function
I want to click on the class="quote_button"button to access the text in class="answer_message"
Here the html code:
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
if($result["uID"]==$result_answer["uID"]){
echo '<p style="font-size: 8pt">Ersteller</p>';
}
echo '<p><strong>'. $result_answer["uName"] .' '. $result_answer["Firstname"] .'</strong></p>
<p style="font-size: 10pt">'. $result_answer["pName"] .'</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">'. $result_answer["Message"] .'</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
Thank You!
Try this : Get parent using parent method, move to previous div and then find answer_message to get the text
$(function() {
$(".quote_button").click(function () {
var $parent = $(this).parent('.openticket_footer').prev('.openticket_warper');
var text = $parent.find('.answer_message').text();
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
<p style="font-size: 10pt">Name of the candidate</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">Text Message is here</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
$(document).on('click', '.quote_button', function(){
alert($(this).parents('.openticket_warper').find('.answer_message').text());
});
I have a input with ng-model="articleTitle" and a div with {{articleTitle. When someone types in the input the div is updated.
However, I have a box that lists all the articles with <div class="element">...</div> around them. When a person clicks a list div I want the input to update then in turn the div that shows the title.
Everything works if I type in the input box. However, selecting an article does update the input box but not the div. If I add anything into the input box the div does update.
How, can I tell Angularjs that the input changed without interacting direction with the input?
----- edit -----
per request I've added some relevant code. This also include suggestions by mohamedrias :
html:
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" ng-controller="featureBox">
<div class="item">
<div class="edit">
<img src="/edit-image" />
<div class="form-elements">
<p class="title">Feature Settings</p>
<div class="element">
<p class="select-trigger">Article</p>
<div class="select-box" id="set-article">
<p class="title">Select Article</p>
<div class="element current" data-value="11">Test Article</div>
</div>
</div>
<div class="element">
<input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
</div>
...
</div>
</div>
<div class="item-content featureBackColor">
<h1>{{article.featureTitle}}</h1>
</div>
</div>
</div>
angular-scripts.js (loads in header)
var coverEditor = angular.module("coverEditor",['ngRoute']);
coverEditor.controller('featureBox',function($scope){
$scope.article = {};
});
admin.js (jquery that loads in the footer)
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
});
The purpose of the jquery is to get values/text from the selected article and place it in the input changing the value and hopefully updating the title via angular.
----- edit -----
code update
html:
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" id="featureBox" ng-controller="featureBox">
<div class="item">
<div class="edit">
<img src="/edit-image" />
<div class="form-elements">
<p class="title">Feature Settings</p>
<div class="element">
<p class="select-trigger">Article</p>
<div class="select-box" id="set-article">
<p class="title">Select Article</p>
<div class="element current" data-value="11">Test Article</div>
</div>
</div>
<div class="element">
<input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
</div>
...
</div>
</div>
<div class="item-content featureBackColor">
<h1>{{article.featureTitle}}</h1>
</div>
</div>
</div>
angular-script.js:
var coverEditor = angular.module("coverEditor",['ngRoute']);
coverEditor.controller('featureBox',function($scope){
$scope.article = {};
//set artcle
jQuery('#set-article .element').click(function(){
var articleElement = jQuery(this);
var articleTitle = articleElement.text();
var scope = angular.element("#featureBox").scope();
jQuery('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
scope.$apply();
});
});
Updated based on comment
As you're out of angular scope and changing the value in Jquery.
You must use $scope.$apply() after the jquery statement which sets the value.
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
$scope.$apply();
});
Assuming you're doing it in link function of directive or inside the controller.
If you're completely out of angular scope, then use
var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();
// change the selector based on your controller
So your code will be:
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();
});
This function keeps returning the value as undefined, so I abstracted it into this simple HTML structure and I still can't figure out why it's giving me a value of undefined.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="shoppingCartInner" class="cartItem">
<div class="col-lg-4" id="0">
<div class="cartOpenImage" name="openImage"></div>
<div class="cartOpenImageNumber">
<label name="openNumberLabel">Item Number:</label>
<div name="openNumberValue">0008</div>
</div>
<div class="cartOpenItemSupplier">
<label name="openSupplierLabel">Supplier:</label>
<div name="openSupplierValue"></div>
</div>
<div class="cartOpenItemDetails">
<div name="openDetails">Description: Test ITEM</div>
</div>
<div class="cartOpenItemMfr">
<label name="openMfrLabel">MFR / MFR Part Number:</label>
<div name="openMfrValue">/</div>
</div>
<div class="cartOpenItemQuantity">
<label name="openQuantityLabel">Quantity:</label>
<div name="openQuantityValue">3</div>
</div>
<div class="cartDelete">
<div onclick="removeItem(this);" class="btn btn-red" id="btn-0" value="1">Remove Item</div>
</div>
</div>
</div>
</body>
</html>
<script>
function removeItem(el) {
var y = el.value;
alert(y);
};
</script>
details because stackoverflow would now allow me to submit
it's simple:
div's are not input elements therefore they do not have a value property.
to get the value from that element you have two options:
1) change the element from div to:
<input type="button" ...
2) try to access the attribute using the getAttribute("value") method, example:
function removeItem(el) {
var y = el.getAttribute("value");
alert(y);
};
but the "right" way do it would be using the input element
you should use
var y = el.getAttribute("value");
Fiddle
Ive made a fiddle of my problem here.
http://jsfiddle.net/E9cUS/1/
JavaScript:
$('.top').click(function () {
var thisPage = $(this).closest('.yesNoItem');
$('.yesNoTick').stop().animate({"opacity" : 1},400, function () {
thisPage.find('.no .top').stop().animate({"opacity" : 0},400, function () {
$(this).css("display", "none");
});
});
});
$('.yesNoNext').click(function () {
$(this).closest('.yesNoItem').stop().animate({"opacity" : 0},400, function () {
//This isnt working? Please advise?
$(this).next('.yesNoItem').stop().animate({"opacity" : 1},400);
});
});
HTML:
<div id="stage">
<div class="yesNoOuter">
<div class="yesNoItem" style="opacity:1;">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 1</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
<div class="yesNoItem">
<div class="yesNoContainer yes">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
</div>
</div>
<div class="yesNoContainer no">
<div class="top">
<div class="yesNoTick"></div>
</div>
<div class="bottom">
<p>Text 2</p>
<div class="yesNoNext">More</span>
</div>
</div>
</div>
</div>
</div>
I've also put the line of code thats not working.
Bascially it is hiding the element that I want, but not fading the next one in...
Can any one advise based upon my code? Many thanks!
You had an error in your markup
<div class="yesNoNext">More</span>
if you correct that, next() works http://jsfiddle.net/E9cUS/2/
I think your HTML got messed up. The second .yesNoItem element is not a sibling but a child of the first .yesNoItem element (right click -> inspect element).
Probably because of <div class="yesNoNext">More</span> (opening div, closing span). The browser will attempt to correct this automatically and just ignore the closing span tag (at least this seems to be the case if you inspect the DOM).
If you correct your HTML it should work (at least it should select the right element).
If they are actually supposed to be nested, then .next() is the wrong method anyways.