Knockout binding attribute via Javascript - javascript

Can I do something like
var friendss="<div id='two' data-theme='a' class='ui-content'>
<ul id='tust'
data-role='listview'>
<li><a href='#'><img data-bind='attr:{src: friend.img}' alt='Friend'><p data-bind='text:
friend.name'></p>
</a>
</li>
</ul>
</div>";
And then
$("#tust").attr("data-bind","foreach:{data:friends(), as:'friend'}");
Basically what I'm trying to achieve here is, appending html to body via js and then inserting data-bind attribute also via js( after dom with above html has been populated)
If not, how can I achieve the above i.e. inserting data-bind via javascript.
Thanks

You could use the template-binding. E.g. define the template:
<script type="text/html" id="myTemplate">
<div id="two" data-theme="a" class="ui-content">
<ul id="tust" data-bind="foreach: {data: friends, as: 'friend'}" data-role="listview">
<li>
<a href="#">
<img data-bind="attr: {src: friend.img}" alt="Friend">
<p data-bind="text: friend.name"></p>
</a>
</li>
</ul>
</div>
</script>
Then the actual binding:
<div id="random123" data-bind="template: {name: 'myTemplate', data: {friends: friends()}}"></div>
if you need to dynamically add that, just bind the DOM-element.
ko.applyBindings(theMVVM, $("#random123")[0]);

Related

Change content from menu

I have different titles on my left menu and I want to change the text by clicking per each title, Please let me know what function should I write on javascript and which Html tags should I use.
Here is My Titles Html script:
<div class="widget">
<ul class="feature-list">
<li>Транспорт на свадьбу</li>
<li>Развозка персонала</li>
<li>Туризм</li>
<li>Ретроавтомобили</li>
<li>Бизнес-поездки</li>
<li>Экскурсии</li>
</ul>
</div>
I believe if you would like to change the tags to be changed onclick you should add the tags You will need to change the http request to your requested link
<div class="menu">
<div id="nav">
<ul>
<li>
<font color="#000">ЛЕГКОВЫЕ АВТОМОБИЛИ</font>
</li>
<li>
ЛИМУЗИНЫ
</li>
<li>
МИКРОАВТОБУСЫ (4-20 МЕСТ)
</li>
<li>
АВТОБУСЫ (25-30 МЕСТ)
</li>
<li>
АВТОБУСЫ (45-50 МЕСТ
</li>
</ul>
</div>
</div>
Does this answer your question?

Redactor - Uncaught TypeError: Cannot read property 'insert' of undefined

I'm trying to use Redactor in my project. I want to add some text to the editor upon button click.
The API says you can do it like this:
function insertHtml()
{
var html = '<h3>INSERTED</h3>';
$('#redactor').redactor('insert.html', html);
}
Well, my code looks like this:
<button onclick="insertHtml();">Insert</button>
<script type="text/javascript">
function insertHtml()
{
var html = '<h3>INSERTED</h3>';
$('.redactor-box').redactor('insert.html', html);
}
</script>
Redactor editor:
<div class="redactor-box">
<ul class="redactor-toolbar" id="redactor-toolbar-0" style=
"position: relative; width: auto; top: 0px; left: 0px; visibility: visible;">
<li>
<a class="re-icon re-bold" href="#" rel="bold" tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-italic" href="#" rel="italic" tabindex=
"-1"></a>
</li>
<li>
<a class="re-icon re-deleted" href="#" rel="deleted" tabindex=
"-1"></a>
</li>
<li>
<a class="re-icon re-unorderedlist" href="#" rel="unorderedlist"
tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-orderedlist" href="#" rel="orderedlist"
tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-outdent" href="#" rel="outdent" tabindex=
"-1"></a>
</li>
<li>
<a class="re-icon re-indent" href="#" rel="indent" tabindex=
"-1"></a>
</li>
<li>
<a class="re-icon re-image" href="#" rel="image" tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-file" href="#" rel="file" tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-link" href="#" rel="link" tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-horizontalrule" href="#" rel="horizontalrule"
tabindex="-1"></a>
</li>
<li>
<a class="re-icon re-mathematik redactor-btn-image" href="#" rel=
"mathematik" tabindex="-1"></a>
</li>
</ul>
<div class="redactor-editor redactor-placeholder" contenteditable="true"
dir="ltr" style="min-height: 300px;">
<p>​</p>
</div>
<textarea class="redactor-box" cols="40" data-redactor-options=
"{"lang": "en", "fileUpload": "/redactor/upload/file/", "imageUpload": "/redactor/upload/image/"}"
dir="ltr" id="id_body" name="body" placeholder="Vsebina vprašanja.." rows=
"10" style="display: none;">
Error I'm getting:
Uncaught TypeError: Cannot read property 'insert' of undefined(anonymous function) # redactor.js:47n.extend.each # jquery-2.1.4.min.js:2n.fn.n.each # jquery-2.1.4.min.js:2$.fn.redactor # redactor.js:39insertHtml # (index):366onclick # (index):205
What am I doing wrong?
I'm going to assume it's because the example uses a jquery id lookup, which returns a single element, and your implementation is using a jquery class lookup which returns an array of elements.
Either use: $('.redactor-box')[0] or change the element's class in question to an id, and use $('#redactor-box').
You have to init the redactor prior to calling the API methods
This should do the job:
<script type="text/javascript">
$(document).ready(function(){
$('.redactor-box').redactor();
});
function insertHtml() {
var html = '<h3>INSERTED</h3>';
$('.redactor-box').redactor('insert.html', html);
}
</script>
there are 2 elements in your markup having the same class redactor-box:
<div class="redactor-box">
and
<textarea class="redactor-box"
Try changing textarea's class to redactor and then calling Redactor API method on this class:
$('.redactor').redactor('insert.html', html);
However if you have several editors on 1 page then all of them will insert this html, so it's better to either use id or more specific class.
Also notice, that you can call Redactor API methods only after initializing Redactor, so you should first call:
$('.redactor').redactor();
(probably you did it already, mentioning it explicitly just in case)

Render MVC View Section From Jquery

Here is my MVC View section:
#section popups{
<div class="popup-class" id="popup">
<div class='btn-group' id='actions'>
<div class='collapse navbar-collapse'>
<ul class='actions'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a>
<ul class='dropdown-menu'>
<li><a href='#'>Product</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'>
</div>
</div>
}
I want to call it from JavaScript file (only this section).How can i do that?
There is no way to get a asp.net mvc section in javascript. What you can do is define an html element around the section on the layout page, a <div> for sample, and get this element, for sample, in your layout page:
<div id="popups">
#RenderSection("popups", false)
</div>
In your javascript code, just call this element, for sample:
$(function(){
// call the element, call a method
$("#popups").show();
});
You do not specify what you want to do with this.

Getting Dynamic id (from AngularJS) in getElementByID

I have a clickable drop-down List as following:
<ul class="dropdown">
<li ng-repeat="item in items" ng-controller="ListCtrl">
{{item.name}}
</li>
</ul>
I have following code of AngularJS in same html page :
<li ng-repeat="item in items" ng-controller="ListCtrl">
<div id="{{item.itemIndex}}">
Some Code Here
</div>
</li>
Now i want to add each div in to my page when click on the list item every time. I calling addWidget() function like this :
<script type="text/javascript">
function addWidget(){
document.getElementById('').style.display='block';
}
</script>
Now My question is if i assign a static id to div and passing it in to getElementByID then it works fine but in the dynamic case how i pass the id so it will work fine in each case ?
You don't want to be adding javascript like that.
Here is an example of how to do this:
<body ng-app="myApp">
<div ng-controller="ListCtrl">
<ul class="dropdown">
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
<ul>
<li ng-repeat="item in items" ng-show="item.show">
<div>Some Code Here</div>
</li>
</ul>
</div>
</body>
And your controller:
function ListCtrl($scope){
$scope.items = [{name: 'one'}, {name: 'two'}];
$scope.addWidget = function(item){
item.show = !item.show;
};
};
And finally a working example is here on jsfiddle

jquery .find to get the text in a <li>

So I have a series of 2 nested ul's. When you click on the text (which is in an a tag) in the li, my page makes that editable and adds a save button. clicking the save button needs to give me back the new text inside that li and the id of that li. The id is not a problem. I'm trying to use jQuery's .find to select that anchor tag (which is successful) but i can't seem to get the text from it.
Here is an example of the first list and it's sublists.
<ul class='lists'>
<li class='list1'>
<a class='a list' id='list1'> List 1 Name</a>
<img id='savelist1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
<ul class='sublists'>
<li class='sub1'>
<a class='a sub' id='sub1id'> Sub 1 Name</a>
<img id='savesub1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
<li class='sub3'>
<a class='a sub' id='sub2id'> Sub 2 Name</a>
<img id='savesub2id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
<li class='sub2'>
<a class='a sub' id='sub3id'> Sub 3 Name</a>
<img id='savesub3id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
</ul>
</li>
</ul>
Here's the code for identifying which save button you clicked.
function SaveName(parentid){
$('li').find('a').each(function(){
if (this.id == parentid){
alert(this.id+' '+this.text)
}
}
});
I am wanting this.text to show me the text inside the anchor tags. Help, please?
===========================================================
Edit:
Please excuse this post. The problem was that I was using Jeditable and didn't know that it would put in a form in place of the text, so anything that would call text wouldn't work. Sorry.
simply use $(this).text() instead of this.text
To be honest, I don't understand the logic behind this function, because your function could have been written as:
function SaveName(parentid) {
alert($('li a#' + parentid).text();
}
});
Or may I suggest an alternative way of doing what you intented:
<ul class='lists'>
<li class='list1'>
<a class='a list' id='list1'> List 1 Name</a>
<img id='savelist1id' onClick="SaveName(this)" src='save.jpg'>
<ul class='list1subs'>
<li class='sub1'>
<a class='a sub' id='sub1id'> Sub 1 Name</a>
<img id='savesub1id' onClick="SaveName(this)" src='save.jpg'>
</li>
<li class='sub3'>
<a class='a sub' id='sub2id'> Sub 2 Name</a>
<img id='savesub2id' onClick="SaveName(this)" src='save.jpg'>
</li>
<li class='sub2'>
<a class='a sub' id='sub3id'> Sub 3 Name</a>
<img id='savesub3id' onClick="SaveName(this)" src='save.jpg'>
</li>
</ul>
</li>
</ul>
Javascript:
function SaveName(element) {
alert($(element).prev("a").text());
}
Remove the inline handlers, bad karma.
$(document).ready(function(){
$('.list1subs > li').find('img').bind('click', function(e){
var $this = $(this);
alert($this.siblings('a').text());
});
});
Ok, so when I clicked on the field, I was using Jeditable to make the field edit in place. Clearly I didn't understand what this doing, because it inserts a form using what you supply. This is why whatever.text() was coming back blank. It wasn't counting the form as text, so it skipped it.

Categories

Resources