I have a kendo UI tab, and each tab is binding to an Ajax function. I want my tab to fire ajax call to get fresh content every time the tab is changed, not just the first time. Is there a configuration or recommended way that I can achieve this?
Hello this could be easily through the reload method of the TabStrip.
var ts = $(tabstrip).data().kendoTabStrip
ts.tabGroup.on('click','li',function(e){
ts.reload($(this));
})
Related
I need to load select's options asynchronously (
through a service), using the Angular Material md-select component.
Actually, I use a click event to load data. It works but I need to click the select twice to show the options. That it's a problem.
The expected behavior is shown at this link (AngularJs Material)
The actual behavior is shown at this link.
Is Async options' loading supported by md-select?
The reason you need to click twice is because when you first click, there are no options in the select control and so it doesn't try and open the panel. Then your async method loads the options into the DOM and on the next click it will open.
In order to deal with this, you must always include at least one <mat-option> in your <mat-select>. You can add a disabled <mat-option> with a <mat-spinner> showing that the data is loading for example.
Here the most simple example of that. This is not the best approach... see below.
However, this still uses the click event which isn't the best approach. If you put the click event on the <mat-select> there are spots where you can click on the control but your click event wont trigger even though the dropdown panel still opens (places like the floating label area). You could put the click event on the <mat-form-field> but then there will be places where you can click and trigger the click event but the dropdown panel wont open (places like the hint/error text area). In both cases you lose keyboard support.
I would suggest using the <mat-select> openChanged event instead of a click event. This has its own quirks too but they are manageable.
Here is an example using the openChanged event. I also made the component more robust overall.
I also made a version that uses the placeholder element to show the spinner instead of using a disabled mat-option. This required View Encapsulation to be turned off.
Note: In my example, the service can return different data depending on the circumstances. To simulate this my fake service keeps track of how many requests you send it and changes the options returned accordingly. So I have to set the option list back to empty and clear the formControl's value every time the list is opened. I save the selected value before clearing the formControl so that if the service returns a list with the same item I can automatically reselect the value. If you only need to load the options once, then you would want to modify the code a bit to only load the options the first time the user opens the select.
I'm using Bootstrap Modals, with normal usage cases it works well, but when adding new content via AJAX I need to make it remap the newly added elements.
I need that function like bootstrap_modal() or bootstrap_modal.init() to be fired after the new content was added.
I have a table of elements, each element has a modal that contains more information about it, these elements are added using AJAX (with a click of a button) so I want that when I click on that button, the new content loads and the the modal remapping is triggered to take into account the new elements.
I don't have enough rep. to leave a comment on your question, but can you paste some code and let me know what programming language you're using? I have examples in both c#/ASP.NET and php.
I have a problem regarding modal popup and session.
I have two component name test and test1 respectively.
In test there is a form in view in which i put "Anchor" tag with "modal" class. has also class name "class1".
When i clicked on Anchor tag it call click function(on click "class1") in which i put ajax code for set data using "Session".
$('.test').click(function(){
// Ajax code here for set data using session
});
with above function it also called modal popup. here targer url is seted which is the view of 2nd component which is "test1".
Here in test1 there is a view.html , we are getting session data here and displaying in view.
PROBLEM
Problem is that , here in 2nd component , in view i am getting session data but i need to click on button two time , only after i getting data properly.
When i click on it give me a old session data. and when i click on it second time it will give me a proper data.
What is the solution for above problem. if anyone know please let me know.
Session data is altered only after we click on Anchor tag.
Both thing is done on Anchor click , one is for set data in session and second is for modal popup. in popup i am getting data which set in session.
when is the session data is being altered?
Is it altered by ajax call too?
In this case, javascript, is unsynchronous. It doesn't wait for something to happen in order to fire the next line of code. In that case there are several techniques you may find to do so.
I'm using TabsStrip control from Kendo UI.
I have two dynamic tabs. For the moment, only the first tab is automatically loaded, the second one is loaded when clicked. I want them both to be loaded so that when I click the second one, the content is already loaded.
I didn't find any api way to do that.
You should use the reload method of the TabStrip when the page is loaded
var lastItem = $('#tabstrip .k-item:last');//load just the last
$('#tabstrip').data().kendoTabStrip.reload(lastItem);
Or you can loop through all the $('#tabstrip .k-item') items and load them if you need to load all of them initially.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});