Hi I've a javascript method which is returning below output.
Ex: http://localhost/jsfunctions/reademps
{"Success":true,"Model":["Raju","Ram","Sri"]}
can someone tell me how to bind this to my kendodropdown?
$("#dvEmps").kendoDropDownList({
dataSource: ???
});
Should just be
$("#dvEmps").kendoDropDownList({
dataSource: reademps().Model
});
Running on page load:
$(function() {
$("#dvEmps").kendoDropDownList({
dataSource: reademps().Model
});
});
Related
I am facing with overlapping problem after Ajax Call. I am using a plug-in called "Nerve Slider" for my grid layout(as you see in here (on the far right)).
After I did this:
<script type="text/javascript">
$(function(){
$('.kategori-link').click(function(){
$.ajax({
type: 'POST',
url: '<?php echo base_url('tr/main/index'); ?>',
data: {kategori:'ucak-bileti'},
dataType: 'html',
success: function(data){
var result = $('<div />').append(data).find('.iAmTest').html();
$('.iAmTest').html(result);
//console.log(result);
},
error: function(){
alert("Sorry! Something went wrong!");
}
});
return false;
});
});
All grids (Each grid has Image, Header, Info as you see in the link above) which I got after database interaction are overlapped! What do you think causes this to happen?
Thank you!
EDIT
Plug-in Scripts:
$(function(){
$(".slider-wrapper").nerveSlider({
sliderWidth: "100%",
slideTransitionSpeed: 700,
slideTransitionEasing: "easeInOutExpo",
slidesDraggable: true,
sliderResizable: true,
sliderFullscreen: false
});
});
$(function(){
$(".cnt-slider-wrapper").nerveSlider({
sliderAutoPlay: false,
slideTransitionSpeed: 700,
slideTransitionEasing: "easeInOutExpo",
slidesDraggable: true,
sliderResizable: true,
sliderFullscreen: false,
showPause: false
});
$(".iAmTest").puzzleGrid({
// options...
});
});
This may or may not work, I have not tested this.
While not a clean solution, you can call $(window).trigger("resize"); after your $('.iAmTest').html(result); line. The plugin script has a function called setuppanels(); that is attached to the window resize event. That re-initialises the content.
I'm trying to implement an ajax based kendo datasource.
Getting errors like:
TypeError: e.schema is undefined
..when you exclude the schema property declaration...
OR
TypeError: r._observable is not a function
Above error happens when I try to write schema definition as follows:
schema:{
data:function(response){
return response;
}
The code I've used is as follows:
$(document).ready(function () {
var ds = kendo.data.DataSource({
schema: {
type:'json'
},
transport: {
type: 'json',
read: {
url:'/echo/json/',
type:'POST',
data:{
json: JSON.stringify(students),
delay:1000
},
contentType:'application/json',
processData:false
}
}
});
//stripped for sake of brevity
});
You can use the following fiddle for starts: http://jsfiddle.net/deostroll/3GqVR/4/
Positive I am missing something on the kendo configuration front...
A couple of issues:
You should use the new operator to instantiate a data source:
var ds = new kendo.data.DataSource({ /* options */ });
For some reason /echo/json/ didn't like the delay option. Removing it fixes it.
The dataSource option of the grid is never set.
Here is the updated fiddle: http://jsfiddle.net/3GqVR/9/
Due to performance optimization I want to prevent users from reload fancyboxes they already loaded once. This is my code:
$(document).ready(function() {
$(".fancybox-effects").fancybox({
type : 'ajax',
wrapCSS : 'fancybox-custom'
});
});
Adding this:
$.ajaxSetup({ cache: true });
to the document.ready function doesn't help. Any ideas?
You could try
$(document).ready(function() {
$(".fancybox-effects").fancybox({
type : 'ajax',
ajax : { cache: true },
wrapCSS : 'fancybox-custom'
});
});
I'm building a site utilising Bootstrap tabs and AJAX. I've set it up so that when a link with the class of .load is clicked the content of that html document is loaded into the active tab, in this case #tab2.
This is done using the following:
$(function(){
$("#tab2").delegate('.load', 'click', function (e) {
e.preventDefault();
$("#tab2").load($(this).attr("href"));
});
});
I also need some links in #tab2, those with the class of .load-tab1 to load content into #tab1, which I have achieved with the following code.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
});
});
The problem is I can't work out how to make it so that when .load-tab1 links are clicked the active tab is also switched from #tab2 to #tab1.
Any help would be greatly appreciated!
UPDATE:
I was able to get it working with the following code but still thinking there is a better solution.
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
$(".tab2").removeClass("active");
$(".tab1").addClass("active");
$(".tab-content #tab2").removeClass("active");
$(".tab-content #tab1").addClass("active");
});
});
You should select the tab in the .load() callback:
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"), function(response, status, xhr){
$( theFirstTabAnchorSelector ).tab('show');
});
});
});
I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)