jQuery: Use a plugin on a page pulled in via AJAX - ajax

I'm building a simple AJAX driven website (because of the audience, it's okay to do this) where pages are pulled in based on the anchor etc. Simple enough.
However, one of the pages I want to pull in should have a slideshow on it. Once the call is successful and the page appears, the plugin isn't working.
Do I have to re-initialize the plugins I want to use on a page that's dynamically pulled in?
I can't show any code right now but in theory, what would the best practice be to use plugins and re-init JS code on dynamic pages?
I usually have all my script in one jquery.scripts.js file in the head of the main index page. Do these scripts need to be on the separate pages themselves?
Many thanks!
Michael.
$('#logo a').click(function() {
$.ajax({
type: "POST",
url: "./ajax/test.html",
data: '',
dataType: "html",
success: function(data){
if(parseInt(data)!=0) {
$('#cycle').html(data);
$("#cycle").cycle({
fx: 'fade',
//easing: 'easeOutExpo',
speed: 3000,
//timeout: 0,
//next: '#cycle-next',
//prev: '#cycle-prev'
});
}
}
});
return false;
});
This code executes the call, loads the page, but does not re-init the plugin. It does nothing, and there are no errors. Weird.

What you should do is after you retrieved the ajax page, insert it into your website and when that is done you can initialize the slideshow.
so basically:
$.ajax({
url: 'myurl',
success: function (data) {
$('#target').html(data);
$('#target .slideshow').slideshow();
}
});
<div id="#target">
<div class="slideshow"></div>
</div>

You don't say whether the cycle plugin has been previously initialized before running the $.ajax command. If it been, then you'll need to destroy the cycle slideshow and re-initialize it.
success:function(data){
if(parseInt(data)!=0) {
$('#cycle').html(data);
$('#cycle').cycle('destroy');
$("#cycle").cycle({
fx:'fade',
//easing:'easeOutExpo',
speed:3000,
//timeout:0,
//next:'#cycle-next',
//prev:'#cycle-prev'
});
}
}

Related

issue with Ajax dispatcher in typo3

I'm trying to grab some data from the database on a page in typo3 using Ajax . So after a long time looking for the appropriate way to do it , I got convinced that The Ajax Dispatcher is the best tool to do the job . So I created the file following the instructions to be found here.
Now when I make an Ajax call on my page , the console displays a 500 (Internal Server Error).
joined is a snapshot of my console tab.
and this is the jquery function that gets run on an onchange event .
function getContent(id)
{
console.log("Start process ...");
$.ajax({
async: 'true',
url: 'index.php',
type: 'POST',
data: {
eID: "ajaxDispatcher",
request: {
pluginName: 'listapp',
controller: 'Pays',
action: 'getMyCos',
arguments: {
'id': id,
}
}
},
dataType: "json",
success: function(result) {
console.log(result);
},
error: function(error) {
console.log(error);
}
});
}
Could someone please help me , I just started developing with this CMS of shit :p
If you indeed followed the tutorial step by step, and you use TYPO3 V6.2, you would get errors cause of depricated function calls to t3lib_div (as the title of the blog item says, it is for version 4.x)
Always keep your error.log open, it's your best friend in times of coding stress
You can also use typenum for ajax calls
http://lbrmedia.net/codebase/Eintrag/extbase-60-ajax-bootstrap/
I can imagine that starting with TYPO3 can be frustrating, but calling it a 'CMS of shit' does not seems to be a smart strategic move if you need help from people who think differently about it.

Grails: Passing a javascript variable to a template

I am new to ajax so maybe this is obvious. I've tried many different not-working approaches. I have javascript that when you click on a button:
an ajax call that grabs some data from a controller - returns an object
display that data in a template that I will show on the page
Here is the javascript/ajax:
<script type="text/javascript">
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Here is the key line in grails view template:
<g:each in="${allResults}" status="i" var="result">
How do I get the data from the javascript to the gsp code (ie allResults)?
Do I have to "refresh" this template to display new data?
thanks.
You just can't make your javascript/jquery code populate things in the gsp, since the gsp is processed server-side and javascript is processed client-side, after the gsp rendered all html documents and populated them with your model. You need to be aware that your page was already processed, so things like ${variables} won't be reloaded anymore. So when you do this:
$(".resulttable").show();
It's not gonna show the result you're waiting for. You have to use javascript code to reload your result table.
So if you're using ajax here, you should use the function success to alter your html table via javascript/jquery since you already have the response you wanted. Maybe this read can help you. Oh, and I think it would be better if in your ajax call, you would define a dataType (json works great in your case), like this:
$("#show").click(function () {
$.ajax({ url: '/Myproject/result/index',
type: "POST",
data: { id: id},
dataType: 'json',
success: function(result) {
alert("Success:" + result); // Can see getting object back.
}});
$(".resulttable").show();
});
Just to make clear what kind of response you're getting from the controller.
You do not need to write your ajax calls the hard way. There are some Grails intern tags you can use inside your html:
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
http://grails.org/doc/latest/ref/Tags/submitToRemote.html
http://grails.org/doc/latest/ref/Tags/remoteLink.html
Following the links you will find some nice examples...

how to run javascript within a ajax called file?

$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
How do I run javascript within test.html and make it work ?
Thanks
Abhinab
It doesn't really work like that. Javascript in a page is interpreted by the browser when the page is loaded. In this case you aren't loading a page in the browser, you're just getting the page in your ajax response. That response HTML may have <script> elements in them, but nothing is going to do anything with it.
I hesitate to even say this, but you could parse the response in your success function to find all of the script elements, then add whatever you're looking for to your own page's DOM. That should cause the script to be fetched and evaluated. I hesitate to mention it because it smells really bad. If any of my developers did this we'd be having a tough conversation. ;-)
It might help to elaborate on what you're trying to accomplish, as there might be a more elegant way to achieve your goals.
function call_recursive(){
var pages ["test1.html", "test2.html", "test3.html" ];
while(pages.length() > 0){
page = pages.pop();
$.ajax({
url: page,
context: document.body,
success: function(){
$("div#logger").append("<p>" + page " loded </p>");
},
error: function(){
$("div#logger").append("<p class'error'>" + page " is not loded </p>");
},
});
}
}
just execute call_recursive

how can i show ajax-loading when i fetching some information from database?

i used jQuery with Ajax By this code it works fine
$.ajax({
type : 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data : catdata,
success : function (msg){
$('body').html(msg);
}
});
but i want to show the ajax-loading gif while fetching that information from database?
And , is that way secure Or i have to add some security to it?
$('body').html("<img src='spin.gif' />").fadeIn(100, function () {
$.ajax({
type: 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data: catdata,
success: function (msg) {
$('body').html(msg);
}
});
});
If you make your database query synchronous on the server then your Ajax will be spinning as long as the request is being processes, including a database query and server request/response roundtrip.
I believe you have to do this yourself within the jQuery. Create a hidden image on the page, call .show() just before calling the ajax command and be sure to call .hide() inside the complete event...
complete: function () {
$("#ticker").hide();
}
You can download a suitable image from ajaxload.info.

Strange behaviour

I have the following script which works kind of...
$(document).ready(function(){
// add or remove from favorites
$("input:checkbox").change(function() {
if($(this).is(":checked")) {
$.ajax({
url: 'favorite.aspx',
type: 'POST',
data: { ID:$(this).attr("id"), State:"1" }
});
} else {
$.ajax({
url: 'favorite.aspx',
type: 'POST',
data: { ID:$(this).attr("id"), State:"0" }
});
}
});
// search on keyup
$(".txtSearchBox").keyup(function()
{
$.ajax({
url: 'search.aspx',
type: 'POST',
data: { strPhrase:$(".txtHeaderSearch").val() },
success: function(results)
{
$("#divSearchResults").empty();
$("#divSearchResults").append(results);
}
});
});
});
When the page loads for the first time after clearing browser cache, favorites function works fine and so does the search function. However, after loading the page after a page refresh, if I perform a search first, then try to tag a favorite, the favorite will not get inserted into the database, I have to click the reload browser button, then add a favorite.
Why is this happening?
You need to use live() as you are trying to act on stuff in the dom which you are inserting using ajax.
http://api.jquery.com/live/
Live is an answer, but I've had problems with change event with live and Internet Explorer, at least with select fields. I've solved the problem by using the livequery plugin.
jQuery delegate should also work if you don't want to install plugins.

Resources