I'm using jquery.form.js plugin: http://malsup.com/jquery/form/
Right after uploading the picture I would like to display it in a div. I made it work before, but unfortunately it works asynchronously and only with smaller files - when it's a bigger file, I see it's trying to display the picture that hasn't been uploaded yet. This is the code that works with small files:
$(this.el).find('#myForm').ajaxForm(function(data) {
document.cookie = "imagePath=" + data;
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)imagePath\s*\=\s*([^;]*).*$)|^.*$/, "$1");
$('.full-picture-col').html('<img src="' + data + '" class="img-responsive" />').fadeIn('slow');
$('.left-picture-col').hide();
$('.right-picture-col').hide();
});
I tried modifying the code so the picture gets displayed on "success", but unfortunately it doesn't work. I get an error in the console:
http://localhost/blabla/[object%20Object] 404 (not found).
HTML:
<form id="myForm" enctype="multipart/form-data" action="api/upload.php" method="POST">
<input type="hidden" />
<input id="upload" name="userfile" type="file" class="choose-file"/>
<button class="choose-picture"></button>
<div class="filename"></div>
<input type="submit" class="send-button" value='' />
</form>
JS:
$(this.el).find('#myForm').ajaxForm({
complete: function(data) {
document.cookie = "imagePath=" + data;
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)imagePath\s*\=\s*([^;]*).*$)|^.*$/, "$1");
$('.full-picture-col').html('<img src="' + data + '" class="img-responsive" />').fadeIn('slow');
$('.left-picture-col').hide();
$('.right-picture-col').hide();
}
});
What can I do to make it work?
Related
I want to upload a file to the server, so that another user can go onto the site, and search up the thing
It's going to take the file from the client, and put it into https://vidimax.elan1012549.repl.co/Videos/
or
Videos/
so ANY user can go in and see the video when the html retrieves the file
Videos/FILENAME.mp4
<input type="file" id="VIDEO">
<input type="submit" id="submit">
then, on another page, any user can access it with the search bar in
<input type="text" placeholder="Search" autofocus id="SearchBar">
<input type="submit" id="search" value="search" onclick="SetQuery(), GetQuery(), reload()">
<br> <br> <br>
<textarea id="ShowResultsFor"></textarea>
<br><br><br>
<div id="div">
<video src="Videos/" width="1080" height="720" controls id="Result2">
</video>
</div>
let Query;
let Video;
function SetQuery(){
var Search = document.getElementById("SearchBar");
Query = Search.value;
}
function GetQuery(){
document.getElementById("ShowResultsFor").value = ("Results for: " + Query);
Video = (Query + ".mp4");
document.getElementById("Result2").src = ("Videos/" + Video);
console.log(document.getElementById("Result2").src)
}
function reload(){
var container = document.getElementById("div");
var content = container.innerHTML;
container.innerHTML= content;
//this line is to watch the result in console , you can remove it later
console.log("Refreshed");
}
I specifically cannot use PHP because the browser just downloads the .php file, as it does not support php
and I wish for this to work on most browsers
edit: I found a method with python
I am attempting to take user input from an html form and then form a URL from that input that the user is directed to upon submitting the form. Currently, I have the following html form:
<form>
<br />
<div class="form-group">
<label for="cityInput">City</label>
<input type="text" class="form-control" id="cityInput" name="cityInput">
</div>
<div class="form-group">
<label for="stateCodeInput">State Code</label>
<input type="text" class="form-control" id="stateCodeInput" name="stateCodeInput">
</div>
<button type="submit" class="btn btn-primary" name="submitLocation "id="submitLocation" onclick="costOfLivingURL()">Submit</button>
</form>
Then I have the following JavaScript function that is setting values that will make the URL, as well as building the URL:
async function costOfLivingURL() {
let searchedCity = await getCity();
let searchedStateCode = await getStateCode();
var currentCity = document.getElementById('cityInput').value.trim();
var currentStateCode = document.getElementById('stateCodeInput').value.trim();
window.location.href = "https://www.bestplaces.net/cost-of-living/" + currentCity + "-" + currentStateCode + "/" + searchedCity + "-" + searchedStateCode + "/50000";
}
However, when I click on the button, nothing is happening at all.
I am not sure if my redirection is incorrect and I am also not sure if this is the correct way to use input data. If anyone can help me with this, I would greatly appreciate it!
I'm creating a quiz website for a class, and I am having trouble formatting the page where the user creates questions. I would like to have additional information pertaining a specific question type pop up when the user clicks a radio button. I would then like to have even more additional information pop up if the user clicks a button created in the initial additional information.
So it'd start off looking like this
then it'd look like this
then once the user clicked the Add Option button a few times, it'd look like this
To achieve this I am trying to use jquery to add the new content. However, I can't seem to get that content to display. Here's the current code
In jsp
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="QuestionsCreate.js"></script>
<meta charset="UTF-8">
<title>Quiz Creation</title>
</head>
<body>
<h1>Create Your Quiz</h1>
<form action="QuestionsCreateServlet" method="post">
<h2>Question Type</h2>
<input type="radio" name="type" class="type" id="multipleChoice"
value="multipleChoice" />
<label for="multipleChoice">Multiple Choice</label><br/>
<input type="radio" name="type" class="type" id="fillBlank"
value="fillBlank" />
<label for="fillBlank">Fill-in-the-Blank</label><br/>
<input type="radio" name="type" class="type" id="pictureResponse"
value="pictureResponse" />
<label for="pictureRsponse">Picture Response</label><br/>
<input type="radio" name="type" class="type" id="textResponse"
value="textResponse" />
<label for="textResponse">Text Response</label><hr/>
<div class="jspf"></div>
<input type="submit" name="button" id="button" value="Finish" />
</form>
</body>
</html>
In javascript
$(document).ready(function() {
$(".type").click(function(){
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
$("#button").attr("value", "Add");
});
var nOptions = 1;
$("#add-option").click(function(){
++nOptions;
$(".options").append("<input type='checkbox' name='option" +
nOptions + "' value='" + nOptions + "' /> " +
"<input name='name" + nOptions + "' /><br />");
});
var nBlanks = 1;
$("#add-answer").click(function() {
++nBlanks;
$(".fill-blank-answer").append("<input name='answer" + nBlanks +
"' /><br/>");
});
});
Sample jspf
<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>
I've also tried to move the jspf code into the javascript, but that didn't work either.
Is there a way I can add content dynamically to my webpage based off of dynamically added content? Thanks in advanced!
The issue you're having is you're trying to inject server-side JSP tags into a client's browser. Take this line for example:
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
Once that line of javascript has executed, the CLIENT's brower now has the markup:
<div class="jspf"><jsp:include page="wEB-INF/pictureResponse.jspf" /></div>
Broswers don't know what to do with <jsp:include> tags, so they just silently ignore them.
What you need to do is map the jspf you're trying to include to a url and use something like:
$(".jspf").load("/fragments/pictureResponse.jspf");
$.load sends an AJAX request to from the client browser back to the server, retrieves a bit of HTML from the server, then inserts that in to the elements that match the CSS selector ".jspf".
You also have an issue with your initial click handler.
$(".type").attr("value")
$.attr always returns the attribute value of the first matched element, so no matter what the user clicked, that line is going to evaluate to "multipleChoice". What you probably want to do is:
$(this).attr("value")
In the context of a click handler, "this" is going to refer to what the user just clicked.
UPDATE
Here's how I would add the "add option" click handler once the secondary content has been loaded:
$('jspf').load('/fragments/pictureResponse.jspf', function() {
$('#add-option').click(function() {
nOptions++;
$('.options').append('<input type="checkbox" name="option' + nOptions +
'" value="' + nOptions + '" /> <input name="name' + nOptions + '" /><br />");
});
});
$.get("${ctx}/store/terminalApply/applyTemplate?terminalType=${terminalType}&index="+num, function(data){
$("#contentDiv").append(data);
});
data was a page content
I have the following javascript code:
game.bind('gameover', function(seconds) {
setTimeout(function() {
var rank = game.getRank(seconds);
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('.rank').text(rank[0]);
scorecard.find('.byline').text(rank[1]);
...more code
In the following div this data is displayed (so the js script is working):
<div class="inner">
<h3>Nice job! Your time:</h3>
<h1 class="wobble time"><!-- 15 seconds --></h1>
<h2 class="rank"><!-- Friendly Mallard --></h2>
<h3 class="byline"><!-- (That's pretty good) --></h3>
</div>
Now I want to put the results also in a form so I can post it to the a database (mysql). So I've added a form and put it in the same div:
<form id="form" action="updatescore.php" method="post">
<input type="text" id="time" name="time" value="" />
<input type="text" id="rank" name="rank" value="" />
<input type="text" id="byline" name="byline" value="" />
</form>
Now in the JS I've copied the lines (e.g. scorecard.find('.time').text(seconds + ' sec');) and changed it to look for the id, so . becomes # and passed it in the js like:
scorecard.find('.time').text(seconds + ' sec');
scorecard.find('#time').text(seconds + ' sec');
etc
So this should work I think, but the form inputs stay empty. What am I doing wrong?
Kind regards,
Maurice
If you are just looking to move js variables into your database via updatescore.php you don't need to use a form at all! You can do it with AJAX.
var scoreData = {
time : time,
rank : rank[0],
byline : rank[1]
};
$.post('updatescore.php', scoreData); //done!
Use val() instead of text() for setting the values
I have a form and 2 javascript functions below but I am getting 2 '$ is defined' errors in my consoles. How can I fix these 2 errors which I have below (the errors are in the line which contains '//err' next to the line:
<body>
<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload();' class='imageuploadform' >
<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/>
<label>Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/>
<label><input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>
</p>
<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>
<script type="text/javascript">
var sourceImageForm;
function startImageUpload(imageuploadform){
//err $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
$(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
sourceImageForm = imageuploadform;
return true;
}
function stopImageUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
}
else {
result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
}
//err $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
$(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><label>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');
return true;
}
</script>
</body>
The $ variable is most often used by jQuery, which you don't appear to have on your page. This is not part of javascript; its a library. You need to include it with a script tag if you want to use it.
If you're using jQuery, you need to make sure this code comes after the where you include jQuery, and that it isn't run before document.ready.
Include jQuery above your functions. And, make sure they're loaded on page load as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" />
$(document).ready(function () {
// FUNCTIONS GO HERE
});