Load portfolio items with AJAX without reloading the page - javascript

I have a bunch of portfolio items sorted as tabs on this page. Link to the site. The site is built with Joomla 2.5 and I have a component that takes care of displaying each portfolio item.
What I need to do is to load each respective portfolio item without reloading the page. So basically here is the javascript function that has the AJAX call
function ajax_portfolio($pid) {
var url = 'index.php?option=com_jms_portfolio&task=item.ajax_load_portfolio&tmpl=component&id=' + $pid;
alert(url);
var x = new Request({
url: url,
method: 'post',
evalScripts: true,
evalResponse: true,
onSuccess: function(responseText){
document.getElementById('ja-content-main').innerHTML = responseText;
aaa();
}
}).send();}
The issue in fact is not the AJAX call cause and the click event of tag, there is no problem with this event. The problem is to fire the javascript function aaaa() after each ajax call. Sorry if I was not clear but the problem is to fire the function aaa() after each ajax call, this function creates the slider for each portfolio item.

Remove the existing href attribute of the <a> tags that wrap the images. Then, add the a click handler through javascript to each <a> tag after giving them a unqiue id. This will then cause the ajax to be called when clicking on the images instead of redirecting to a new page.
As for calling the aaa function, I assume the issue is scope since you have not posted the method. To give aaa the correct scope, you can pass an extra parameter to ajax_portfolio to acomplish this.
A JQuery example follows.
<a port_id="56"><img>...</img></a>
$(document).ready(function() {
$("a").click(function() {
ajax_portfolio($(this).attr("port_id"), $(this));
});
});
// Add the $elem parameter here to track which element called this method.
function ajax_portfolio($pid, $elem) {
var url = ...;
var x = new Request({
url: url,
method: 'post',
evalScripts: true,
evalResponse: true,
onSuccess: function(responseText){
document.getElementById('ja-content-main').innerHTML = responseText;
// Pass the element that was clicked on to the aaa function.
aaa($elem);
}
}).send();}

Related

jQuery onClick pass a variable via GET to URL and load that URL

I know how to pass variables through AJAX calls via onClick to a PHP file and asynchronously loading the results on the initial page.
I now need to analogously pass a variable via onClick to a PHP file but I need to open a new window or redirect the whole page with the passed variable. The URL needs to contain the variable, so that the query/results can be "statically" sent to someone, like 'xyz.php?var=xyz'
I thought I could do something like this
$("#submit").click(function(event) {
var category_id = {};
category_id['linkgen'] = $("#linkgen").val();
$.ajax({
type: "GET",
url: "generatedlink.php",
dataType: "html",
data: category_id,
success: function(response){
window.open('generatedlink.php');
}
});
});
This only opens 'generatedlink.php'. I actually want what is passed via AJAX, i.e. 'generatedlink.php?linkgen=blabla' onClick in a new window/reloaded page! I'd very much appreciate your help.
just try: without ajax call
$("#submit").click(function(event) {
window.open('generatedlink.php?inkgen='+$("#linkgen").val());
});

Ho to remove a string from URL in ajax success function?

In the below posts, I'm adding string #show-post to the current URL .I will have a simple function to trigger a pop up box when the string present in the URL. This is an alternative idea as $(".posts-popup").trigger('click'); is not working oddly, its placed in the success function of ajax.
ANd this adds the string multiple time like this:
http://localhost/homepage.php#show-post#show-post#show-post#show-post#show-post#show-post#show-post#show-post#show-post#show-post#
ANd problem with adding the string to URL, each time the page is reloaded and the string is present, this pop up box function triggered. SO I'm looking for a way to remove the string from URL when other ajax calls are made.
window.location.href.split(/[?#]/)[0];//to remove the string.
I referred here: Remove querystring from URL
I thought this would, immediately remove the string when I place this in the ajax success function, but it doesn't remove at all.How to use this then?
//string added in the success function of ajax
$("input[name^=delete2]").on("click",function()
{
var deleteMe = this.id;
$.ajax({
dataType: "text",
url: '/delete_this.php?id='+deleteMe,
success: function(data){
//$(".posts-popup").trigger('click');
window.location = window.location.href + "#show-post";
window.location.reload();
}//end sucess
});//end ajax
});
You could try this:
var state = { yourState: foo },
var newURL = window.location.pathname+"#show-post";
window.history.pushState( state , null, newURL);
Cheers

Call JavaScript function from PagedListPager

Is it possible to call a JavaScript function from within #Html.PagedListPager(in here) ?
I have a button which calls the following function and performs all its supposed to with ease:
function fetchResults() {
$.get('#Url.Action("Search", "Notifications")',
{
device: "Device"
},
function (data) {
$('#results').html(data);
})
};
Now how can I do the same when I click on a page number on my PagedListPager?
Currently my pager reloads the page and that's the main thing I want to avoid.
This is my Pager:
#Html.PagedListPager((IPagedList)ViewBag.NotificationsPage, page =>
Url.Action("Search", "Notifications", new
{
device = "Device",
page = page
}),
PagedListRenderOptions.PageNumbersOnly)
Perhaps there's a much better way to do this. Help will be appreciated.
All that this #Html.PagedListPager helper does is spit some HTML containing links to perform the pagination. So you could subscribe to the click event of those links and AJAXify them:
$(document).on('click', 'a', function() {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
success: function(result) {
$('#results').html(result);
}
});
return false;
});
Important things to note:
I have subscribed to the click event in a lively manner. This means that if we replace the links in the success callback of the AJAX request, this click event handler will continue to work
You might want to adjust the $(document).on('click', 'a', function() { selector which is pretty inclusive and target only the links generated by this pager. For example look if they are not inside some containing div or something in which case you could use something along the lines of $('.pager').on('click', 'a', function() {.
Inside the success callback you might need to adapt the $('#results') selector to target the div containing the actual results which will get refreshed with the partial HTML returned by your controller action.
Talking about partial HTML and controller action you will obviously need to adapt the controller action that gets invoked in the AJAX request to return a PartialView instead of a full View containing only the updated records and new pagination links.

jQuery form processing, how can I reassign a function on callback?

$(function(){
$(".mailbutton").click(function() {
var email = $(".mailingfield").val();
$.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
var content = $(data).find("#mailinglistform");
$("#box").empty().append(content);
});
});
});
I'm using this to process an email address. If it fails in the PHP script the form is sent back in the '.mailinglistform' with a fresh form and some text explaining the error. The problem I have is that even though the button has the '.mailbutton' class in the callback form, the button doesn't do anything on click.
Is this because the jQuery only recognises it first time round? If so, is there a way to "reload" the 'mailbutton' .click function on callback?
Thanks!
You're right that because you're only re-rendering a portion of the page, the previous jQuery you wrote does not register with the "new" mailbutton class that you've re-rendered. To get around this, you should use .on(), e.g.:
$(".wrapper").on('click', '.mailbutton', function() {
var email = $(".mailingfield").val();
$.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
var content = $(data).find("#mailinglistform");
$("#box").empty().append(content);
});
});
In this case, wrapper needs to be a class element that's outside of the re-rendered section (e.g. the 'content' class, maybe a class around your form, etc) of the page, and one that is constantly present (i.e. not re-rendered in the ajax call). This will attach an onclick handler to any .mailbutton classes that are children of the wrapper class, whether they are present when the page is rendered, or if they are added to the DOM later.
Use on to bind click event. When control is render again in the callback function its events are removed. Using on instead of click could rebind the events automatically.
$(function(){
$(".mailbutton").on("click", function() {
var email = $(".mailingfield").val();
$.post("/PHP_scripts/mailinglist.php", { email: email }, function(data) {
var content = $(data).find("#mailinglistform");
$("#box").empty().append(content);
});
});
});
For this you can use AJAX with JQuery. OR you can alos user load().
$(".mailbutton").click(function() {
$.ajax({
url: 'api.php', // Put your calling page path here
data: "",
dataType: 'json',
success: function(data)
{
//do whatever you want to do on success
}
});
});

Return String Outside Ajax Request

I am pretty new to this, so go easy on me:
I am building an image gallery with a main index page which allows users to select different categories of projects, a sub-index page which allows users to select specific projects within their selected category, and then the gallery page for that project.
The code below is for the main index page. I am trying to pass the value of the src attribute of the first image of the first gallery page to the main index page to use as a thumbnail.
I have effectively been able to load the correct URL into the imageLoc variable, but I need to pass it outside of the Ajax request to pass it into my HTML document.
Simply put, I am trying to pass the value of the imageURL variable to the imageLoc variable.
Thanks for your help.
$('.galleryIndex a img').hide().each(function(){
var destination = $(this).parent('a').attr('href');
var imageLoc = $.ajax({
url: destination,
success: function(data){
var pageLoc = $(data).find('.galleryList a:first').attr('href');
$.ajax({
url: pageLoc,
success: function(data){
var imageURL = $(data).find('.galleryBox img:first').attr('src');
return imageURL
}
});
}
});
alert(imageLoc);
});
This will cause troubles do to the way the callback function is handled. It's a closure block that is called after the request has returned, so it runs apart from your main code in the function. If you want to alert the imageURL variable, alert it inside the callback function, or call another function to handle it. Since it is a callback function for an asynchronous server request, the part that alerts "imageLoc" will have run long before you ever get your async request back.
Edit: The only way to achieve what you're trying to do is to not make the ajax request asynchronously. If you set async:false, then you can call on the "responseText" property like this:
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
But be warned...this will halt browser operation while the request is pending. It's usually best to block user interaction by other means if you don't want them to screw with the page while something is loading.
I was able to get what I wanted as follows:
$('.galleryIndex a img[id!="fp"]').hide().each(function(){
var destination = $(this).parent('a').attr('href');
$.ajax({
url: destination,
context: $(this),
success: function(data){
var pageLoc = $(data).find('.galleryList a:first').attr('href');
$.ajax({
url: pageLoc,
context: $(this),
success: function(data){
var imageURL = $(data).find('.galleryBox img:first').attr('src'); //returns the src for the thumbnails
$(this).attr('src', imageURL);
$(this).load(function(){
$(this).show();
});
}
});
}
});
});

Categories

Resources