I am mapping the subjects object to the li element using knockout attribute mapping as given below.
<ul class="nav nav-pills nav-stacked" id="subjects">
<!-- ko foreach:Subjects -->
<li data-bind='attr:{"data-event":$data}'>
<a href="#" data-bind='text:subject_name + " by " + teacher_name;'>
</a>
</li>
<!-- /ko -->
</ul>
After that I have to access the subject object using the JQuery methods.
var originalEventObject = $(element).data('event');
Note: "element" is correctly here. The code is inside a loop and don't want to complicate the question by having full code here.
But always getting string as [Object Object] but not real JSON. Please help me on this.
Usually it's not good practice to access data such way. In case of drag & drop it depends is you clone element or not. But you can to this on drag start in case in you use clone. Just override "helper" function in draggable. And then put this data using jQuery if you need:
ko.dataFor
ko.contextFor
jsfiddler
$(function() {
var model = {
Subjects: [{text:'first'}, {text: 'second'}]
};
ko.applyBindings(model);
$('#result').text(JSON.stringify(ko.dataFor($('li')[0])));
});
Related
I am trying to define some basic HTML:
<ul id="menu" style="display:none">
<li><a class="actions" href="1">1</a></li>
<li><a class="actions" href="2">2</a></li>
<li><a class="actions" href="3">3</a></li>
</ul>
And append it dynamically using jquery like so:
$('#container').append($('#menu')).show()
However all that's returned is the physical Object:
<div id="container">[object Object]</div>
Can my menu div be appended in this fashion?
UPDATE: Revised where the show() is placed, but outcome remains the same
While this might work, I would probably run .show() AFTER you append the items to the page. The .append does not expect a function, it's just expecting a DOM element, which may be the cause of your problems.
This works for me (tried with jQuery 1.6 -> 2.1.3) Did you use a simplified code example in your question? I suspect you are using a string concatenation somewhere like in this thread: Jquery returns [object object] when trying to manipulate dom
This way it should work:
$('#container').append( $('#menu').show() );
I want to create dynamic ng-reapet and push the array element on click event:
my controler code is
$scope.AddlistItem = function (index) {
$scope.selecttaglist($scope.tag);
};
$scope.selecttaglist = function (tag) {
//var i=$scope.selectedTags.length;
angular.forEach($scope.selectedTags,function(tag,index){
console.log(tag.name);
$scope.selectedTagslist.push(tag);
})
And View Code:
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
Html Code
<div class="AddButtn" id="aDD{{item.name}}" ng-controller="ItemController" ng-click="AddlistItem()" ></div>
problem is that when i clicking on link. array element are pushing on all ng-reapet element.i want array will be push only on clicked element container. iam not sure my approach is write or wrong for doing this. i am new in angularjs. anyone can help on this.
If the model for ng-repeat is the same then you need different approach as model drives the view so i.e. you will need more than one
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
<ul id="boxElement" ><li ng-repeat="tag in selectedTagslist2" ng-controller="ItemController" ng-bind="tag.name" ></li></ul>
with a copy of the first element - angular.copy otherwise the object will be connected by reference and the effect will be same
hope that makes sense
I have a problem not sure how to reload a tab based on a selector in the previous tab.
My code for tab is here:
<ul class="nav nav-tabs">
<li class="active">
<a href="#addpropertypanel1" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'ADDRESS');?>
</s1>
</a>
</li>
<li>
<a href="#addpropertypanel2" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'GENERAL_INFORMATION');?>
</s1>
</a>
</li>
<li>
<a href="#addpropertypanel3" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'OTHER_INFORMATION');?>
</s1>
</a>
</li>
<li>
<a href="#addpropertypanel4" data-toggle="tab">
<s1>
<?php echo Jtext::_( 'PHOTOS');?>
</s1>
</a>
</li>
</ul>
In my GENERAL INFORMATION Tab, there is a category selector to choose a value. This value chosen will affect the content in Tab OTHER INFORMATION.
I would like to know how can i reload OTHER INFORMATION tab only with information based on the selection chosen in GENERAL INFORMATION.
I am a very inexperience programmer, any assistance is very much appreciated.
Regards
JavaScript
You can use JavaScript (jQuery) to manipulate the links based on their contents.
See this example: JsFiddle
var myValue = '';
switch( $('a[href=#addpropertypanel2]').text() ) {
// put here your all cases that Jtext::_( 'GENERAL_INFORMATION') can offer
case "abc":
myValue = "new value 1";
break;
case "def":
myValue = "new value 2";
break;
case "GENERAL_INFORMATION": // just for example manipulation
myValue = "new value 3";
break;
}
$('a[href=#addpropertypanel3]').text( myValue );
PHP
You could also manipulate it with PHP by switching the output of Jtext::_( 'GENERAL_INFORMATION') before inserting it to the links. So insert the value that you want after the switch instead of Jtext::_( 'OTHER_INFORMATION')
You need to bind AJAX events for loading the desired information from PHP and injecting it into the tab.
A little step by step tutorial:
The data source:
In PHP you have to write some code, that echos the desired data when calling a new URL (something like http://www.your_domain.com/get_info) depending on POST or GET parameter. For this example I'd like to use GET parameter, which would result to http://www.your_domain.com/get_info?address_id=1 (1 is just an example id value)
The container:
Then in the HTML add a container into the tab for your data. It needs an id, so you can use it with JavaScript. Something like <li><s1><div id="general_information"></div></s1></li>
The event: Now you've got a data source (the new URL) and a destination (the container in the tab of your HTML), all you need to do is use some JavaScript to add the data from the source into the destination. But before you can bind an event to your <select>, you should give it an id, to ease the binding (something like <select id="addresses_select">). I would highly recommend using jQuery for the binding, because it's easy for new developers and it just works in all browsers. (To add jQuery to your page, simply add the following snippet into the <head> of your HTML: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>). When using jQuery you can use the following snippet for retrieving the desired data and injecting it into your HTML container.
jQuery event snippet:
$('#addresses_select').change(function(){
var selected_address_id = this.value;
$.ajax({
url: "/get_info?address_id=" + selected_address_id,
success: function(desired_data_from_php) {
$("#general_information").html("<p>" + desired_data_from_php + "</p>");
}
});
});
That should be all.
Good luck :-)
PS: in the following fiddle you can see how the event for the <select> works: http://jsfiddle.net/LyLHL/
angular.js is great for complex client side JavaScript based web applications, but I also thinking about to use it for smaller simple JavaScript tasks.
For example I have a list with some items:
<ul>
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
Now I want to add some buttons to the HTML which should filter and/or sort the list after some user input, which should be an easy task.
Is there any way to extract the data from existing HTML elements to use them with angular.js? The data need to be in the HTML, so search engine could also get a hold of whats
Edit for clarity:
The end result would be that the data from the ul list will be pushed into a model of the controller that handling the list. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
If I push more objects into the model, the list should display them.
If I apply a filter to the model it should filter the li elements.
Best case scenario would be something similar to this:
<div ng-model="data">
<ul ng-repeat="object in data | filter:filterCriteria">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
<li data-id="{{object.id}}">{{object.text}}</li>
</ul>
</div>
Okay. Apparently there is no way to this in a default Angular.js application.
I ran into the same problem in a project I'm working on. My solution was to add the data from the html to a variable in my angular controller and then hide the initial html. This method keeps the original list in the html for SEO, old browsers and users without javascript. It replaces this list with an angular generated one for other users.
A working example using your code is pasted below or you can see it at this link.
I'm aware this is an old question so my answer might not be of help to the initial poster. My solution is aimed at anyone else who runs into the same problem we did.
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app">
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Ctrl($scope) {
$scope.objects = [];
$scope.init = function(){
$("ul.data").hide();
$("ul.data li").each(function(){
var $this = $(this);
var newObject = {
name: $this.html(),
id: $this.attr("data-id")
};
$scope.objects.push(newObject);
});
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl" ng-init="init()">
<ul>
<li ng-repeat="object in objects" data-id="{{object.id}}">{{object.name}}</li>
</ul>
<ul class="data">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
</div>
</div>
</body>
</html>
If I am understanding the question correctly, you could just use the angular.element().scope for the html element in question.
I use this method for certain interaction that can't be handled directly out of the box with angular.
First of all, I have to mention that I am a newbie in the JavaScript and JQuery world. I am not sure if I put down an appropriate title for my question but I'll try my best to explain my problem.
Scenario: I have a list of items whose names are being displayed. When one of the items is being clicked, a popup should show up and display the description of the item. The description is retrieved from the server via an AJAX call upon the click. The AJAX call requires the unique id of the item (in the database) to be provided. Here comes my problem which has two parts:
I don't know how and where to include the item id in the HTML. Note that the list only displays item name not id.
Assume 1) is resolved, how can I pass the id of the item that's being clicked to the AJAX call.
This is the HTML of the list of items. As you can see, it illustrates part 1) of my problem (ie. don't know how to include the ids in the HTML).
<ul>
<li class="item">Item1</li> <!-- this item has id=1 in the database -->
<li class="item">Item2</li> <!-- this item has id=2 in the database -->
<li class="item">Item3</li> <!-- this item has id=3 in the database -->
</ul>
Below is the JQuery click event handler that sends the AJAX call (ie. getJSON) to the server. Note that the part 2) of the problem is illustrated by the line var item_id = ??. Note that popup is a self-defined javascript.
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(".item").click(function() {
var item_id = ??
var data = {"item_id":item_id};
$.getJSON("/item/json", data, function(data) {
var name = data[0]["fields"]["name"]
var description = data[0]["fields"]["description"]
popup.call(this, name, description);
});
});
});
</script>
Additional Info: For the server side I use Django 1.3, and JQuery 1.5.2 for the client side.
I hope I have made my question clear and I appreciate any help from you experts. Thanks.
Here is an example that is similar to what I am looking for.
http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=DIALOG.pgm&wsnumb=214&wsprogtype=P
http://www.w3schools.com/tags/tag_li.asp
The < li > tag supports the following standard attributes:
id Specifies a unique id for an element
In this case use:
<ul>
<li class="item" id="item_1">Item1</li> <!-- this item has id=1 in the database -->
<li class="item" id="item_2">Item2</li> <!-- this item has id=2 in the database -->
<li class="item" id="item_3">Item3</li> <!-- this item has id=3 in the database -->
</ul>
And
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$(".item").click(function() {
var item_id = $(this).attr('id').replace('item_','');
var data = {"item_id":item_id};
$.getJSON("/item/json", data, function(data) {
var name = data[0]["fields"]["name"]
var description = data[0]["fields"]["description"]
popup.call(this, name, description);
});
});
});
</script>
Javascript (and jQuery in particular) are used for client-side scripting. As such, you will need to supply the data within the HTML document. You can use jQuery' Metadata plug-in to supply the item ID:
<li class="item" data="{ItemID: 'Your_Item_ID'}">Item1</li>
and retrieve it via:
var item_id_structure = $(this).metadata().ItemID;
If your item names are unique, then send the item names via Ajax.That way you can avoid Item ID's.
HTML5 natively supports data attributes that can be easily accessed with jquery
http://api.jquery.com/data/#data-html5
For example, given the following HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
1
All of the following jQuery code will work.
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";