I have reorganized my directory structure and my php file is not being used/called. It's as if I can't access it. My functions and the php file were working as expected before this and my file permissions are sorted out so can someone lead me in the right direction?
The directory is as follows:
public_html(folder)
- javascript(folder)
- main(folder)
- userManagement.js => The `tryEmail` function is in here.
- php(folder)
- users-profs(folder)
- tryEmail.php
- index.html
The code:
function tryEmail(email)
{
console.log("function:tryEmail, param: " + email);
return function()
{
$.post("../../php/users-profs/tryEmail.php",
{
email:email
},
function(data)
{
console.log("function:tryEmail-post, data: " + data);
if(data == "valid")
return true;
else
return false;
});
}
}
The URL ../../php/users-profs/tryEmail.php will be interpreted relative to the user's current URL, not the URL of the .js file. Match the URL in $.post() to the URL where you will invoke this script, and it will be fine.
Edit based on comment: Add a slash: /php/users-profs/tryEmail.php -- without it, it's a relative URL, so it's looking in the wrong place.
Also, you need to remove the anonymous wrapper function, because you can't return an anonymous function, and it won't execute anyway. Your code should look like this:
function tryEmail(email)
{
console.log("function:tryEmail, param: " + email);
$.post("/php/users-profs/tryEmail.php", // fixed the leading / here
{
email:email
},
function(data)
{
console.log("function:tryEmail-post, data: " + data);
if(data == "valid")
return true;
else
return false;
});
}
instead of
"../../php/users-profs/tryEmail.php"
use your project's base url and then concatenate your file location to it like
<your_project_base_url> + 'php/users-profs/tryEmail.php'
Related
I am facing a small issue here...
I want to write a javascript function to open files with different extensions, I have already written a function that can open files but with their extensions hard written in the code, how to make this dynamic? Like Instead of opening "file1.pdf" or "file1.png" I want to store the extension as a variable and open it dynamically.
Here is the code:-
<script>
function viewCM() {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + ".pdf")
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + ".pdf", '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - do something else.
alert("File was not found");
})
return true;
}
</script>
The above function works perfectly with any type of extension but I can't manage to know how to make the extension dynamic
Thanks in advance
EDIT: I don't get the file name from the server, The idea is simply that I have an upload button that uploads a file related to a specific "transfer" and I make the name of the uploaded file as transferID.whatever extension then when I want to open the file, I just write the code I posted. so I don't search the server for the file name.
Following up on comments in the original question:
function viewCM(fileExtension) {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + "." + fileExtension)
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + "." + fileExtension, '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - do something else.
alert("File was not found");
})
return true;
}
You should not need to have any if statements within viewCM() if you can pass the file extension to the function (unless you're planning on performing some type of validation).
It will automatically adjust according to file type.
means if pdf then open pdf viewer, excel should open excel
window.open( file Name );
Maybe you could find whats after the dot in the name to search for the type, just an idea.
var afterDot = str.substr(str.indexOf('.'));
Then depending on type do your code.
(This can be very much improved).
EDITED:
var transferID = document.getElementById("theTransferID").value;
var extension = transferID.substr(transferID.indexOf('.'));
Now you have this possibility:
if(extension == ".pdf"){ $.get("/Uploads/" + transferID + ".pdf")
.done(function () {//...}
For anyone facing the same issue, I have made a some kind of "naive" workaround to solve this by making multiple JavaScript functions to open various types of files.
It is as simple as : try to read a pdf file, if you can't then call a function that reads a png file etc!!
<script>
function viewCM() {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + ".pdf")
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + ".pdf", '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - call the next function.
viewCMPng();
})
return true;
}
function viewCMPng() {
var transferID = document.getElementById("theTransferID").value;
$.get("/Uploads/" + transferID + ".png")
.done(function () {
// Do something now you know the file exists.
window.open("/Uploads/" + transferID + ".png", '_blank', 'fullscreen=yes');
}).fail(function () {
// File doesn't exist - show alert message.
alert("File was not found");
})
return true;
}
</script>
Is there a way to save the current webpage by using casperjs or phantomjs?
I tried to get the html and save it into a file. But the resulting file was a lot different from the screenshot of that time (with casper.capture). Is there a way to save the current webpage?
Andrey Borisko suggested to use the disk cache to retrieve the resources. My solution is not that efficient, but you don't need to decompress text files.
I use XMLHttpRequest to retrieve all resources after I registered them with the resource.received event handler. I then filter the resources into images, css and fonts. The current limitation is that remote resource paths that contain something like ../ or ./ are not handled correctly.
I retrieve the current page content with getHTML and iterate over all captured resources to replace the path used in the markup, that is identified by a portion of the complete resource URL, with a randomly generated file name. The file extension is created from the content type of the resource. It is converted using mimeType from this gist.
Since CSS files may contain background images or fonts, they have to be processed before saving to disk. The provided loadResource function loads the resource, but does not save it.
Since XMLHttpRequest to download the resources the script has to be invoked with the --web-security=false flag:
casperjs script.js --web-security=false
script.js
var casper = require("casper").create();
var utils = require('utils');
var fs = require('fs');
var mimetype = require('./mimetype'); // URL provided below
var cssResources = [];
var imgResources = [];
var fontResources = [];
var resourceDirectory = "resources";
var debug = false;
fs.removeTree(resourceDirectory);
casper.on("remote.message", function(msg){
this.echo("remote.msg: " + msg);
});
casper.on("resource.error", function(resourceError){
this.echo("res.err: " + JSON.stringify(resourceError));
});
casper.on("page.error", function(pageError){
this.echo("page.err: " + JSON.stringify(pageError));
});
casper.on("downloaded.file", function(targetPath){
if (debug) this.echo("dl.file: " + targetPath);
});
casper.on("resource.received", function(resource){
// don't try to download data:* URI and only use stage == "end"
if (resource.url.indexOf("data:") != 0 && resource.stage == "end") {
if (resource.contentType == "text/css") {
cssResources.push({obj: resource, file: false});
}
if (resource.contentType.indexOf("image/") == 0) {
imgResources.push({obj: resource, file: false});
}
if (resource.contentType.indexOf("application/x-font-") == 0) {
fontResources.push({obj: resource, file: false});
}
}
});
// based on http://docs.casperjs.org/en/latest/modules/casper.html#download
casper.loadResource = function loadResource(url, method, data) {
"use strict";
this.checkStarted();
var cu = require('clientutils').create(utils.mergeObjects({}, this.options));
return cu.decode(this.base64encode(url, method, data));
};
function escapeRegExp(string) {
// from https://stackoverflow.com/a/1144788/1816580
return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(find, replace, str) {
// from https://stackoverflow.com/a/1144788/1816580
return str.replace(find, replace);
}
var wrapFunctions = [
function wrapQuot1(s){
return '"' + s + '"';
},
function wrapQuot2(s){
return "'" + s + "'";
},
function csswrap(s){
return '(' + s + ')';
}
];
function findAndReplace(doc, resources, resourcesReplacer) {
// change page on the fly
resources.forEach(function(resource){
var url = resource.obj.url;
// don't download again
if (!resource.file) {
// set random filename and download it **or** call further processing which in turn will load ans write to disk
resource.file = resourceDirectory+"/"+Math.random().toString(36).slice(2)+"."+mimetype.ext[resource.obj.contentType];
if (typeof resourcesReplacer != "function") {
if (debug) casper.echo("download resource (" + resource.obj.contentType + "): " + url + " to " + resource.file);
casper.download(url, resource.file, "GET");
} else {
resourcesReplacer(resource);
}
}
wrapFunctions.forEach(function(wrap){
// test the resource url (growing from the back) with a string in the document
var lastURL;
var lastRegExp;
var subURL;
// min length is 4 characters
for(var i = 0; i < url.length-5; i++) {
subURL = url.substring(i);
lastRegExp = new RegExp(escapeRegExp(wrap(subURL)), "g");
if (doc.match(lastRegExp)) {
lastURL = subURL;
break;
}
}
if (lastURL) {
if (debug) casper.echo("replace " + lastURL + " with " + resource.file);
doc = replaceAll(lastRegExp, wrap(resource.file), doc);
}
});
});
return doc;
}
function capturePage(){
// remove all <script> and <base> tags
this.evaluate(function(){
Array.prototype.forEach.call(document.querySelectorAll("script"), function(scr){
scr.parentNode.removeChild(scr);
});
Array.prototype.forEach.call(document.querySelectorAll("base"), function(scr){
scr.parentNode.removeChild(scr);
});
});
// TODO: remove all event handlers in html
var page = this.getHTML();
page = findAndReplace(page, imgResources);
page = findAndReplace(page, cssResources, function(cssResource){
var css = casper.loadResource(cssResource.obj.url, "GET");
css = findAndReplace(css, imgResources);
css = findAndReplace(css, fontResources);
fs.write(cssResource.file, css, "wb");
});
fs.write("page.html", page, "wb");
}
casper.start("http://www.themarysue.com/").wait(3000).then(capturePage).run(function(){
this.echo("DONE");
this.exit();
});
The magic happens in findAndReplace. capturePage is completely synchronous so it can be dropped anywhere without much head ache.
URL for mimetype.js
No, I don't think there is an easy way to do this as phantomjs doesn't support rendering pages in mht format (Render as a .mht file #10117). I believe that's what you wanted.
So, it needs some work to accomplish this. I did something similar, but i was doing it the other way around I had a rendered html code that I was rendering into image/pdf through phantomjs. I had to clean the file first and it worked fine for me.
So, what I think you need to do is:
strip all js calls, like script tags or onload attributes, etc..
if you have access from local to the resources like css, images and so on (and you don't need authentication to that domain where you grab the page) than you need to change relative paths of src attributes to absolute to load images/etc.
if you don't have access to the resources when you open the page then I think you need to implement similar script to download those resources at the time phantomjs loads the page and then redirect src attributes to that folder or maybe use data uri.
You might need to change links in css files as well.
This will bring up the images\fonts and styling you are missing currently.
I'm sure there are more points. I'll update the answer if you need more info, once I see my code.
I'm trying to create a simple HTML page that will basically, load up some javascript, and check my direction (../Files)
the Files folder contains
file_001.txt
file_002.txt
file_003.txt
I then want javascript to use the latest one (file_003.txt), and update a anchor tag with the id of "file_download".
Would anyone by any chance have an idea how to do this?
The reason is, lets say I have a terms and conditions PDF file that is T&C_001.pdf and download the line a new terms and conditions is released. so we keep the T&C_001.pdf for any old records and we upload T&C_002.pdf. Now this will not need any HTML knowledge or even Javascript. The owner of the site would just need to add a new file with 002 on the end.
though, not fully accurate, you could try
<script type="text/javascript">
function getLatest(location, filename, ext, readyCallback, index) {
var tgIndex = typeof index === 'undefined' ? 1 : index;
$.ajax({
type: 'HEAD',
url: location + '/' + filename + '-' + index + '.' + ext,
success: function() {
getLatest(location, filename, ext, readyCallback, tgIndex + 1);
},
error: function() {
if (tgIndex > 1) {
readyCallback(location + '/' + filename + '-' + (tgIndex-1) + '.txt');
return;
}
readyCallback();
}
});
}
getLatest('linkToSite', 'file', 'txt', function(filename) {
if (typeof filename === 'undefined') {
alert('No file found on the location');
}
// do something with returned filename
});
</script>
which would try to check if the file is there, when not the previous index was the latest one. If the first one fails, there is no file on the specified location
This reply doesn't add formatting, and rather expects the files as:
- file-1.txt, file-2.txt, ...
this example assumes jquery :)
a fiddle of it you can find here
http://jsfiddle.net/Icepickle/JL5Su/
I have a MVC3 action method with 3 parameters like this:
var url = "/Question/Insert?" + "_strTitle='" + title + "'&_strContent='" + content + "'&_listTags='" + listTags.toString() + "'";
and I want to call this by normal javascript function not AJAX (because it's not necessary to use AJAX function)
I tried to use this function but it didn't work:
window.location.assign(url);
It didn't jump to Insert action of QuestionController.
Is there someone would like to help me? Thanks a lot
This is more detail
I want to insert new Question to database, but I must get data from CKeditor, so I have to use this function below to get and validate data
// insert new question
$("#btnDangCauHoi").click(function () {
//validate input data
//chủ đề câu hỏi
var title = $("#txtTitle").val();
if (title == "") {
alert("bạn chưa nhập chủ đề câu hỏi");
return;
}
//nội dung câu hỏi
var content = GetContents();
content = "xyz";
if (content == "") {
alert("bạn chưa nhập nội dung câu hỏi");
return;
}
//danh sách Tag
var listTags = new Array();
var Tags = $("#list_tag").children();
if (Tags.length == 0) {
alert("bạn chưa chọn tag cho câu hỏi");
return;
}
for (var i = 0; i < Tags.length; i++) {
var id = Tags[i].id;
listTags[i] = id;
//var e = listTags[i];
}
var data = {
"_strTitle": title,
"_strContent": content,
"_listTags": listTags.toString()
};
// $.post(url, data, function (result) {
// alert(result);
// });
var url = "/Question/Insert?" + "_strTitle='" + title + "'&_strContent='" + content + "'&_listTags='" + listTags.toString() + "'";
window.location.assign(url); // I try to use this, and window.location also but they're not working
});
This URL call MVC action "Insert" below by POST method
[HttpPost]
[ValidateInput(false)]
public ActionResult Insert(string _strTitle, string _strContent, string _listTags)
{
try
{
//some code here
}
catch(Exception ex)
{
//if some error come up
ViewBag.Message = ex.Message;
return View("Error");
}
// if insert new question success
return RedirectToAction("Index","Question");
}
If insert action success, it will redirect to index page where listing all question include new question is already inserted. If not, it will show error page. So, that's reason I don't use AJAX
Is there some one help me? Thanks :)
Try:
window.location = yourUrl;
Also, try and use Fiddler or some other similar tool to see whether the redirection takes place.
EDIT:
You action is expecting an HTTP POST method, but using window.location will cause GET method. That is the reason why your action is never called.
[HttpPost]
[ValidateInput(false)]
public ActionResult Insert(string _strTitle, string _strContent, string _listTags)
{
// Your code
}
Either change to HttpGet (which you should not) or use jQuery or other library that support Ajax in order to perform POST. You should not use GET method to update data. It will cause so many security problems for your that you would not know where to start with when tackling the problem.
Considering that you are already using jQuery, you might as well go all the way and use Ajax. Use $.post() method to perform HTTP POST operation.
Inside a callback function of the $.post() you can return false at the end in order to prevent redirection to Error or Index views.
$.post("your_url", function() {
// Do something
return false; // prevents redirection
});
That's about it.
You could try changing
var url = "/Question/Insert?" + "_strTitle='" + title + "'&_strContent='" + content + "'&_listTags='" + listTags.toString() + "'";
to
var url = "/Question/Insert?_strTitle=" + title + "&_strContent=" + content + "&_listTags=" + listTags.toString();
I've removed the single quotes as they're not required.
Without seeing your php code though it's not easy to work out where the problem is.
When you say "It didn't jump to Insert action of QuestionController." do you mean that the browser didn't load that page or that when the url was loaded it didn't route to the expected controller/action?
You could use an iframe if you want to avoid using AJAX, but I would recommend using AJAX
<iframe src="" id="loader"></iframe>
<script>
document.getElementById("loader").src = url;
</script>
I've found similar questions but none of the answers show clearly and easily how to get a thumbnail for a vimeo video using jQuery and JSON. If anyone can help that would be great, here is what I've got but it shows nothing at the moment.
var vimeoVideoID = '17631561';
var videoCallback = 'showThumb';
$.getJSON('http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=' + videoCallback,
function(data){
$(".thumbs").attr('src',data[0].thumbnail_large);
});
Thanks in advance.
I believe you're having the "same origin policy" issue. You should consider writing a server side script using something like "file_get_contents" or "fopen", enabling you to grab the data from vimeo, translate it to json, and output to your javascript with a nice ajax call.
If you would like to avoid using a server-side script you may use the data type JSONP.
var vimeoVideoID = '17631561';
$.getJSON('https://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?', {format: "json"}, function(data) {
$(".thumbs").attr('src', data[0].thumbnail_large);
});
Notice the URL is a bit different from how you are using it. The callback which you defined as a var is unnecessary. You're attaching the getJSON to a function directly, so you'll call the 'callback' in the url '?'. This informs the getJSON function to pass the successful data return to the supplied function.
You can test my code here. Hope it helps!
With the updated API, it would be...
$.getJSON('https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + id, {format: "json"}, function(data) {
$(".thumbs").attr('src', data.thumbnail_url)
});
You can use this function which supports all types of Vimeo links & sizes:
function get_vimeo_thumbnail(url, size, callback)
{
var result;
if(result = url.match(/vimeo\.com.*[\\\/](\d+)/))
{
var video_id = result.pop();
if(size == 'small'){
var video_link = encodeURIComponent("https://vimeo.com/" + video_id + "?width=480&height=360");
$.getJSON('https://vimeo.com/api/oembed.json?url=' + video_link, function(data) {
if(data && data.thumbnail_url){
if (typeof(callback) !== 'undefined') {
callback(data.thumbnail_url);
}
}
});
}
else
{
$.getJSON('http://vimeo.com/api/v2/video/' + video_id + '.json', function(data) {
if(data){
if (typeof(callback) !== 'undefined') {
var thumbnail_src = data[0].thumbnail_large;
if(thumbnail_src){
callback(thumbnail_src);
}
}
}
});
}
}
}
To use it:
// Available sizes: large, small
get_vimeo_thumbnail('https://vimeo.com/475772381', 'large' function(url){
alert(url)
})
Please check out this page; Vimeo has a new method call oEmbed as Vimeo is now pushing it's new oEmbed technology.
The method above, will fail on IE (no thumbs will be shown).