I am keen on mastering Codeigniter and jQuery for web app dev.
I have links where I click and they fill up a div with content and this works but I use the $.ajax({}); not get or post or load. now the thing I noticed and I know it's not new is anything I try to do with jquery on the fetched content does not work.
So even if I do a console.log() to try and catch a click event on a submit button nothing happens. The form just moves away from the page currently being worked on. So my question is what are noobs to do in this instance? is it a setting or an option?
You need to use live() to bind functions to events for elements that get added after page load. Basically, live() will bind code to events firing on all existing and future elements that match a certain selector.
Related
I have a small problem with a jquery function and I can't figure out where I'm going wrong with it, I'm using .load to pull another page into a div for the second time using a button with a .click() function. The problem here is when I click the button the data I want flashes up and is then replaced with the data that is loaded when I first navigate to the page, however if I bind the .click to:
<p>peter paragraph</p>
The page will load fine without incident.
The jquery function is this:
$(document).ready(function() {
$("p").click(function(){
alert("buttonthe1st");
$('#jam').load('register.php');
alert("buttonthe2nd");
});
});
I was using the alerts to test to see if it was working originally, the function appears to be working a long with the actual load event when I tested them with the paragraph and when I tried them in googles developer console.
As I typed the above out I just realised when I was testing it, the URL and the page refreshed even if there was no function or onclick even tied to the button in question. Which explains why I'm having this problem now, is there a way to resolve this?
P.S. I appologise for making this so vague.
I am a little confused as to why clicking on a paragraph element would cause a page to reload but if you are in fact talking about a button element you might find the preventDefault function helpful. Try using that within the function you are binding to "onclick" and see if it makes any difference
I am having a problem, my website www.projectbuilder.tk is 100% ajax powered, how I have ran into a problem that seems to stump me, I can set the urlbar/history to each visited page, and have php loading the pages on the user's first visit based on ?page= from there all pages and data is loaded via ajax.
The problem is that no one can actually right click the links (as I cannot give them the href attribute without causing the page to reload, and skipping the onclick event)
So my question is how do I make the ajax links look like normal links for right-click and open in new window, or tab, or copy url? thanks.
Put the normal link in the 'href' tag, but adjust your onclick jquery handler method to this:
function handleLinkClick(event){
if (event) event.preventDefault();
... Continue as normal ...
}
The 'preventDefault' stops the normla event propogation so left clicking the link will use your onclick method without sacrificing the valuable info stored in the HREF. Also. Take caution of using jqueries 'live' binding. It used to capture right-clicks as well, may not be the case any more though.
Sorry just realized i assumed you were using jquery. Just returning false, as the other poster mentioned should work fine. I'm so used to jQuery these days.
Why can't you give them href without skipping the onclick?
Just return false from the onclick handler and it won't use the href.
Am I missing something? Because this is very basic.
In my main page, I have to call a colorbox upon clicking a button. Within that colorbox there is also a button that must trigger another colorbox. Knowing the fact that a colorbox within a colorbox is not tidy enough to see, I am looking for a solution to call another colorbox even if one is being rendered. Is this possible? if yes, how can It be?
You could consider using the iframe option on the first call. Doing so gives you a whole new Window environment to work with. From there, just call colorbox as normal.
This may be right for you because the iframe option allows the called content to be plain old HTML, which of course may contain a colorbox call.
Obviously, the resulting UI might not work for you but you haven't provided much about that in your questions.
Think it over.. :)
Ok, javascript/jquery is not my strong point, but I'll try to help with this. Please let me know if I make syntax errors by commenting and I'll edit.
Yes, this is doable. The button within the colorbox just needs to call a function from the parent page. I tend to use colorbox in iframe mode, which requires something like this:
parent.yourFunction()
If you're not using colorbox as an iframe then I think you can just call yourFunction() directly.
Then yourFunction() would need to close the colorbox using $.colorbox.close() and open a new one using $.colorbox(params...)
That should effectively replace the current colorbox with the new one.
example:
function replaceColorbox(){
$.colorbox.close();
$.colorbox(html:"<h1>Success</h1><p>This should replace the existing colorbox</p>");
return;
}
I'm currently working on a website that you'll find here: http://steadfastdesignfirm.com/rgw/. I used an ajax effect that I found online at CSS-Tricks to dynamically load content from another php page and animate it (fade in and fade out) when a navigation tab is clicked.
I have managed to get this working fine, as you will see (please note the only two working pages are "Home" and "Experience RGW"), however, all of the jQuery scripts in my document that apply to elements within the div that reloads are broken when the content is dynamically generated.
As a quick example, take a look at the text resize tool beneath the image rotator on the home page and try changing the font size. Now, click on the "Experience RGW" tab and scroll down to the text resize tool again. Notice that now that we've loaded in experience.php dynamically within the "#ajax" div, the script doesn't work. Also, if you click on the "Home" link now, you will also notice that the image rotator doesn't work.
I've looked high and low online and through multiple forums to try and figure out how to fix this, and I believe I have to incorporate the jQuery .live function, to apply the script to any element, whether it's currently visible or not. Otherwise, document.ready only runs the scripts once after the DOM loads and will not affect the ajax loaded content. Is that correct? If so, how do I apply that to multiple jQuery files executed on my page?
Well, this is totally driving me crazy and I've tried hard to get it, but I just can't quite figure it out. I'm fairly new to jQuery, but am trying to learn fast. I would post some of the code here, but there is a lot involved in this question. :)
If anyone would be willing to shoot out a quick answer, or a few lines of code, I'd greatly appreciate it.
FYI: The script that runs the ajax effect is in ./scripts/page.js. Also, please remember that I currently have only the Home page and Experience RGW page working correctly, so please don't waste time trying to diagnose problems on the other pages. I haven't gotten to them yet. :)
Here is a link to some of the code on jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.
Thanks,
Taylor
I'm behind a proxy and can't see your page, but it sounds like the events are not being re-attached to the content created through ajax.
I'll try to explain, when your page loads the first time, you are attaching jQuery events to DOM objects on document.ready(), this function will be called only once.
Every time you drop DOM objects and create new ones with the ajax response, these new objects never get jQuery events attached again, since the document.ready() function didn't fire.
You can try putting your event-attaching code in a different function and invoke that function on document.ready() AND after every DOM modification (your ajax call to change the tab content).
Hope it helps.
The problem is a breakdown in the order of executing code.
page loads
load event fires and sets up elements
click event
ajax loads the new page
The new page doesn't have any events set to it. Two solutions
use "live" links in the window.load event callback
use run the page load code again.
Solution 1 is nice but if you have an specific plugin used then it won't be the total solution.
Solution 2 can be implemented by pulling out your code in window.load and wrapping in another function. Just all it onload and then in the callback when the ajax loads.
I know how frustrating is can be. I hope this helps.
You need to rebind any events after dynamically loading in elements to a page, as Javascript sees these as totally new DOM elements.
You can achieve this by modifying the code you use to update the page:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#ajax")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #ajax", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav li").removeClass("on");
$("nav a[href='"+newHash+"']").parent().addClass("on");
// Rebind any events
documenttextsizer.setup("text-resize");
});
});
};
});
This applies to any events that happen WITHIN the updated elements in the page. So after the comment "//Rebind any events" you can add others as they are required! Hope that helps :)
I have a web page with one button and one div. If you click this button that will load another button into the div using jQuery. I found that the new button -which is loaded in runtime - will not be affected by other jQuery statements.
How can I apply jQuery statements to elements that are loaded in runtime?
I hope It is clear. if not I will try to give an example.
Thanks and best regards
If you are attaching an event to a selector that matches something in the dynamically loaded DIV before the DIV is loaded, you need to use jQuery's live functionality so that it knows to look for new content to attach these handlers to. If that's not your problem, I'm not sure what you're asking.
Simply bind events to the new button when it's loaded:
$(element).bind("click", function(){
//enter code for the new button
})