Ajax success if inArray breaks a href appending - javascript

I just thought I was very clever. Turns out I was wrong.
My ajax login works fine. I'm using it to append the username to a link which also works brilliantly.
Within a subset of pages I'd like it to refresh the page. This also works brilliantly.
However, the refresh stops the href being appending. I checked it and I can see the username?="username here" is working and it's immediately changed to username?=
I figure the reload would only happen in the cases when the if statement is true.?
if(data.success == true){
var thisPage = window.location.pathname;
var refreshArray = new Array("training_chap01.php","training_chap02.php")
if(jQuery.inArray(thisPage,refreshArray)){
location.reload();
}
$('#loggedIn').show();
$('a[href="userProfile.php?username="]').each(function(){
this.href += username;
});
$('#loginContent').slideToggle();
$('#loggedOut').hide();
Thanks for any help.

inArray returns an index, not a boolean value, try this:
if(jQuery.inArray(thisPage,refreshArray) > -1)
Documentation: http://api.jquery.com/jQuery.inArray/

Related

How to get current url in jquery

I can't explain myself in title. What i want is get string between slashes. Like that:
www.example.com/foo/bar/id/1
i want to get "foo". Because i made these codes.
select: function(event, ui) {
if(window.location.href = "news/" + ui.item.slug){
window.location.href =null;
}
else
window.location.href ="news/" + ui.item.slug;
}
I have a autocomplete search field. When i clicked a result, its redirecting me to www.example.com/news/34523
In this page if i use search field again, it redirects me to www.example.com/news/news/12412 After that i got 404. But if i am not in news tab, for example www.example.com/foo its working perfecly when i use search field. I just need an if statement, if i am in news pages act like another page.
You could simply use the location.pathname property to get the part between the first and second slash and run code based on this.
console.log(window.location.pathname);
console.log(window.location.pathname.split("/")[1] === "foo");
To show that this works, here is another snippet, acting as if url was window.location:
let url = document.createElement('a');
url.href = "http://www.example.com/foo/bar/id/1";
console.log(url.pathname);
console.log(url.pathname.split("/")[1] === "foo");
The problem seems to be with your url that gets redirected. Try the below code.
select: function(event, ui) {
if(window.location.href = "/news/" + ui.item.slug){
}
else
window.location.href ="/news/" + ui.item.slug;
}

if confirm ignores location.href

The following code reloads the page rather than the desired URL
function delFile(name,id) {
if (confirm('Are you sure you want to DELETE '+name+'?')) {
location.href='/cgi-bin/cnc.cgi?phrsrg~038919718485478~'+id ;
alert('/cgi-bin/cnc.cgi?phrsrg~038919718485478~'+id);
}
else {
return false;
}
}
In the alert, the id is shown as being added properly and the URL is correct. I can copy it from the alert, then use that text to get the right result. Other scripts on the same page that use similar location.href are working perfectly but this is the only one using confirm.
I've also tried
window.location.href = "http://stackoverflow.com";
But the page still reloads.
The triggering link is:
onClick="return delFile('Bill','1234')
The href on the triggering link is still being linked to, because delFile() only returns false if the confirm is not accepted -- that's what's causing the page reload. When the function returns true, the link fires before the redirect occurs.
You want the function to return false in all cases, so don't put the return in an else clause.
function delFile(name, id) {
if (confirm('Are you sure you want to DELETE ' + name + '?')) {
location.href = '/cgi-bin/cnc.cgi?phrsrg~038919718485478~' + id;
alert('/cgi-bin/cnc.cgi?phrsrg~038919718485478~' + id);
}
return false; // always, since you always want to prevent the link's default behavior. (Could also use event.preventDefault here.)
}
test
function delFile(name,id){
if (confirm('Are you sure you want to DELETE '+name+'?')) {
/* var fullpath = better to use the full url name/link;*/
var url = '/cgi-bin/cnc.cgi?phrsrg~038919718485478~'+id;
window.open(url, '_parent');
alert('/cgi-bin/cnc.cgi?phrsrg~038919718485478~'+id);
}
else {
return false;
}
}
It looks like the delFile() function is missing the opening curly brace, so I would start by fixing that. If the issue persists, check the JS console. Also, posting a codepen would be helpful.

Sending parameters via url during reload

I am doing an ajax request and in the success callback I want to refresh the page to reflect the changes. I am trying to pass parameters to the same page as I refresh that page.
The url is something like:
http://localhost:8080/details#component/12 to which I am appending the parameter as said below.
window.location.href += "?code=approved";
window.location.reload();
The above works in Firefox but not in IE, can you please help here?
Chris.
Try using these for IE:
window.location.reload(false); // To get page from cache
window.location.reload(true); // To get page from server
The hash is the problem; you append your data to the URL fragment (part after the #) The fragment isn't send to the server, ie the url doesn't change so no need to request the page again. Try manually adding '#some_text' to the url in your browser and see what happens ;)
Try something like this:
var newloc = document.location.href;
if(document.location.hash){
// remove fragment
newloc = newloc.substr(0, newloc.indexOf(document.location.hash));
}
newloc += document.location.search ? ";" : "?"; // prevent double question mark
newloc += 'code=approved';
// append fragment back to url
if window.location.hash is empty, you cant assign to location.href a new value without using a correct function (at least tested in chrome).
try the window.location.replace:
if (!window.location.hash)
{
window.location.replace(window.location.href + "?code=approved")
}

Check if window.history.go successful?

Is there anyway to check if a window.history.go command is successful in changing the window.location or not?
i.e. If I do a window.history.go(-5) when there are only 3 pages in the history stack, the browser will do nothing.
Is there a way to check if that happens and run other code? An error callback, of sorts.
Thanks.
For an immediate response, first you'll want to check history.length to make sure it is at least 6, e.g. to go -5. Apart from that, I think the only way is to use setTimeout and if the script is still running, the callback will be executed.
Not really a JS expert, but if you want to perform some action when the user goes back or forward, you could use URL hashes and trigger some function using the jQuery onhashchange event. This will not give you the position in history, and i'm also not sure about cross-browser compatibility, but it did the job for me so far.
$(window).on('load' function(){
var hash = parent.top.location.hash;
if(hash == '' || hash == '#' || hash == null){
//if none, set a hash and reload page
parent.top.location.hash = '#/some/hash';
parent.top.location.reload(true);//use true if you dont want to use cached items
}
});
$(window).on('hashchange', function(){
do_something(parent.top.location.hash);
});
function do_something(hash){
//this function will be executed each time the '#' changes
console.log('hash changed to '+hash);
}

IE8 is returning NULL when selecting from jQuery + AJAX request

I have no idea why this is happening. First off, the code is valid via W3C validator as HTML5 EXCEPT for URL encoding issues (like & should be & amp;) but i don't have control over that and that shouldn't cause this error anyways.
Second, this works in all other browsers.
Third, the "data" element you'll see in the JS below returns the HTML from the requested page fine.
$('.calendarWrap .dayEvents li:not(.prevMonth) a').click(function(e){
the_url = $(this).attr('href');
$.get($(this).attr('href'),function(data){
$('#calendar-bubble').remove();
$('body').prepend('<div style="display:none;left:'+(e.pageX)+'px;top:'+e.pageY+'px;" id="calendar-bubble">'+$('#main-content',data).html()+'<p class="details">View event details ></p></div>').find('#calendar-bubble').fadeIn(150);
$cb = $('#calendar-bubble');
if($(window).width()-($cb.outerWidth()+$cb.offset().left) < 0){
$cb.css({left:(e.pageX-$cb.outerWidth())+'px'});
}
if($(window).height()-($cb.outerHeight()+$cb.offset().top-$(window).scrollTop()) < 0){
$cb.css({top:(e.pageY-$cb.outerHeight())+'px'});
}
});
return false;
});
Lastly, here is the HTML for the requested page:
http://pastebin.com/DZE79xiA
I'm out of ideas...
Does anyone know of any alternative ways to get the data like this and parse through it and only grab #main-content?
Finally, after about a week of fighting this i found out it's because of HTML5 elements. I ended up having to use: http://jdbartlett.github.com/innershiv/ and all worked after that.
What you've pasted seems to be correct. If I understand your problem right you could try
var content = $(data).find('#main-content')
instead of
$('#main-content',data)

Categories

Resources