Tie Javascript Events to KendoUI mobile ListView <li> - kendo-ui

I am using KendoUI and I need to fire some javascript events when the user touches each specific LI item. Is this possible? Here is how I am mapping them.. help!
Thanks in advance :) New to this.
<ul data-role="listview" data-style="inset" data-type="group">
<li><a data-role="button" data-click="runFunctionOne">Function One</a></li>
<li><a data-role="button" data-click="runFunctionTwo">Function Two</a></li>
</ul>
JS::
functionOne() {
alert("Function one pressed");
};
functionTwo() {
alert("Function two pressed");
};

Yes, it is possible!
This is the JavaScript:
function runFunctionOne() {
alert("Function one pressed");
};
function runFunctionTwo() {
alert("Function two pressed");
};
You forgot the function keyword before the name of the function and the name of the function in the HTML was runFunctionOne and not functionOne.

Keep in mind you can also use the the Kendo listview click event. Click the link to view the documentation. Argument "e" gives you access to the listview's dataItem which is a subset of the control's dataSource.
Like this
$("#customerList").kendoMobileListView({
dataSource: customerDataSource,
template: '<a>${Company}<span class="k-status-text"> <br />${CustNo}</span></a>',
dataType:"json",
style: "inset",
click: function(e){
var index = $(e.item).index();
var text= $(e.item).index();
alert(e.dataItem.CustNo);
// redirect to
app.navigate("#overview-customer");
},
dataBound: function(e){
alert("Ive been bound");
}
});

Related

Kendo UI Tabstrip 1 on click

I want to make an alert when click on Tab 1 only, but seem it not working. Appreciate your help here.
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div>
<div>Content 1</div>
</div>
<div>Content 2</div>
</div>
<script>
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select("li:first");
$("#tabstrip").on("click", function() {
tabStrip.select(1);
alert("hi");
});
</script>
full demo in here
Currently you are setting the onclick function to the whole tabstrip. Try it like this:
$("#tabstrip li:first").on("click", function() {
alert("hi");
});
Additionally you can use the onSelect event function to identify the selected element anytime.
var onSelect = function(e) {
var a = e.item.innerText;
console.log(e.item.innerText);
if(a ==="Tab 1"){
console.log("Tab 1 selected");
}
};
https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/events/select

Kendo upload - how to add a javascript event handler for file remove button click

My kendo template is as follows:
<div id="file-err-msg" > Please remove files with errors</div>
<input name="files" id="files" type="file" />
<script id="fileTemplate" type="text/x-kendo-template">
<span class='k-progress'>
</span>
<strong class='k-upload-status'>
<button type='button' class='btn-remove k-button k-button-bare k-upload-action'>
<span class='k-icon k-i-close k-delete' title='Remove'></span>
</button>
</strong>
</script>
<script>
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html())
});
</script>
I need to hide the div with id - file-err-msg, when the remove button is clicked. the Remove action is happening when the span with css class "k-delete" is clicked. I need to add the below event handler in addition, and it is never being called.
$(".k-delete").click(function () {
alert("Remove button clicked");
});
since these controls are rendered dynamically, i tried to bind them to the event handler as below, but nothing works.
$("body").on("click", ".btn-remove", function () {
alert("dynamic control event handler");
});
Any help is appreciated!
According to Kendo Upload API documentation, you can bind a function to the remove event.
So this is where you could hide your file-err-msg div :
$("#files").kendoUpload({
template: kendo.template($('#fileTemplate').html()),
remove: function(e) {
$('#file-err-msg').hide();
}
});

how to make scroll to opened div

HTML:
<a class="targetLink" href="#">LINK1</a>
<div id="text1" style="display: none;">text1 div</div>
<a class="targetLink" href="#">LINK2</a>
<div id="text2" style="display: none;">text2 div</div>
<a class="targetLink" href="#">LINK3</a>
<div id="text3" style="display: none;">text3 div</div>
JS:
$("a.targetLink").toggle(function() {
$(".open").slideUp(350);
$(this).next("div").slideDown(350).addClass("open");
}, function() {
$(this).next("div").slideUp(350).removeClass("open");
});
It works this way: when u press a link with class "targetLink" it opens a DIV below it. Now i need to modify js code to: when i click then link it scrolls to the beginning of that opened div. How can i achieve it? Thanks in advance.
Use scrollTop on the element that you want to scroll to the top of. http://api.jquery.com/scrollTop/
example:
$(this).next("div").scrollTop(0);
I think this is what you need, and maybe more: My jsfiddle. I'm not sure what you've got working so far, but this does what i think you're going for, without the need for additional jquery plugins, etc.
here's the JS(check the jsfiddle for html):
$(".pop").hide();
$(".targetLink").on("click", function(e) {
e.preventDefault();
var n = $(this).next();
if(!$(n).hasClass('open')){
$(".open").removeClass('open').slideUp(200);
$(n).addClass('open').slideDown(200);
}
});
$(".nav").on("click", function(event){
event.preventDefault();
var dest=null;
if(($($(this.hash)).offset().top) > ($(document).height()-$(window).height())){
dest= $(document).height()-$(window).height();
}else{
dest=$($(this.hash)).offset().top;
}
$($(this.hash)).trigger("click");
$('html,body').animate({scrollTop:dest}, 500, 'swing' );
});
Try this really great and simple jQuery plugin - https://github.com/Ashwell/jquery-scrollThis
This should do what you're asking for:
self.scrollToDiv = function scrollToDiv(element,minus){
element = element.replace("link", "");
if(minus==null){
minus=0;
}
$('html,body').unbind().animate({scrollTop: $(element).offset().top+minus},'slow');
};

Need to show / hide a div on clicking on a link

I'd like to do something like this fiddle only this works on buttons instead of links:
http://jsfiddle.net/qNhZj/
I need it to work on links and also i have an intro div which gets hidden after clicking on one of the links.
Can anyone help me out please.
You just have to declare link instead of input.
In the class list, add the id of the div you want to show.
Click a button to make it visible:
<div id="intro-tekst">Intro text here !</div>
<div class="boxes" id="coke">Coke is awesome!</div>
<div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
<div class="boxes" id="milk">Milk is healthy!</div>
<br />
<p>
I change my mind:
<ul>
<li>Coke</li>
<li>Bubble Tea</li>
<li>Milk</li>
</ul>
</p>
And bind it like this :
$(document).ready(function() {
var url = window.location.href;
var option = url.match(/option=(.*)/);
if (option !== null) {
$(".link ." . option[1]).trigger('click');
}
$(".link").bind('click', function () {
$('#intro-tekst').hide();
$('.boxes').hide();
$('.link').removeClass('selected');
$(this).removeClass('link');
$('#' + $(this).prop('class')).show();
$(this).addClass('link selected');
});
});
JsFiddle code here : http://jsfiddle.net/Pq5Cv/8/

How to use AJAX loading with Bootstrap tabs?

I used bootstrap-tabs.js and it has worked perfectly.
But I didn't find information about how to load content through AJAX request.
So, how to use AJAX loading with bootstrap-tabs.js?
In Bootstrap 2.0 and up you have to bind to the 'show' event instead.
Here's an example HTML and JavaScript:
<div class="tabbable">
<ul class="nav nav-tabs" id="myTabs">
<li>Home</li>
<li>Foo</li>
<li><a href="#bar" data-toggle="tab">Bar</li>
</ul>
<div>
<div class="tab-pane active" id="home"></div>
<div class="tab-pane" id="foo"></div>
<div class="tab-pane" id="bar"></div>
</div>
</div>
JavaScript:
$(function() {
var baseURL = 'http://yourdomain.com/ajax/';
//load content for first tab and initialize
$('#home').load(baseURL+'home', function() {
$('#myTab').tab(); //initialize tabs
});
$('#myTab').bind('show', function(e) {
var pattern=/#.+/gi //use regex to get anchor(==selector)
var contentID = e.target.toString().match(pattern)[0]; //get anchor
//load content for selected tab
$(contentID).load(baseURL+contentID.replace('#',''), function(){
$('#myTab').tab(); //reinitialize tabs
});
});
});
I wrote a post about it here: http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/
You can listen the change event and ajax load content in the event handler
$('.tabs').bind('change', function (e) {
var now_tab = e.target // activated tab
// get the div's id
var divid = $(now_tab).attr('href').substr(1);
$.getJSON('xxx.php').success(function(data){
$("#"+divid).text(data.msg);
});
})
I wanted to load fully dynamic php pages into the tabs through Ajax.
For example, I wanted to have $_GET values in the links, based on which tab it was - this is useful if your tabs are dynamic, based on database data for example.
Couldn't find anything that worked with it but I did manage to write some jQuery that actually works and does what I'm looking for.
I'm a complete jQuery noob but here's how I did it.
I created a new 'data-toggle' option called tabajax (instead of just tab), this allows me to seperate what's ajax and what's static content.
I created a jQuery snippet that runs based on that data-toggle, it doesn't mess with the original code.
I can now load say url.php?value=x into my Bootstrap Tabs.
Feel free to use it if you want to, code is below
jQuery code:
$('[data-toggle="tabajax"]').click(function(e) {
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
});
HTML:
<li>Val 1</li>
So here you can see that I've changed the way bootstrap loads thing, I use the href for the dynamic ajaxlink and then add a 'data-target' value to the link instead, that should be your target div (tab-content).
So in your tab content section, you should then create an empty div called val1 for this example.
Empty Div (target):
<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>
Hope this is useful to someone :)
I suggest to put the uri into the tab-pane elements, it allows to take advantage of web frameworks reverse url fonctionnalities. It also allows to depend exclusively on the markup
<ul class="nav nav-tabs" id="ajax_tabs">
<li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li>
<li><a data-toggle="tab" href="#ajax_registration">Registration</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ajax_login"
data-target="{% url common.views.ajax_login %}"></div>
<div class="tab-pane" id="ajax_registration"
data-target="{% url common.views.ajax_registration %}"></div>
</div>
And here is the javascript
function show_tab(tab) {
if (!tab.html()) {
tab.load(tab.attr('data-target'));
}
}
function init_tabs() {
show_tab($('.tab-pane.active'));
$('a[data-toggle="tab"]').on('show', function(e) {
tab = $('#' + $(e.target).attr('href').substr(1));
show_tab(tab);
});
}
$(function () {
init_tabs();
});
I loads the active tab, and loads a tab only if it is not already loaded
There is an error in your code user1177811.
It has to be $('[data-toggle="tabajax"]').
Also there is room for improvement. The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. So i added #content to load the content div of the remote page.
$this.tab('show'); is now only called, when response was a success.
Here is the code
$('[data-toggle="tabajax"]').click(function(e) {
e.preventDefault();
$this = $(this);
var loadurl = $(this).attr('href');
var targ = $(this).attr('data-target');
$(targ).load(loadurl+'?ajax=true #content', function(){
$this.tab('show');
});
});
Here is how I do it. I utilize an attribute data-href which holds the url I want to load on show. This will not reload data that is already loaded unless you set $('#tab').data('loaded'); to 0 or remove it. It also handles relative vs. absolute urls by detecting the location of the first slash. I am not sure of the compatibility with all browsers but it works in our situation and allows for the functionality we are looking for.
Javascript:
//Ajax tabs
$('.nav-tabs a[data-href][data-toggle="tab"]').on('show', function(e) {
var $this = $(this);
if ($this.data('loaded') != 1)
{
var firstSlash = $this.attr('data-href').indexOf('/');
var url = '';
if (firstSlash !== 0)
url = window.location.href + '/' + $this.attr('data-href');
else
url = $this.attr('data-href');
//Load the page
$($this.attr('href')).load(url, function(data) {
$this.data('loaded', 1);
});
}
});
HTML:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="js-tab1">
<p>
This content isn't used, but instead replaced with contents of tab1.php.
</p>
<p>
You can put a loader image in here if you want
</p>
</div>
</div>
</div>
Here is a solution I have found - and modified to suit my needs:
$("#tabletabs").tab(); // initialize tabs
$("#tabletabs").bind("show", function(e) {
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
if (typeof(contentURL) != 'undefined') { // Check if URL exists
$(contentID).load(contentURL, function(){
$("#tabletabs").tab(); // reinitialize tabs
});
} else {
$(contentID).tab('show');
}
});
$('#tabletabs a:first').tab("show"); // Load and display content for first tab
});
This is an MVC example using Razor. It will interact with two partial views named: _SearchTab.cshtml and _SubmissionTab.cshtml
Notice that I am naming the id of the tabs the same as the partials.
Markup:
<!-- Nav tabs -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
<li class="active">Submission</li>
<li>Search</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="_SubmissionTab">#Html.Partial("_SubmissionTab")</div>
<div class="tab-pane fade" id="_SearchTab"></div>
</div>
The #Html.Partial will request the page on the active tab on page load
Script:
<script>
$('#tabstrip a').click(function (e) {
e.preventDefault()
var tabID = $(this).attr("href").substr(1);
$("#" + tabID).load("/#ViewContext.RouteData.Values["controller"]/" + tabID)
$(this).tab('show')
})
</script>
The load function will perform an ajax request as each tab is clicked. As for what path is requested you will notice a #ViewContext.RouteData.Values["controller"] call. It simply gets the controller of the current view assuming the partial views are located there.
Controller:
public ActionResult _SubmissionTab()
{
return PartialView();
}
public ActionResult _SearchTab()
{
return PartialView();
}
The controller is needed to relay the load request to the proper partial view.
Here is the Bootstrap tab Ajax example, you can use it...
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
and here is the AJAX call
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
I use this function and it's really nice because she prevent's you from load ajax again when going back to that tab.
Tip: on tab href, just put the destination. Add this to footer:
$("#templates_tabs").tabs({
beforeLoad: function( event, ui ) {
if (ui.tab.data("loaded")) {
event.preventDefault();
return;
}
ui.ajaxSettings.cache = false,
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
}),
ui.jqXHR.error(function () {
ui.panel.html(
"Not possible to load. Are you connected?");
});
}
});

Resources