I built a rudimentary page navigation system with jQuery. You click the next button, it retrieves the next page via AJAX; click the previous, it goes to the one before it, etc. The AJAX request is done via the jQuery $('#dom').html().load() method.
Inside one of the pages pulled is an a href link with an onclick which goes to a custom function (loadPage() -- the same function I'm using for the parent page navigation). As you can guess, the onclick event used inside the AJAX page does not work -- it's trying to call a function that doesn't exist.
Is there a simple way to make this work? Perhaps some other jQuery AJAX method like GET? Thanks in advance.
It sounds like you are embedding JavaScript into your html. Don't do that. Put your JavaScript into an external file and include it with a script tag, just like you do with jQuery.
Related
I have this form on one page that we use as a tool. It's on page tool.html, in div id="tool"
Since this tool is to be shown on another page as well, I want to pull the tool in and not have to copy and paste (in case changes are done later on, this will reflect it everywhere)
Now, I have put all the jQuery functions in a separate file that I link in, so I can reuse it on many pages.
I can call in the form properly by using
<script>
$(document).ready(function() {
$("#lyristool").load("../path/tool.html #tool");
});
</script>
And I can confirm that the linked script page is loaded in properly, but it's not working at all.
Why will the linked script work on the original page, but not on the page when that whole containing div is pulled in?
Try to execute this line:
$("#lyristool").load("../path/tool.html #tool");
before loading the other script. I think your binding is not working because those elements don't exist on the page at the moment of binding.
In order to be able to do that, you should put all your binding code in a document.ready callback.
I'm trying to use the jQuery Plugin SelectBoxIt, but my content is loaded by Ajax, and I'm not getting it to work.
I'm using Grails and I don't wanna put inline code, so I've tried to load it with the .on() jQuery method, but I can't get it since I don't want to put an event, I just want it to load when my content loads, and I can't find another solution.
I'm trying to do something like this:
My page calls a remote link:
<g:remoteLink controller="strategy" action="index" update="content-box"></g:remoteLink>
Then, ALL my HTML selects must trigger the plugin and turn from normal selects to the ones the plugin provides:
$(document).on('click', 'select', function(){
$('select').selectBoxIt()
})
But I don't want to trigger them with the click event, I want them to trigger right when the page is called.
Since my content is not added when the first page loads, I thought the .on() method was the right choice, but it makes me put an event, and I want to trigger when the page loads()
Thanks in advance.
Maybe read this, http://api.jquery.com/load/ and http://api.jquery.com/jQuery.ajax/. Sorry I can't be of more help.
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.
So I have a like button on my page which loads fine when the script is executed in the bottom of the page. The problem is that I have an Ajax based popout which renders some HTML that also has the like button. How can I initialize that?
I've tried putting same script, but it doesn't get executed.
Is there a way to explicitly call any method to initialize the button?
FB.XFBML.parse() will do the trick
I understand that it's possible (and I have done it) to return javascript and jQuery code (which of course is javascript... hehe) when doing a jQuery ajax request and running it once it reaches the browser.
What I'm wondering is if I return data, let's say a form, that I present in a dialogcontainer. What should I delete myself once that container is closed by the user and what does jQuery understand by itself to delete.
My idea is to build a page that require very little page reloads and once a user clicks on a button I present them with a form or some other content fetched from the server. Alongside that content the javascript required by that content should also be retrieved. But if the dialog is closet I don't want tons of javascript to be left eating memory. Any way around that?
You could unbind the click event that does the ajax call. If nothing is going to change if they open the dialog again, then this should be fine. While you unbind it you could then change it more a toggle type of thing (Show/Hide), since the javascript and HTML should already be set now.
But it really depends on what you are trying to do. The ajax call will only happen once they click it. It's not going to continually refresh unless you want to. So there should be nothing in the background running except for binding events like click, which is ok.