I want to switch page and select a row on grid when page loaded. And in $(document).ready(function()) I write this:
$("#myGrid").data("kendoGrid").dataSource.page(17);
And it's working: the grid page is switched to 17. But right after that I write:
$("#myGrid").data("kendoGrid").select($("#myGrid").data("kendoGrid").tbody.find('>tr').find('>td').filter(function () {return $(this).text() == "#Model.ActionId";}).parent('tr:first'));
And it's not working. But when I run this command from browser's console, the row is selected. What should I do?
Probably your grid is bound to a remote service. In that case paging doesn't happen immediately. The grid's data source makes asynchronous request to the remote service and the grid is rebound when the response is received.
To make it work you need to call the selection code after response is received. The dataBound event of the grid is the proper place to call that code. Here is an example:
$("#myGrid").kendoGrid({
/* other configuration */
dataBound: function() {
this.select(this.tbody.find('>tr').find('>td').filter(function () {return $(this).text() == "#Model.ActionId";}).parent('tr:first'));
}
});
Related
I need to clear the toolbar without reloading the grid in my jqgrid. It should just reset the toolbar to its default values.
I tried using,
$("#TransactionsGrid")[0].clearToolbar();
My grid datatype:local and i don't use loadonce:true.
This made the toolbar clear and refresh the grid. I dont want that to happen.
Any ideas?
I find the question interesting.
To implement the requirement I suggest to use register jqGridToolbarBeforeClear to execute the handler only once. The handler should 1) unregister itself as the event handler and return "stop" to prevent reloading of the grid:
$grid.jqGrid("filterToolbar", { defaultSearch: "cn" });
$("#clearToolbar").button().click(function () {
var myStopReload = function () {
$grid.unbind("jqGridToolbarBeforeClear", myStopReload);
return "stop"; // stop reload
};
$grid.bind("jqGridToolbarBeforeClear", myStopReload);
if ($grid[0].ftoolbar) {
$grid[0].clearToolbar();
}
});
The corresponding demo shows it live.
I was wondering if someone can help guide me how I can write a event when I'm using toggleClass in jQuery?
I have a list of items and when I click on an item, it highlights it, and when someone clicks another item from the list, the previous highlighted item goes away and highlights the current click. Also, if I click the same item that has been highlighted, it goes away.
Now I'm trying to write a function to call ajax when only its been highlighted. So it won't run the ajax function again when its being pressed again (when highlight is removed).
$(".media").on('click',function(){
var $this = $(this);
// highlighting the object
$this.toggleClass('selectMedia').siblings().removeClass('selectMedia');
// saving the id
var selId1 = $this.data('id');
$.post("ajax/ajax_sessions.php", {"sel_1":selId1}, function(data) {
alert(data); // alerts 'Updated'
});
});
Thank you for help!
Just check for the existance of the class before doing your AJAX request:
if ( ! $this.hasClass('selectMedia') ) return;
// Now do your AJAX request...
I have been trying to manipulate content that is loaded into jQuery UI tabs via AJAX.
As you can imagine, these elements are "future" DOM elements and aren't manipulated by normal $(".someClass")functions.
I've read using .live() for event handling is now deprecated using jQuery 1.7+ and is replaced by the new .on() method.
My issue is that the div I want to hide, when it loads in an AJAX tab, must be manipulated after the initial DOM load and is not bound to a click event at first.
My functions, which are currently wrapped in $() are below.
I think I have the syntax correct for links that use a click handler, but I'm not sure of the correct way to ".hide()" my "hiddenStory" div at load.
I also think that the functions themselves shouldn't be wrapped in an overall $()?
Any help or advice would be greatly appreciated.
$(function(){
// this .hiddenStory div below is what I want to hide on AJAX load
// need syntax and/or new methods for writing this function
$(".hiddenStory").hide();
// this is a function that allows me to toggle a "read more/read less" area
// on the "hiddenStory" div
$(".showMoreOrLess").on('click', (function() {
if (this.className.indexOf('clicked') != -1 ) {
$(this).removeClass('clicked');
$(this).prev().slideUp(500);
$(this).html("Read More" + "<span class='moreUiIcon'></span>");
}
else {
$(this).addClass('clicked');
$(this).prev().slideDown(500);
$(this).html("See Less" + "<span class='lessUiIcon'></span>");
}
}));
});
// prevents default link behavior
// on BBQ history stated tab panes with
// "showMoreOrLess" links
$('.showMoreOrLess').click(function (event)
{
event.preventDefault();
// here you can also do all sort of things
});
// /prevents default behavior on "showMoreOrLess" links
Could you set the display: none via CSS and override it when you wanted to show the element's content? Another option, if you have to do it this way would be to add the `$(".hiddenStory").hide() in the callback from the AJAX load that is populating the element. For example:
$(".hiddenStory").load("http://myurl.com", function(){
$(".hiddenStory").hide();
}
);
If you aren't using the .load method, you should have some sort of call back to tie into (e.g. success if using $.ajax...)
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 have an ajax request which brings in new posts and each post has a toggle button to show and hide an element which is hidden by default.
The below code works, but with the inserted ajax data it only works the first time (open) and not the second (close)
$(".voice_btn").live( 'click', function(){
$(this).toggleClass('active voice_btn');
$(this).closest('.element').children('.voice_box').toggle(300);
$('.tipsy').hide();
$(this).attr("title", ($(this).hasClass("active")?"Close":"Open") + " voicebox");
return false;
});
If you remove the voice_btn class from the element, it will no longer trigger the click event because it no longer satisfies the selector.
change
$(this).toggleClass('active voice_btn');
to
$(this).toggleClass('active');
just update line 2 to only toggle the active class, because after the first time your code runs the voice_btn class is removed, and your live function is no longer attached to your element:
$(".voice_btn").live( 'click', function(){
$(this).toggleClass('active'); // <- notice the change in this line
$(this).closest('.element').children('.voice_box').toggle(300);
$('.tipsy').hide();
$(this).attr("title", ($(this).hasClass("active")?"Close":"Open") + " voicebox");
return false;
});