I want to assign values to inside id how can i do that in Jquery
controller.cs code
public GroupModel Get()
{
IGroupTypeRepository groupTypeRepo = new GroupTypeRepository();
IGroupRepository groupRepo = new GroupRepository();
var model = new GroupModel();
model.GroupTypes = groupTypeRepo.GetAll().ToList();
Guid first = model.GroupTypes.FirstOrDefault().Id;
model.Groups = groupRepo.GetAll().Where(s => s.Type == first).ToList();
return model;
}
I tried like following
function getGroups() {
debugger;
$.getJSON(
"groupvalues",
function (data) {
if (data.GroupTypes != undefined) {
$.each(data.Groups, function (jindex, jvalue) {
debugger;
if (jvalue.Id != undefined) {
$("#GroupsTemplate").tmpl(jvalue).appendTo(".span9 .row #projects");
}
});
}
}
<div class="span9">
<div class="row">
<section id="projects">
</section>
</div>
</div>
<script id="GroupsTemplate" type="text/html">
<ul id="thumbs">
<li class="item-thumbs span3 Dhol">
<span class="font-icon-music"></span>${GroupType.TypeName}<br />
</p></div> </li>
</ul>
</script>
I guess i'm going wrong here in js function
$("#GroupsTemplate").tmpl(jvalue).appendTo(".span9 .row #projects");
I think that instead of this:
${GroupType.TypeName}
you must have only this:
${TypeName}
because the GroupType is the parameter object for the template (implicit).
Hope this helps. Cheers
Related
Dear Stackers
I am having following issue. I want to make a Website, with only one HTML file, and insert the Content based on which li element got clicked. And a standard text should already be there.
Now my issue is, that it will not change the value="" of id="content". It will not even writeContent for some reason. I am quite sure I am making a simple and fundamental mistake. I know that it is not yet optimized, but I need to get it working like this, before minimizing anything.
You can currently ignore the function writeContent part, since that will do the innerHTML insertion later on. - currently no Errors
function myHome() {
document.getElementById("content").value = "home_content";
writeContent("<p>myHome</p>");
}
function myKontakt() {
document.getElementById("content").value = "kontakt_content";
writeContent("<p>myKontakt</p>");
}
function myTeam() {
document.getElementById("content").value = "team_content";
writeContent("<p>myTeam</p>");
}
function myUber() {
document.getElementById("content").value = "uber_content";
writeContent("<p>myUber</p>");
}
document.getElementById("home_li").addEventListener("click", myHome);
document.getElementById("kontakt_li").addEventListener("click", myKontakt);
document.getElementById("team_li").addEventListener("click", myTeam);
document.getElementById("uber_li").addEventListener("click", myUber);
function writeContent() {
var get_content_attribute = document.getElementById("content").getAttribute("value");
if (document.getElementById("content").getAttribute("value") == "home_content") {
} else if (get_content_attribute = "kontakt_content") {
} else if (get_content_attribute = "team_content") {
} else if (get_content_attribute = "uber_content") {
}
}
<div id="menu">
<ul>
<li>Stalinger
</li>
<li>Kontakt
</li>
<li>Unser Team
</li>
<li>Über Uns
</li>
</ul>
</div>
<div id="content" value="home_content">
<p class="content_text">TEXT
</p>
</div>
1.Looks like div can't has value attribute, try to use "data-value"
or something like that and everything will works fine.
2. you are adding to event listeners on every button when using "click" in html and "addEventListener" in js
3. You should use "event.preventDefault()" to prevent page from reloading when pressing ""
<html>
<head></head>
<body>
<div id="menu">
<ul>
<li>Stalinger</li>
<li>Kontakt</li>
<li>Unser Team</li>
<li>Über Uns</li>
</ul>
</div>
<div id="content" data-value="home_content">
<p class="content_text">TEXT
</p>
<script>
function myHome(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"home_content");
writeContent("<p>myHome</p>");
}
function myKontakt(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"kontakt_content");
writeContent("<p>myKontakt</p>");
}
function myTeam(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"team_content");
writeContent("<p>myTeam</p>");
}
function myUber(e){
e.preventDefault();
document.getElementById("content").setAttribute('data-value',"uber_content");
writeContent("<p>myUber</p>");
}
document.getElementById("home_li").addEventListener("click", myHome);
document.getElementById("kontakt_li").addEventListener("click", myKontakt);
document.getElementById("team_li").addEventListener("click", myTeam);
document.getElementById("uber_li").addEventListener("click", myUber);
function writeContent(html) {
var div = document.getElementById("content");
var get_content_attribute = document.getElementById("content").getAttribute("data-value");
if(document.getElementById("content").getAttribute("data-value") == "home_content"){
div.innerHTML = html;
} else if(get_content_attribute = "kontakt_content"){
div.innerHTML = html;
} else if(get_content_attribute = "team_content"){
div.innerHTML = html;
} else if(get_content_attribute = "uber_content"){
div.innerHTML = html;
}
}
</script>
</div>
</body>
</html>
this code is working for me, but architecture is pretty ugly, maybe try to read about how frontend frameworks manage this things.
use setAttribute as document.getElementById("content").setAttribute ("value","XXXXXX") – by User: Vinod Louis
Worked like a charm.
You can check updated code:
To assign attribute you need to use setAttribute instead of value
function myHome() {
document.getElementById("content").setAttribute("value","home_content");
writeContent("<p>myHome</p>");
}
function myKontakt() {
document.getElementById("content").setAttribute("value","kontakt_content");
writeContent("<p>myKontakt</p>");
}
function myTeam() {
document.getElementById("content").setAttribute("value","team_content");
writeContent("<p>myTeam</p>");
}
function myUber() {
document.getElementById("content").setAttribute("value","uber_content");
writeContent("<p>myUber</p>");
}
document.getElementById("home_li").addEventListener("click", myHome);
document.getElementById("kontakt_li").addEventListener("click", myKontakt);
document.getElementById("team_li").addEventListener("click", myTeam);
document.getElementById("uber_li").addEventListener("click", myUber);
function writeContent() {
var get_content_attribute = document.getElementById("content").getAttribute("value");
alert(get_content_attribute);
if (document.getElementById("content").getAttribute("value") == "home_content") {
} else if (get_content_attribute = "kontakt_content") {
} else if (get_content_attribute = "team_content") {
} else if (get_content_attribute = "uber_content") {
}
}
<div id="menu">
<ul>
<li>Stalinger
</li>
<li>Kontakt
</li>
<li>Unser Team
</li>
<li>Über Uns
</li>
</ul>
</div>
<div id="content" value="home_content">
<p class="content_text">TEXT
</p>
</div>
How can i pass html through in AngularJS controller ?
Here is my list.html:
<div class="col-xs-3" ng-repeat="item in companyData">
<a ng-click="getPackageInfo({{item.iCompanyID}},'{{item.vCompanyName}}')" class="block panel padder-v bg-primary item">
<span class="text-white block">{{item.vCompanyName}}</span>
</a>
<div id="packagehtml"></div>
</div>
<div id="lp" class="col-md-12 listing-div hidden"></div>
in controller.js:
$scope.pData = [];
$scope.getPackageInfo = function(id,name) {
$scope.name = name;
var summery = SubscriptionoptioncompanylistFactory.getSummary(id);
document.getElementById("lp").classList.remove("hidden");
$('.packages-data').html('');
$('#loading').show();
SubscriptionoptioncompanylistFactory.getPackageInDetail(id).
success(function(data) {
if(data != 0) {
$("#lp").html(summery); // this is used to append the data
document.getElementById("np").classList.add("hidden");
Array.prototype.push.apply($scope.pData, data);
$('#loading').hide();
} else {
document.getElementById("lp").classList.add("hidden");
document.getElementById("np").classList.remove("hidden");
$('#loading').hide();
}
});
};
Here, I have wrote $("#lp").html(summery);, in that div I have to append html which comes from var summery = SubscriptionoptioncompanylistFactory.getSummary(id);. But this is not going to append the data. In console I can see that data comes in summary variable. How can I do?
have a look at below modifications
Use angular ng-show for showing/hiding elements
Use data binding and avoid Jquery like Dom manipulation
<div class="col-xs-3" ng-repeat="item in companyData">
<a ng-click="getPackageInfo({{item.iCompanyID}},'{{item.vCompanyName}}')" class="block panel padder-v bg-primary item">
<span class="text-white block">{{item.vCompanyName}}</span>
</a>
<div id="packagehtml"></div>
</div>
<div id="lp" ng-show="lbVisible" class="col-md-12 listing-div hidden">{{summaryBinding}}</div>
and the controller would look like :
$scope.pData = [];
$scope.getPackageInfo = function (id, name) {
$scope.name = name;
var summery = SubscriptionoptioncompanylistFactory.getSummary(id);
$scope.lbVisible = true; //document.getElementById("lp").classList.remove("hidden");
$('.packages-data').html('');
$scope.loadingVisible = true; //$('#loading').show();
SubscriptionoptioncompanylistFactory.getPackageInDetail(id).
success(function (data) {
if (data != 0) {
$scope.summaryBinding = summery; // $("#lp").html(summery); // this is used to append the data
$scope.npVisible = false; // document.getElementById("np").classList.add("hidden");
Array.prototype.push.apply($scope.pData, data);
$scope.loadingVisible = false; // $('#loading').hide();
} else {
$scope.lbVisible = false; //document.getElementById("lp").classList.add("hidden");
$scope.npVisible = false; //document.getElementById("np").classList.remove("hidden");
$scope.loadingVisible = false; // $('#loading').hide();
}
});
};
your snippet is not showing elements that you use :
np, #loading so just find them and add the `ng-show` with the proper scope variable : `npVisible , lbVisible , loadingVisible`
and note that we add the data using summaryBinding
hope this helps :)
Basicaly, I have viewModel in KO having array of 2 values, I need to change css class prop of element (main) when <a> elemets are being clicked (when 1st li>a "Val1" clicked, <main class="stl1">... and so on). Strangely , nothing happends to <main>:
<script>
var mainViewModel = function () {
var self = this;
self.classArr = ['stl1', 'stl2'];
self.cssUsed = ko.observable(0);
self.getClass = function ( data, event ) {
var dat = event.target.value;
self.cssUsed = self.classArr[dat];
console.log( dat + ' : ' + self.cssUsed );
}
}
ko.applyBindings( new mainViewModel() );
</script>
<div class='page'>
<header>
<nav>
<ul >
<li>Val1</li>
<li>Val2</li>
</ul>
</nav>
</header>
<div id='maincontent'>
<main data-bind="css: cssUsed" >
<div class="center"></div>
</main>
</div>
</div>
You got it almost right. The problem was that your were assigning the value in the wrong way. Instead of
self.cssUsed = self.classArr[dat];
try
self.cssUsed(self.classArr[dat]);
Check it out here
I have a problem i cannot figure out..
My example on JSbin: http://jsbin.com/wiwuwepe/1/edit
Basicly, in
<script id="QuestionTemplate" type="text/html">
<div class="well">
<div class="form-group">
<div class="col-md-5">
<p class="form-control-static" data-bind="text: QuestionText"></p>
</div>
</div>
<div class="form-group">
<div class="col-md-5">
<!-- THIS IS WHERE I WANT COMPUTED FOR EACH SURVEYQUESTION -->
<p class="form-control-static" data-bind="text: QuestionTypeTemplate"></p>
</div>
</div>
</div>
QuestionTypeTemplate shows undefinded, although model for this is
function SurveyQuestion(data) {
var self = this;
self.QuestionText = ko.observable(data.QuestionText);
self.QuestionType = ko.observable(data.QuestionType);
self.QuestionAnswers = ko.observableArray(data.QuestionAnswers);
self.QuestionTypeTemplate = ko.computed(function () {
/*
if( self.QuestionType() == 0) {
return "radio";
} else if (self.QuestionType() == 1) {
return "checkbox";
}
*/
return "This is what i want";
}, self);
}
Please, check full code on jsbin. Just uncomment that 1 line in QuestionTemplate script/html.
When I compare my example with http://knockoutjs.com/examples/cartEditor.html , I really cant find big difference, why that works, and why mine does not.
on your Survey function
instead of this
self.SurveyQuestions = ko.observableArray(data.SurveyQuestions);
you need to use this
var questions = [];
for(i = 0 ; i<data.SurveyQuestions.length ; i++) {
questions.push(new SurveyQuestion(data.SurveyQuestions[i]));
}
self.SurveyQuestions = ko.observableArray(questions);
My html page is :
<div data-role="content">
<div id="menu">
<ul id="menu" data-role="listview" class="ui-listview "
data-bind="foreach: menu">
<li>
<a data-bind="text:name, attr: {href: urlmenu}"></a>
<a href="#" data-bind="{ click: $parent.remove }"
data-role="button" data-icon="delete"></a>
</li>
</ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul id="footer">
<li>Home</li>
<li>Asignaturas</li>
<li>Mensajes</li>
</ul>
</div>
</div>
And my JS code is :
$( document ).on( "pagebeforechange" , function(e, data) {
var toPage = data.toPage[0].id;
if( toPage == "home"){
ko.cleanNode(document.getElementById('menu'));
menu();
}
});
function menuViewModel(){
var self = this;
self.menu = ko.observableArray([]);
self.menu.removeAll();
self.menu = ko.observableArray([
new EditMenuViewModel("Perfil"),
new EditMenuViewModel("Asignaturas")
]);
}
function EditMenuViewModel(name) {
this.name = ko.observable(name);
this.urlmenu = ko.observable("#"+name);
};
function menu(){
var menuviewModel = new menuViewModel();
ko.applyBindings(menuviewModel, document.getElementById('menu'));
}
When I load my page for the first time everything works fine, but when I click on link footer home, the array content is duplicated.
Example is here:
Any idea?
Thanks
You have two DOM elements with id=menu, a div and a ul.
<div id="menu"> <!-- <-- change this id for example -->
<ul id="menu" data-role="listview" class="ui-listview "
data-bind="foreach: menu">
...
</ul>
</div>
Ids should be unique, you need to change the id on one of your elements, hopefully this will also solve your problem.
Update
As you can read in this thread, ko.cleanNode will not remove items created using foreach binding.
You need to change your approach.
Here is a jsFiddle that reproduces your problem.
What you can do is stop cleaning+applying bindings, and update your observableArray instead:
$( document ).on( "pagebeforechange" , function(e, data) {
var toPage = data.toPage[0].id;
if( toPage == "home"){
menuviewModel.menu.removeAll(); //clear menu
//add whatever menu item you need
menuviewModel.menu.push(new EditMenuViewModel("New Menu1 " + (new Date()).getTime()));
menuviewModel.menu.push(new EditMenuViewModel("New Menu2 " + (new Date()).getTime()));
}
});
function menuViewModel(){
var self = this;
self.menu = ko.observableArray([]);
self.menu.removeAll();
self.menu = ko.observableArray([
new EditMenuViewModel("Perfil"),
new EditMenuViewModel("Asignaturas")
]);
}
function EditMenuViewModel(name) {
this.name = ko.observable(name);
this.urlmenu = ko.observable("#"+name);
};
//bind only once
var menuviewModel = new menuViewModel();
ko.applyBindings(menuviewModel, document.getElementById('menu'));
Here is an example
This is old thread, but I've found a (ugly) way to overcome it:
before the cleaning, I'm caching the observable array values and set it with only 1 value. After the rebind, I'm restoring the cached values. Something like this:
var self = this;
self.myArray = ko.observableArray(['val1', 'val2']);
var tempArray = [];
self.BeforeCleaning = function () {
tempArray = self.myArray()
self.myArray(['temp value']);
};
self.AfterRebinding = function () {
self.myArray(tempArray);
};
horrible, but works for me.