getJSON is adding the previos URL. jQuery - javascript

I have an Spring Server with HTML pages with Thymeleaf Engine and I am using jQuery for making a getJSON:
When my server is redirecting to that URL localhost:8080/redirect_admin/ where is the the next peace of code:
<table>
<tr>
<td>
<input type="text" class="add_youtube_link" th:id="${id_local}" />
<input type="button" id="upload_youtube_links" onclick="add_youtube_link()" value="Add new Youtube Link"/>
</td>
</tr>
</table>
Where I can add a link to add in my server. Well, when I click on onclick the next Javascript function will run:
function add_youtube_link()
{
var url2 = "add_youtube_link/"+$(".add_youtube_link").attr('id')+"/"+$(".add_youtube_link").val().replace(/\//g,"_");
alert(url2);
$.getJSON(url2, function (data) {
// window.location = "redirect_media/"+$(".add_youtube_link").attr('id');
});
}
So, the alert function is showing correctly the new URL: add_youtube_link/1/ZyDO4FUVxXk untill this point all is OK.
But, if I take a look in the Network Log on Chrome, the URL called is:
GET http://localhost:8080/redirect_media/add_youtube_link/1/ZyDO4FUVxXk 404 (Not Found) .
So, the problem is that the previous URL redirect_admin/ is adding automatically in the new URL. Anyone knows how to solve it?
Thank you

Its always a good idea to use a base url in your code, so you don't face issues like this:
var baseUrl = location.protocol + "//" + location.hostname + (location.port && ":" + location.port) + "/";
Then include that base url with any url
var url2 = baseUrl + "add_youtube_link/"+$(".add_youtube_link").attr('id')+"/"+$(".add_youtube_link").val().replace(/\//g,"_");

Usually this kind of error happens when your physical script file's address is different from your html page.The solution is that we always pass the partial address from the context where the function is called and in this case is your html page.

Related

Dynamically insert and execute a script resource

Hope I can explain this properly. We are currently inserting this external JS in our HTML:
<script src="https://NotOurDomain.com/SomeScript.js"></script>
The code in this script resource is something like this:
var callbackUrl = encodeURIComponent(window.location.href);
var token = encodeURIComponent('eidoasjdiojancoxjnegkjasd');
var url = 'https://NotOurDomain.com/path?token=' + token + '&callbackUrl=' + callbackUrl;
document.open();
document.write('<iframe src="' + url + '"></iframe>');
document.close();
This all works fine, but now I need to insert this dynamically. Problem is, I can't just copy the code in this script resource because the "token" part changes periodically.
How can I get this to work? Is it possible to load https://NotOurDomain.com/SomeScript.js as a string and parse out the token so that I could create and insert an iframe with the correct URL? Or is there a simpler way of doing this?
This obviously does not work because a script include will only execute on load:
jQuery('#someDiv').append('<script src="https://NotOurDomain.com/SomeScript.js"></script>');
But is there some way to get it to "eval" after inserting?

JQuery / Ajax - update URL without refreshing the webpage - should be compatible with IE8 and IE9

When I first load my webpage, it loads to this URL:
/default/
Now, when I click the "nextPost" button on the screen (which has an attribute called data-nextPostNumber), this is the code which I have:
event.preventDefault();
var nextPost = $(this).attr('data-nextPostNumber');
$("body").load("/default/?postNumber=" + nextPost);
So this loads the URL (assuming that nextPost=2)
/default/?postNumber=2
However, this was loaded using ajax so the actual URL in the URL bar is still
/default/
What I want to do is get the GET variables in the URL which was loaded through ajax. I have this code (which gets the GET variables in the URL and puts them in a dictionary called params):
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
But this code just gets the GET variables in the URL which is in the URL bar - not the URL which was loaded using Ajax. So, is there a way for me to take the URL which was loaded using Ajax and place that URL in the URL bar? If not, is there any way for me to solve my issue? Please note that I need it to be compatible with IE8 and IE9.
You can use the new History API method pushState:
<input type="button" value="Post #2"
onclick="history.pushState(null, 'MyWebsite Post #2', 'http://mywebsite.com/?postNumber=2');" />
When you click this button, the location will change to http://mywebsite.com/?postNumber=2 and then you can call your getQueryParams function as follows:
getQueryParams(location.search);
The pushState will NOT work if you open the page as a file, in another words, it must come from a webserver (it works with localhost)

post google maps form submit to python

startupdate In both "what-I-get" and "what-I-want-to-get" below, the word data should really be details, so I am not even getting what I thought and do not understand the function downloadUrl at all, apparently. Am I using the wrong utility function? Any clarification would be greatly appreciated.
endupdate
When I submit the form below (entering 'Brian'), the result I see in the browser address is as follows.
http://localhost:8092/click?data=Brian#
But I want it to be something like the following, so that my python app processes it. (I am not sure about this exactly, but hopefully you know what I mean.)
http://localhost:8092/details.txt?Action=add&data=Brian#
Can you tell me how to get the desired result?
My python contains the following.
app = webapp2.WSGIApplication(
[('/', MainPage),
('/details.txt', Details),
('/comment', DetailsLog)],
debug=True)
My javascript contains the following script for processing a form.
var iwform = '<br />'
+ '<form onsubmit="process(this); return false" action="#">'
+ ' <input type="text" name="data" id="idinput" size="31" maxlength="31" tabindex="1"/>'
+ ' <input type="submit" value="Submit" tabindex="4"/>'
+ '<\/form>';
function process(form) {
var details = escape(form.data.value);
var url = "details.txt?Action=add&details="+details;
downloadUrl(url, function(doc) { });
map.closeInfoWindow();
alert("Your information has been processed.");
}
The function downloadUrl() is from photomunchers.com and is designed (I believe) to replace a deprecated google map's function GDownloadUrl().
My problem was that in using the function downloadUrl() I inadvertently forgot to load its src in some of my templates.
Thanks,

How to add an variable value in between the hyperlink in javascript

I am sending an email via javascript. In mail.parameter.text property I need to send the hyperlink. In the code below I am hardcoding the url whick looks very lengthy and also I need to add the /dashboard at the end of the url. Any idea on how to shorten the url?
var parent = space.getParent();
var siteGroup = "GROUP_EMAIL_CONTRIBUTORS";
var mail = actions.create("mail");
mail.parameters.to_many = siteGroup;
mail.parameters.subject="New Site Created in Community"
mail.parameters.text=" A new site called " + document.properties.name +"is created.Click http://pc1:8080/share/page/site/"+document.properties.name+"/dashboard"+" to join the site";
//execute action against a document
mail.execute(document);
Sorry if this is a basic question I dont know javascript. This is my entire script and I am not using any html tags in between.
You can change it to something like this, for example:
mail.parameters.text="Click <a href='http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard'>here</a>";
Your link will appear as "here" and nevertheless lead to the URL you specified. Is that what you mean by "shorten the url"?
Please try now.
var url = "Click http://pc1:8080/share/page/site/" + document.properties.name + "/dashboard" + " to join the site";
ail.parameters.text = url;

exchange variables between html files in javascript

I am trying to share variables between two html pages. I am only using javascript and HTML5 to develop a windows 8 app. Based on an image which a user clicks on one page, I want a div on a second page to be populated with that image. Any ideas?
When I click on the image, I am currently calling the following function:
function imageClick(url) {
//var id = parsed.ClientID;
//window.location= url + "?" + id
window.location = url;
}
Then in my html file, I have this line:
<img onclick="imageClick('pages/page2/page2.html')"
data-win-bind="src:image" style="width: 133px; height: 125.5px;">
I was thinking of getting that id in the next page's url (if I were to uncomment the commented lines above) but it's a bit hackky and I don't actually know how to go about executing the retrieval of that on the next page..
Is there a more efficient and easy way of doing this in javascript? Like an equivalent of sessions in php or something?
Javascript does not have session variables because it runs on the client side. You can use URL parameters and cookies in order to achieve the same results.
You can get the URL parameter by using this function:
http://ziemecki.net/content/javascript-parsing-url-parameters
Add the link to the image to the query part of the url when they click. Something like you had in the comment, assuming you don't have a query part already:
function imageClick(url) {
//var id = parsed.ClientID;
window.location= url + "?src=" + url.src;
//window.location = url;
}
The other page can use window.location.search to extract it, strip off the src=. The code would look something like this:
var src = window.location.search;
if (src.indexOf("src=") == 0) {
src = src.substring(4);
}
newPageImageElement.src = src;
Where newPageImageElement is the <img> where you want to display the picture on the second page.

Categories

Resources