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

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

Related

How to ajax post on URL parameter change without page refresh

Depending on the change in URL parameter my values in the html changes. So basically i am passing these values to a json file. Since the page is refreshing because of the post my values are getting erased.I tried event prevent default, but its not working for me.
var carryOver ={"Jan":"","Feb":""};
var parameters = getParameterByName('month')//gets the current URL parameter
if(parameters == '01-2017'){
$('#monthQuota').html(janQuota);
carryOver["Jan"] = 300;
}
else if(parameters == '02-2017'){
carryOver["Feb"] = 400;
}
$(function() {
$('parameters').on('change', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "utilization-2017-test.php",
data: {
json: JSON.stringify(monthBalances)
}
})
})
})
sir, javascript or jquery can detect the #(hash)change but not the parameter change.If you clicked on a link and #tag changed then the script or event will detect that and page will not get reloaded but to change parameters you are going for an entry in the browser Url, so your values getting refreshed.
So please do one thing that keeps a text box and enter values in that then you get the value from textbox and go for service call instead of taking input from URL

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());
});

Calling a javascript function from a link generated from a ajax call

I have a javascript function.
I'm making a AJAX call, and in that recieved content there is a link that I want to call the javascript function with.
MyJavascriptFunction(bla){
alert (bla);
}
Result from ajax = "Click
Do I have to do anything special with the result from AJAX to get this to work or should it just work.
I have tried it like this but with no success with clicking the link.
The AJAX call:
function doSearch() {
var form = $('form');
$.ajax({
url: "doSearch.php",
type: "GET",
data: form.serialize(),
success: function(result){
document.getElementById("result").innerHTML=result;
}
});
}
In the php I'm printing out
Click
First of all, try it. But yes you have to do something with the AJAX result. It has to be put somewhere in the DOM or the user won't be able to click on it.
Plus, make sure that the javascript function is a top level. I would suggest you use event handlers instead though.
Change your <a> tag to:
Click
You are mixing jQuery and DOM. that is not pretty
try this - assuming you do not have more than one link in the html
success: function(result){
$("#result").html(result).find("a").on("click",function() {
MyJavascriptFunction(bla);
return false;
};
}

Load portfolio items with AJAX without reloading the page

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();}

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