I am loading an external page that relies heavily on jquery into a div with the $.ajax(); method.
The obvious problem is that the new content needs to be binded to the dom for jquery to work... Everyone talks about just using $.getScript to do this but I can't get it to work. Can some one give me an example and not just a link to the jquery doc page for $.getScript ?
This external page has 6 js files included in it and I need them all binded to the new content as a whole and not per div as in all of the examples I can find.
"new content needs to be binded to the dom for jquery to work"
I assume that you mean that the events binded on elements do not work for the dynamically loaded content. If this is the case, you must bind the elements with live() method. So instead of:
$('#element').click(function() { ... });
Do:
$('#element').live('click', function() { ... });
This way your binds will also affect the loaded content.
If you understood your problem wrong, please let me know.
Related
I have an .aspx page and a separate .js file that contains all of my JavaScript and jQuery. The page also has a UserControl that doesn't exist on page load and that only appears when a certain button is clicked. And the UserControl contains, among other things, a JavaScript button.
The problem I'm having is connecting the newly-created JavaScript button that didn't exist on page load to my .js file.
At first I tried adding a jQuery select to get the button that lives inside the UserControl to the document.ready() that's in my existing .js file like this:
$(".TheClassOnMyUserControlButton").click(function () {
// do stuff here
}
But I couldn't get it to respond to anything I tried. So I put my jQuery inside a <script> tag in the UserControl page itself and the button suddenly started responding.
I have since come to understand that the reason the jQuery select wasn't working from the .js file is because the button didn't exist on page load and you can't select a thing that doesn't exist, and that makes sense now.
So my pseudo-newbie developer brain started trying to figure out how I could refresh the document.ready() in my .js file once the UserControl was on the page so that it would become aware of the newly-created UserControl and its buttons.
I asked another developer that I work with about it and they said to try bind.jquery without explaining how.
Googling that led me here as usual and I saw in the jQuery documentation that their bind() method has been deprecated and they suggest using on() instead.
I think I understand what the other developer meant and I know what I want to do, but I'm getting a little fuzzy on the details and I'm not exactly sure how to use on() to achieve what I'm trying to do.
I know I could just leave the <script> tag inside the UserControl, but I'd like to keep all my JavaScript and jQuery in one place if I can.
Does anyone have any suggestions or things I could try?
I appreciate any help anyone can offer.
Thanks
You have many options to bind an event to a button.
1.) simply write a function and bind it to the button on the event you want. For example:
<script>function doStuff(){
....
}
</script>
<button onclick="doStuff()">Do Something</button>
2.) You have to bind your function at the moment you have created the button. For example:
$('#Container').append('.button');
$('.button').on('event',doStuff);
For a more in depth answer i have to see your code
You can bind jQuery methods or events using the "on" method by looking at the entire document and then in the "on" method specifying the correct selector. Hope that makes sense. You can check the example below.
$(document).on("click", ".className", function (){ /*code here*/ });
Create the button beforehand and hide it. Then, show that button/section/panel on the event of other actions.
C# code behind
control.Visible = false;
control.Visible = true;
or
Jquery/bootstrap front end
$('#myElementID').addClass('hidden');
$('#myElementID').removeClass('hidden');
My question is not about binding a single event to a specific DOM element. My question is, how can you rebind your whole bootstrap library to dynamically generated DOM elements?
For my case I am using the Jquery method .load and I would like to rebind the HTML loaded by that method to my Metro UI bootstrap library. I don't think going to the loaded HTML, checking all the events and components used and re-binding them is an effective solution. I might as well prefer somehow refreshing all bindings after loading the dynamic HTML (if that is also possible). Any help there? Thank you!
After a while of trying I finally found a way to execute the script. I added another method to the callback function to the .load method:
$("#id").load( "dynamic.html", function(){
$.getScript("boostrap.js");
} );
It may not be the most effective way to rebind elements, but at least I make sure all the JS code is re-binded as if the HTML had been loaded from the initial load.
I have a question about live loaded ajax content and .editable();
I am loading content via ajax that needs to have the ability to tie into the .editable() functions on the parent page. I am not finding much in terms of documentation that addresses this. I think I must be blind or sumthin'.
How do I get this .editable to work when trying to access it via ajax live loaded content:
$('#charge_name a').editable({
// scripts here...
});
Thanks so much for your help!!!
Among the options there is a parameter called selector
More info here http://vitalets.github.io/x-editable/docs.html#editable
This would delegate editable to the targets even after they've been added to the DOM after load.
Im not sure if this is the best approach, but for the sake of not being able to find a better solution, this is what I have come up with:
I created a function to contain my editable script such as this:
function myEditables(){
$('#charge_name a').editable({
// scripts here...
});
}
Then when ever I need to activate my editables on the page, whether after an ajax call or a page load I just call the name of the function: myEditables();
If anyone knows of a better way, please let me know I would be more than grateful. Thanks!
I am currently loading HTMl content via AJAX.
I have code for things on different elements onclick attributes (and other event attributes).
It does work, but I am starting to find that the code is getting rather large, and hard to read. I have also read that it is considered bad practice to have the event code 'inline' like this and that I should really do by element.onclick = foobar and have foobar defined somewhere else.
I understand how with a static page it is fairly easy to do this, just have a script tag at the bottom of the page and once the page is loaded have it executed. This can then attach any and all events as you need them.
But how can I get this sort of affect when loading content via AJAX. There is also the slight case that the content loaded can very depending on what is in the database, some times certain sections of HTML, such as tables of results, will not even be displayed there will be something else entirely.
I can post some samples of code if any body needs them, but I have no idea what sort of things would help people with this one. I will point out, that I am using Jquery already so if it has some helpful little functions that would be rather sweet!
Small code sample
This is a sample of code that is loaded via an AJAX request
<input type="submit" name="login" value="login" onclick="
if(check_login(this.form)){
Window_manager.windows[1].load_xml('login/display.php?username=' + this.form.username.value + '&password=' + this.form.password.value);
} else {
return false;
}">
I know this is small sample, but this is the sort of thing I am on about. How can I have this code attached when the content is loaded?
jQuery .live() method is probably what you are looking for. It will attach click event to newly created HTML elements, so you don't need to call your .click() with every reload of your update-panel.
You can get cleaner HTML code by making the event bindings in javascript. All you need are ways to identify the DOM objects for your HTML elements, like IDs.
If you have a link that has an ID "fooLink" you can do this in your JavaScript:
docuemnt.getElementById('foo').onclick = function () {
//do your stuff here
}
This will have the same effect as binding the event in the "onclick" attribute if the link element in your HTML code.
That way, you can produce much cleaner HTML that is easier to read and maintain.
I need a little help understanding something. I am using the colorbox plugin to load an external an external html snippet (which works fine). But none of my jquery selectors see the newly loaded html. Is that right (I think it is)? and if so how do I work around that.
Thanks
When you set any properties/bind events in your $(document).ready(function() { ... }) they are executed on page load. So it is all applied to the DOM elements that are present initially.
But when you call the AJAX request and insert some elements into your document, the jquery statements are not executed again (because document.ready doesn't fire). Some solutions to overcome this are:
execute the inside of the document.ready function or the relevant part of it after you insert the new elements.
if the only thing you need are event handlers that should be bound the the new elements you may use live events.