I have one problem with jQuery custom content scroller when I try to manipulate elements on page via ajax queries.
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
then I execute one ajax query to populate data from server
$.get(url, {'count':count, 'type':type}, function(data) {
masBlock.append(data);
$(".scroll").mCustomScrollbar("update");
deleteHoliday();
saveHoliday();
$('.add-holiday').hide();
})
but method "update" doesn't work and scroller doesn't resize. Please, what should I do to avoid this problem.
Thank you in advance.
Does the masBlock variable define the .scroll element or an element inside it?
Do you load images or plain text?
Instead of using the update method, you could try setting updateOnContentResize option parameter to true and see if that helps:
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize:true
}
});
});
Related
i have a problem with vuejs and kendo ui.
I need to click a tr columns
<kendo-grid-column #click="clicked"></kendo-grid-column>
i also used a #click.native but nothing
i've created also a template with <a> tag that calls "clicked" method
demo
http://dojo.telerik.com/#aldoZumaran/UTOGo
Maybe this is not exactly what you want, but it's possible to enable Sorting on the Grid and intercept the Sort Event for further handling.
Change your kendo-grid, add:
:sortable='true'
#sort='callback'
The Callback method syntax was also a bit weird, use:
callback: function(e) {
console.log(e.sort.field);
console.log(e.sort.dir);
}
Maybe this is the right place to execute your actions.
UPDATE
It's possible to call e.preventDefault(); in callback method to prevent default sorting action:
callback: function(e) {
if (e.sort.field === 'UnitPrice') {
console.log('Sort by Price not allowed!');
e.preventDefault();
}
}
When I load a Partial View with some unobtrusive AJAX I also need the URL to change accordingly.
It would be okay if I had to do the work in the jQuery's done() callback.
But it's not possible right, wihtout loading something new. So the only choise I have is to load a View?
$.ajax({
//some jquery ajax call properties
success: function(){
location.hash = 'your_unique_value';
}
})
or use history api window.history.pushState('page2', 'Title', '/page2.php');
Docs
I'm using jQuery UI. I'm loading some content in a dialog box over AJAX. After inserting the content from the server, I need to make modifications to the document. I am using the .live() function on my link; I thought this would enable me to use Js after loading the content over ajax, but it's like the content I just loaded isn't a part of the document. Any help very much appreciated.
Are you adding the bindings (lives) in the success function of the ajax call?
If so I had the same issue, I'll try to explain what I figured out:
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
$('#some_link').live('click',function(){
$('#'+data).hide();
});
});
This won't work because the code inside the 'live' function is executed on click and at that time the 'data' value is gone.
To make it work I made a global variable 'ID' which I set in the success function and then called in the 'live' function again like this:
var ID;
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
ID = data
$('#some_link').live('click',function(){
$('#'+ID).hide();
});
});
I am using the following code to direct the results from a form to a specific div.
$(window).load(function () {
$("#form1").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(html) {
$("#resultsDiv").html(html);
});
return false; // prevent normal submit
});
});
How can I apply this (or any) handler to future forms that may be created within an updated div ( with new yet to created content inserted into the div at some point in the future)?
I have looked at the .on but I do not see an event for the updating or reloading of a div.
I have tried adding a similar function to the above, but replacing (window) with ("#thefutureDivID"), but no luck.
The best place to add the handler is right after you know the element exists. So, right after this line:
$("#resultsDiv").html(html);
you can add your code that references $("#thefutureDivID").
I have this issue. I'm working on a jquery ajaxed site. I have the main content div in the middle and on top the navigation. I need to AJAX the content, because I have flash backgound so that the flash video won't start from beginning after every page load. The only way I was able to do this was with this sort of code:
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//For loading
var ajax_load = "<img src='img/load.gif' alt='loading...' /><p>";
// Var
var loadPage1 = "page1.html";
// Load page
$("#page1").click(function(){
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1);
$("#content").show(2000);
});
All other ways to get the div didn't work because there was issues on getting plugins etc. working in the ajaxed div (content).
So... everythig is working fine - but, the div loads it's content from page1.html and shows it and only after this does it hide it and show it. So it loads the page and then does the effects I want to.
Do I need to queue this some how or what's the proper jquery way? I tried delay, stop etc.. but can't seem to solve this out. It's propably very simple.
Thanks.
Show the element in the load callback handler.
i.e:
$("#page1").click(function(){
$("#content").hide();
$("#content").html(ajax_load).load(loadPage1, function(){
$("#content").show(2000)
});
});
.load() takes 2 arguments, the URI and a callback to fire after load.
API is found here: http://api.jquery.com/load/
function() {
$("#content").hide(2000);
$("#content").html(ajax_load).load(loadPage1, function() {
$("#content").show(2000);
});
}