Passing a Variable into jQuery AJAX - javascript

I'm stuck in a rut. I hope some one can help.
Basically, I am building an AJAX mobile web app with jQuery. I am able to parse a specific XML file just fine, but I want the option to parse other XML files based on the link they were clicked on and load them on the fly into the same DIV or UL.
So:
click on Link1, loads XML1
click on Link2, loads XML2
I would like to be able to do this all client side, so no PHP (or is that a bad idea?). This the jquery code I've been using:
$(document).ready(function() {
$("a.load_ajax").click(loadAjax());
function loadAjax() {
var fileID = get('?lineID=');
var dataID = "xml/" + fileID + ".xml"
$.ajax({
type: "GET",
url: dataID,
dataType: "xml",
success: parseXml
});
function parseXml(xml) {
$(xml).find("train").each(function() {
$("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
});
}
}
});
Its just not working at all. I have been passing the variable using GET in the url. So the link in the HTML goes to /?lineID=SBD_to_Union and it should load the XML file called SBD_to_Union.xml
Making sense to anyone? I'd appreciate some help.

What you seem to be struggling with is obtaining the line from the url in the anchor. Use $(this) to get the href attribute of the clicked link. You could then use a regex, if the url is as described, to remove all but the line id to use in constructing the link for the XML. I presume that the XML is server side and relative to the current url. If not, then you'll need to adjust the path. I've taken the liberty to compress things a bit by putting the functions inline. Edit: and the click handler should return false to prevent the link from actually performing its default action.
$(function() {
$("a.load_ajax").click( function() {
var fileID = $(this).attr('href').replace(/.*?lineID=/,'');
var dataID = "xml/" + fileID + ".xml"
$.ajax({
type: "GET",
url: dataID,
dataType: "xml",
success: function(xml) {
$(xml).find("train").each(function() {
$("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
});
}
});
return false;
});
});

Have you checked if the get function returns the correct data ?
add an alert(fileID); right after the get(..); line..
But why don't you create the urls to point directly to the xml files instead of parsing and creating urls on the fly ?
just make the link in the html to point to xml/SBD_to_Union.xml

On first glance, I think your ajax() syntax is a little off.
Are you using query strings for a particular reason? If no, I'd try giving the HTML links the absolute URL to the XML file you are trying to fetch:
Then try this:
$("a.load_ajax").click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
type: 'GET',
url: url,
dataType: 'xml',
success: function(response) {
$(response).find('train').each(function() {
$('ul#ajax-output').append('<li>' + $(this).find('time').text() + '</li>');
}
});
});
I haven't tested this, but it should do what you want.

Link1
Link2
You can do things depending on the id of the href (or another of its attributes or its href value).
$(function() {
$("a.load_ajax").click(loadAjax);
});
function loadAjax()
{
if ($(this).attr("id") == "link1")
{
alert("link1"); //load xml1
}
else
{
alert("link2"); //load xml2
};
}

Related

jQuery Load And Ajax Forms Not Working Together

I've created a news system, where i should be able to edit articles dynamically without redirect, from a modal. Also, i should be able to delete and create articles.
When something is changed, jQuery Load is called, but the problem is when i have to edit the loaded content.
$("#toolbox-items").load('inc-toolbox');
The above code loads the articles (the file is called inc-toolbox on purpose and works fine).
$(function () {
$('form').on('submit', function(e) {
e.preventDefault();
var clicked = document.activeElement.getAttribute('name');
$.ajax({
type: 'post',
url: 'process-toolbox',
data: $(this).serialize() + "&" + clicked + "=success",
success: function (response) {
$("#toolbox-items").load('inc-toolbox');
$('.modal-backdrop').remove();
}
});
});
});
But, when ever something has to be edited or deleted, the whole page reloads and nothing changes, although i'm still able to add things.
The add-button is not loaded dynamically from the script, but is in there from the start.
What in the world might the problem be?
Try code like this
$(function () {
$(document).on('submit','form', function(e) {
e.preventDefault();
var clicked = document.activeElement.getAttribute('name');
$.ajax({
type: 'post',
url: 'process-toolbox',
data: $(this).serialize() + "&" + clicked + "=success",
success: function (response) {
$("#toolbox-items").load('inc-toolbox');
$('.modal-backdrop').remove();
}
});
});
});

Pulling in specific elements with Ajax

I am building a Wordpress site. I am using Ajax to pull in content from another page to fill an empty div when a particular element is clicked. Each element has a different URL so I made the Url a variable. I need Ajax to only pull in a particular element from this URL. Instead it keep pulling in the entire page. I've tried using various methods to select the specific element, but I've hit a wall and need a little help.
(function($) {
function find_page_number( element ) {
return parseInt( element.html() );
}
$('.member-info').on('click', function (event) {
event.preventDefault();
page = find_page_number( $(this).clone() );
var memberSrc = $(this).attr('href');
$.ajax({
url: memberSrc,
type: 'get',
dataType:'html',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
success: function( html ) {
$("#main").empty();
$('#main').append( html);
}
});
})
})(jQuery);
You can filter the answer with jQuery:
$('#main').append( $(html).find('#main').html() );

Jquery get() method working in random

I have a div call load-ajax-hotels in which I am trying to load php files after the click event has been fired.
Say that I am trying to load alpha.php, beta.php, gamma.php ... delta.php
$("span.dessert-make").click(function(){
/* Load Initial Data */
$(".ajax-load-hotels").load("./php/alpha.php");
$.get("./php/beta.php", function(data){
$(".ajax-load-hotels").append(data);
});
$.get("./php/gamma.php", function(data){
$('.ajax-load-hotels').append(data);
});
$.get("./php/delta.php", function(data){
$('.ajax-load-hotels').append(data);
});
});
But this call is not working properly. I mean that at each instance of the click event I get different results. Some times just alpha.php and beta.php gets displayed some times every php files duplicate comes along. Its random every time. Can some one tell me what the problem is?
And also how do I make php files load as the user scrolls down to bottom of the page. How to implement the scrollTo() method for this. x and y pos becomes different once window resizes.
Sorry. That I might have overlooked. I corrected it.
Assuming you are trying to load these sequentially (syncronously), I would probably go with something like this:
function load_pages(index, pages) {
$.get("./php/" + pages[index] + ".php", function(data) {
$(".ajax-load-hotels").append(data);
if (index + 1 < pages.length) {
load_pages(index + 1, pages);
}
})
}
$("span.dessert-make").click(function(){
load_pages(0, ["alpha", "gamma", "delta"]);
});
You missed a }) at
$.get("./php/2.php", function(data){
$(".ajax-load-hotels").append(data); // here is missed });
$.get("./php/3.php", function(data){
$('.ajax-load-hotels').append(data);
});
Correct:
$.get("./php/2.php", function(data){
$(".ajax-load-hotels").append(data);
});
$.get("./php/3.php", function(data){
$('.ajax-load-hotels').append(data);
});
EDIT 1:
And, $.get is asynchronous.
To make it synchronous (I provided just an example):
$.ajax({
url: urltophp,
async: false,
success: function(data) { $(".ajax-load-hotels").append(data) },
dataType: 'html'
});

How to extract HTML() of a given DIV from html() when content is coming through AJAX

i am using jquery ajax to load a section of page with another page content/html. \
$(function() {
app.xhr = $.ajax({
url: url,
dataType: "html",
cache: false,
success : function(html)
{
app.html = $(html);
setTimeout(function(){
app.insertPageData();
app.xhr = null;
},100)
},
error : function()
{
alert("Not Found")
}
})
insertPageData : function()
{
$('div.data').html(app.html.find(".content").html())
}
});
So here is the problem specific to IE. app.html contains the HTML of the page and i need to extract one specific div html from the page which is not working with IE.
is there any other way to extract HTML from HTML??
Thanks / Gursimron
Do you have an id or class on the div you want? Also, by extract do you mean that's all you want, or do you mean that you want to remove it from the HTML?
If you want to remove the the div, and assuming you have an id, you can do this:
app.html.remove('#id-of-div');
If all you want is just the div and nothing else, then you would do this:
app.html = app.html.find('#id-of-div');

using the $.ajax function to fetch a specific id

I'm learning how to use jQuery methods of making AJAX calls, at the moment what I would like to know is how I use the $.ajax function to return a certain elements content. I realize this can be done easily enough using .load() but would like to get the results using .ajax(). At the moment I am fetching the clicked href attribute and returning the whole pages data when I would like to just return the #container content of the page?
Sample code being used:
jQuery(document).ready(function() {
/* Ajax load in portfolio pages */
var ajaxLoader = $('#ajax-loader');
var folioContainer = $('#folio-container');
ajaxLoader.hide();
$('div.wp-pagenavi a', 'div#content').click(function(e) {
$.ajax({
url : this.href,
method : 'get',
success : function(data){
folioContainer.html(data);
}
});
e.preventDefault();
});
});
You should be able to .filter() the response from the server to select only the data you want:
success : function(data){
folioContainer.html($(data).filter('#container'));
}
Here's a jsfiddle of this solution: http://jsfiddle.net/jasper/5HSzB/
Here's an optimized version of your code:
jQuery(function($) {
/* Ajax load in portfolio pages */
var ajaxLoader = $('#ajax-loader').hide();
$('.wp-pagenavi', '#content').find('a').click(function(e) {
$.ajax({
url : this.href,
method : 'get',
success : function(data){
$('#folio-container').html($(data).filter('#container'));
}
});
e.preventDefault();
});
});
You may be better off using the load method http://api.jquery.com/load/ , read the section "Loading Page Fragments"
not sure but try:
jQuery(document).ready(function() {
/* Ajax load in portfolio pages */
$('#ajax-loader').hide();
$('div.wp-pagenavi a', 'div#content').click(function(e) {
$.load(this.href + ' #folio-container');
e.preventDefault();
});
});

Categories