use ajax to bind/rebind a listview datasource? - javascript

Is it possible to bind/rebind a RadListView's datasource using Ajax? What I'm trying to do is create a type of forum. One ListView is nested in another listview. The outer listview will load on page load and display all of the subject headers, and the innerlist view will not be bound until the header is clicked. Then I'll use jQuery to open the details under the header and load THAT ListView using ajax. is this possible and how? or is there another way I should into achieving this effect? Thanks.

You could wrap the outer list in an UpdatePanel and assign an OnClick handler to the subject line. When the subject line is clicked, an async postback will occur and you can bind the inner list in the click event handler.
One way or another you need to get to the code-behind. If you want to use jQuery, you can attach click events to the header and call __doPostBack in the handler, like this:
$("#<%=ListView1.ClientID%> .header").click(function(){
__doPostBack($(this).attr("id"), "");
});
If you go with this approach, you'll just need to override the RaisePostBackEvent in the code-behind, and use a little logic to drill down to the inner list.

The easy way if you do not care about doing a PostBack would be to wire up the nested ListViews, and have the header hook to the ItemCommand event and bind the applicable RadListView that you need, and hide others. You could possibly disable the ViewState on these controls to keep the size down, since you would only be showing the currently selected items ListView, if you will not be doing any paging or sorting.
For a faster postback, you can loook at Client Side Databinding for RadListView
http://demos.telerik.com/aspnet-ajax/listview/examples/client/programmaticdatabinding/defaultcs.aspx
You would generate a function that you can send the ListView's ClientID to databind as well as the Outer div (if you need one) to show when clicking the header.
The function would then find the ListView, show the outer container, and databind it. You could possibly also include code that would collapse the currently visible div, if you desire that functionality. A global variable saving the previous div's ID would be an easy way for it to work.

Related

How to to bind an Onclick event to a menu item if content equl to

I'm adding multiple Boostrap modals to a website (modals have different content) but I want to add append an onclick event e.i if menu item "request" here i want to add an onclick="request()" to fire the appropriate modal when user click on it.
I know I can simply add this manually but it would be great to learn how to do this dynamically with javascript/jquery!
thank you alot!!
Yes, you can write the it manually but dynamic will always a good practice.
if your model has any thing common more like class.
$(".class").on("click",function(){
// your code or action you want to perform.
});
Hope this will help.

Dealing with partial views and javascript

I have set up a partial view to render in an index page. The partial view gets posted using Ajax to the server when a user clicks a sort button. This is so the entire page won't refresh just the partial view table.
The problem is after the first sort, the JavaScript in the index page is no longer effective. I worked around this by putting the js in the partial view itself to persist the events, but this produces js errors to saying 'continue' or 'ignore'.
It is because your newly injected elements ( via ajax) is not aware of the events bounded. So those event bindings are not availabel to them.
You should change your event bindings to use on so that it handles the current elements and future elements (added to DOM dynamically via ajax or so)
for example, if you want to handle the click event for elements with css class someCssClassSelector,
Change
$(".someCssClassSelector").click(function(){
//do something
});
to
$(document).on("click",".someCssClassSelector",function(){
//do something
});

How to bring a jsp into an existing modal window?

I have a modal window called kmodal, which has some links in it. When i click one link, it provides me with an accept button. Now when i click this button, i have to bring my jsp within this modal without closing it and i have to get rid of other links without disturbing the lay out. How can i achieve this ?
I tried this one :
jQuery('#button').load('myJSP', function() {
jQuery(this).show();
But this does not work.
Can any one suggest any ideas here ?
You just need to do load without the callback function - and you don't want to load the jsp inside your button.. You want it in the modal. You can read more about .load() here
jQuery('yourmodalcontainer').on('click','#button',function(){
jQuery('yourmodalcontainer').load('myJSP');
// this will load your jsp into the modal
});
My example uses delegation as I don't know how/when your button is created
You need to use delegation when your elements don't exist in the dom at the time of binding.. So I'm actually not sure when your modal or how it's created also.. It's best to bind to the closest parent element that is static and available at dom ready.. but to be safe you can bind it to the body
jQuery('body').on('click','#button',function(){

ajaxsetup and specific callback

My situation
First of all, I hope I can explain it right; I have an admin panel which will be fully ajax driven. It uses jquery to bind all internal (everything that uses domain.com/admin///* ) and instead of following the link it gets the page via ajax.
Problem
Lets say I have a table of news in which i want to dynamically delete one, it links to page which deletes the page. This link has the event to get the page dynamically linked to it, (because all the links are binded).
I want a good way to get feedback from the global ajax function handling the grabbing of the page and fadeout the row in the table. And thus a good way to reuse this.
$.ajaxcomplete works, but it KEEPS doing whatever i define, no way to reset it.

Dynamic content and loading of JQuery scripts several times

I am having a page that loads content dynamically. Depending on which menu item the user clicks, different tables are dynamically loaded and presented using jquery.
One column of each table is having an update linke used to update the content that specific row is representing. When clicking that link a JQuery UI Modal Dialog is presented with a form loaded from a server in which the user should update the content and post back.
This is how I understand it, please correct me if I am wrong. I need to load the jquery script at the same time as I load the dynamic content in order to bind the events between the javascript functions and the elements that is being loaded.
Assuming my assumption is correct I do load the content and the same JQuery UI Dialog scripts each time the user selects a different table. I load the content and jquery files from different javascript functions loaded together with the main index file.
The consequence is unpredictable behaviour (probably predictable using the same use case). When loading the table more than once and updating something so the modal dialog is presented, the dialog is not presented anymore after the first or second usage, as one example.
Could it be a problem that the jquery script is loaded more than once? If it is, what's the principle or patterna I should use for this kind of application. If all above is false assumption, still, what's the principle or patterns for designing this kind of solution where different kind of dynamic content is loaded at several places (all presented within the same index file) and all need the same jquery files.
Take a look a jQuery $.live() and $.delegate():
http://api.jquery.com/live/
http://api.jquery.com/delegate/
These will allow you to bind events to dynamically loaded content.
If I understand you correctly, you are asking how to bind events on dynamically generated content. You do not, in fact, have to load new script at the same time as new content in order to be able to hook events to said content.
What you want is the jQuery 'live' handler. You can specify the target of the binding using standard jQuery selectors. However, instead of the following syntax:
$('.foo').click(function(){ });
You would use
$('.foo').live('click', (function(){ });
The way this works is through event bubbling, where an event invoked on a child element (such as an input box) 'bubbles' up through all parent nodes. In this case, jQuery just watches the whole document for event bubbles, and then matches it against your specific selector conditions.
If I understand you correctly:
1) Multiple tables with an update link on each rows to update their content.
2) Update button opens a modal box with a form.
3) Form is posted and data is retrieved after being processed by the server to feed the concerned table row.
If the flow described above is correct, I don't see why you should load jQuery or jQuery ui more than once.
You should do something like
1) Load the page with all the scripts required.
2) Set up and ajax call with the jquery .ajax() method (doc)
3) Use the ajax call to submit the form data to the server and retrieve the results
4) Use the success callback of .ajax() to feed the row with the updated data. Within the success method you should be able to retrieve the context (a.k.a. the link you clicked) and identify the actual row you clicked.
I hope I make sense.
If by any chance you need to create new rows then you should consider checking the .live() and .delegate() method of jQuery.
Good luck.

Categories