I am using the kendo TabStrip in my sample. I have added the tabs following through documentation. And found events sample at http://demos.kendoui.com/web/tabstrip/events.html
I have tried the same sample in fiddle http://jsfiddle.net/ZrFGX/5/.
My code is looks like this,
function onContentLoad(e) {
alert("content loaded!");
}
$("#tabStrip").kendoTabStrip({
contentLoad: onContentLoad
});
onContentLoad is not even called single time.
As per their documentation:
contentLoad
Triggered when content is fetched from an AJAX request.
I don't see any content being fetched via AJAX.
http://jsfiddle.net/qxTMm/
$(document).ready(function () {
function onContentLoad(e) {
alert("content loaded!");
}
var tabstrip = $("#tabStrip").kendoTabStrip({
select: onContentLoad
});
});
Related
I am new in using jquery. I am trying add in the simplemodal.js (Eirc Martin's simple modal) a function called 'jBox' that will take the data (ie link) and options and using ajax will load the content into the modal container. This way I want on my pages in several places easy call this function
jBox = function(address, options){
$.get(address, function(data) {
$.modal(data);
});
};
});
The code is working fine, but i would like to add a loading image before the content is fully loaded. There is a lots of similar posts about loader/ spinner in simplebox but none of the works for me.
I was trying following code
$('#test').load('<img src="loader.gif">').html(data);
$('#test').modal();
But, some way, it doesnt work for me. Any ideas what I am doing wrong? Thanks
I use the ajaxStart and ajaxStop events.
$("body").on({
ajaxStart: function() {
$(this).addClass("loading"); // so page knows it's in loading state
// .. your modal code
},
ajaxStop: function() {
$(this).removeClass("loading"); // not it loading state anymore
// .. What you should do if loading is done. (eg. hide modal)
}
});
In this case I set the body class to 'loading'. So you can do some magic in css if you like.
I tend to use it to disable forms as well.
body.loading div.some-class {
// your special style for during loading
}
I have a form which populates div elements based on selections from a select box using an AJAX call.
The content of the populated div is a multiselect box that I want Chosen to apply to. Unfortunately it seems that the 'chzn-select' is not firing, no doubt due to this being pulled in dynamically.
I have added this:
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
To the bottom of the code that is pulled in by AJAX, but it is still not firing. Any ideas on how to make this work as desired?
Solved myself. Will post for future reference. I put the Chosen calls in their own function on my original page that calls the AJAX:
<script type="text/javascript">
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
}
</script>
And in the AJAX script itself, I added a call to the function after the responseText part:
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
instead of using chosen(), try change() method. It works on change event.
try:
$(".chzn-select").change(function () {
var str = "";
$("select option:selected").each(function () {
// do your coding here
});
})
.trigger('change');
I am using RenderPartial to generate CListView and all the contents generated properly and good pagination is working fine too. But when I added my custom JS to elements generated by the CListview it works fine for the the fist page content but when i use pagination and click to page 2 then the JS binding fails.
Is there any other way to bind custom event to elements generated in YII CListview I had tried using live, and on nothing work for me here is my js file.
I think I have to call my function on every ajax load in but how can I achieve in yii
This is the script I am using to update ratings on server with button click and this the element for which these forms and buttons are defined are generated by CListview in yii
$(document).ready(function(){
$('form[id^="rating_formup_"]').each(function() {
$(this).live('click', function() {
alert("hi");
var profileid= $(this).find('#profile_id').attr('value');
var userid= $(this).find('#user_id').attr('value');
console.log(userid);
var data = new Object();
data.profile_id=profileid;
data.user_id=userid;
data.liked="Liked";
$.post('profile_rating_ajax.php', data, handleAjaxResponse);
return false;
});
});
});
You can also try CGridView.afterAjaxUpdate:
'afterAjaxUpdate' => 'js:applyEventHandlers'
The $.each method will loop only on existing elements, so the live binder will never see the ajax-generated content.
Why don't you try it like this:
$(document).ready(function(){
$('form[id^="rating_formup_"]').live('click', function() {
alert("hi");
var profileid= $(this).find('#profile_id').attr('value');
var userid= $(this).find('#user_id').attr('value');
console.log(userid);
var data = new Object();
data.profile_id=profileid;
data.user_id=userid;
data.liked="Liked";
$.post('profile_rating_ajax.php', data, handleAjaxResponse);
return false;
});
});
This problem can be solved by two ways:
Use 'onclick' html definitions for every item that is going to receive that event, and when generating the element, pass the id of the $data to the js function. For example, inside the 'view' page:
echo CHtml::htmlButton('click me', array('onclick'=>'myFunction('.$data->id.')');
Bind event handlers to 'body' as the framework does. They'll survive after ajax updates:
$('body').on('click','#myUniqueId',funcion(){...});
I have a web application that loads javascript on page load:
$(function() {
$('.modal-delete').click(function() {
alert();
});
});
I have a html page with a series of buttons which alert a blank message box when they're clicked:
<button class="modal-delete btn danger"></button>
which works fine.
However, a have some AJAX calls that generate more buttons just like the ones above but NOT on page load! They can be created at any time. These buttons do not do anything but they're meant to load the alerts. They're identical but because they never existed on page load, the Jquery code doesn't work on these buttons. How do I attach the same code to these buttons too?
Many thanks :).
I think you'll want jQuery's 'live()' function:
$('.modal-delete').live('click', function() {
alert();
});
This binds to the elements which match but also rebinds when new elements are added in the future:
"Attach an event handler for all elements which match the current selector, now and in the future"
Change the ready code to this...
$(function() {
$("document").on("click", ".modal-delete", function() {
alert("click");
});
});
I am using validation engine from http://www.position-absolute.com/ site.
The validation is applied on the div tag which is opened as popup on parent page.
Issue : when error message is shown on a control, it is appearing behind the div.
Search to similar issue suggest the usages of z-index, but how to control the z-index of error message poping from validation engine? Giving high number to div z-index:99999 did not work.
Please help
just change your script as
<script type="text/javascript">
$(function () {
$(".primary").click(function () {
$(".formError").remove();
});
$(".close").click(function () {
$(".formError").remove();
});
$("#yourformid").submit(function (ev) {
ev.preventDefault();
var validForm = $("#yourformid").validationEngine('validate');
$(".formError").css("z-index", 15000);
if (validForm) {
$("#yourformid").submit();
}
});
});
</script>
it works fine