Div is filled using ajax call which returns a partial view . In this case,Do DOM will be reconstructed ? . Since ,I have some javascripts preloaded which will handle client side events of that partial view .Do I need to attach event handler using live event or On event (jquery).
ajax calls will load the partial views without reconstructing the entire page. Just make sure you aren't firing the click events off of a submit button (unless you are preventing the default to stop the post back). Since the partial is loaded after the page has loaded you need to keep your script in the main page but tie the events to the document instead of the selector. something like
$(document).on('click', '.classSelector', function(){
//your code here
});
a click event defined in this way will trigger off of items on your partial
Related
I am injecting a Javascript-File via a Chrome-Extension on a webpage that uses SAPUI5.
I want to get the model in the binding context of some UI5-Input elements and in order to do so, I need to get to the inputs via document.getElementsByTagName. (or is there another way?)
This only works if they are already rendered. Unfortunately the ready or load events fire too early, when not everything is rendered yet.
Is there a way for me to know when the inputs have rendered?
Edit: I do not have access to the source code of the page, everything I do has to be in the injected script.
To make sure everything is renedered before firing your events, sapui5 has the function onAfterRendering.
All logic written in that function will only be executed after the control is rendered.
When a rerender of the control is rendered, the onAfterRendering is triggered again.
In the end I did it like this:
I already had event listeners attached to click and key events. Every time the handler is called, I check if document.getElementsByTagName('input') returns the inputs I need.
If yes e. g. the rendering of the inputs is complete, I set a boolean that the page is loaded completely and execute my code.
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
});
I have a header in my master page which i want to enable it in my login page. I am doing it using document.onready event. But when I submit the page and if the model validation fails, it doesn't show the header. Is there any javascript that gets called when the mvc validation fails or when the page gets reloaded.
There is a pageLoad event that you can use.
function pageLoad() {
// Initialization code here, meant to run once.
}
Here is an article about the differences between document ready and pageLoad.
http://encosia.com/document-ready-and-pageload-are-not-the-same/
You can also attach an event in the partial view, there is a post about adding events here:
Javascript that executes after page load
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.
I have a page that lists a bunch of files. This page can be accessed directly via a URL or it can be loaded in a modal dialog via ajax from a different page.
If the files page is loaded via ajax, I would like to allow the user to click the name of the file and trigger an action in the page which loaded the files page. For example, there is an article edit page. This page contains an "attach a file" button. When the user clicks the button, the files page is loaded in a modal dialog and when a filename is clicked, the id of the file is inserted into the article form and the dialog is closed. However there is also an event edit page with a similar button, but I would like to handle the filename-click event slightly differently on this page.
I'd like to handle these click events slightly differently depending on the calling page. At the moment I'm defining a handler function with global scope in the page containing the form to which files are being attached, then testing for that function in the the files-page when the filename is clicked and calling if it exists. It works but it feels a little hacky. Is there some kind of best practice for this sort of thing that I'm not aware of?
I'm using jQuery if this makes things easier in any way..
Instead of relying on a global handler function as the interface between pages, you could rely on custom events instead:
"calling page":
$(document).bind("fileClicked", function(event, fileName) {
alert(fileName);
});
"page loaded via ajax":
$(".file").click(function() {
$(document).trigger("fileClicked", [$(this).text()]);
});
You should look at jQuery Live
Attach a handler to the event for all elements which match the current selector, now and in the future.
When a Ajax page is loaded it's not processed by the DOM in the same way the main page was loaded, therefore using live will attach the event on all current event emitters as well as the future ones such as dynamic Ajax content
Within your Ajax model
<div>
...
Add to main page
...
</div>
and within your static page (the one originally loaded)
$("#ajax_click_event").live('click',function(){
//Work wit the value of the form within the ajax div.
})