I want to be able to send the page URL and open a page when clicking on a leaflet marker.
If you believe there are better alternatives to submit the LINK please provided it below and will be more than happy to try it.
I need help getting the URL sent on the FORM
page_template_mobile.php
<head>
<script>
// Variable containing page URL
var siteURL = location.href;
// When click on blue marker, send URL and go to page
function onClick(e) {
document.myform.submit();
}
//Start location marker
const marker = L.marker([0, 0]).on('click', onClick).addTo(map).bindTooltip("Click here to upload a picture",
{
permanent: true,
direction: 'right'
}
);
</script>
</head>
<body>
<form name="myform" action="/uas_tools/visualization_generator/V2/Resources/PHP/upload_picture.php" method="POST">
<input type="hidden" id="custId" name="custId" value=<script> siteURL </script>>
Search
</form>
</body>
upload_picture.php
<?php
$page_url = $_POST['custId'];
_log('page_url: ' .$page_url);
?>
This is how I solved
// Variable containing page URL
var siteURL = location.href;
// URL is saved on custId
document.getElementById("custId").value = siteURL;
<form name="myform" action="/uas_tools/visualization_generator/V2/Resources/PHP/upload_picture.php" method="POST">
<input type="hidden" id="custId" name="custId">
</form>
Related
I'm trying to replace link from api, and redirect automatically to another link
Html code :
<html>
<body>
<p id="link"></p>
<script>
$.getJSON('api_url', function(data) {
document.getElementById("link").innerHTML = data.url;
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
Api Result :
<p id="link"></p>
//example1.com/aaa/?k=0000
I want to replace this link
//example1.com/aaa/
With
//aaa.com/aaa/
And
Redirect to
https://aaa.com/aaa/?k=0000
hello did you try this below ?
var url = "//example1.com/aaa/?k=0000";
var url = url.replace("//example1.com/aaa/", "//aaa.com/aaa/");
window.location="https:"+url;
to get the link from your api result you can use :
var url = document.getElementById("link").innerHTML;
Try this
$.getJSON('api_url', function(data) {
var link=document.getElementById("link");
link.setAttribute('href', data.url);
link.click();
});
I have successfully sent a csrf token using dropzone but using jquery style, now I don't want to use any jquery in my code I want to use javascript style to get the csrf token. I tried using below code but it keeps on giving me the tokenmismatch error,
myDropzone.on("sending", function(file,xhr,formData) {
// Show the total progress bar when upload starts
var folname = document.getElementById('folname').value;
var token = document.getElementsByName("_token")[0].value;
formData.append('folname',folname);
formData.append('_token', token );
});
this is the code that is working using jquery.
myDropzone.on("sending", function(file,xhr,formData) {
// Show the total progress bar when upload starts
var folname = document.getElementById('folname').value;
formData.append('folname',folname);
formData.append('_token', $('input[name="_token"]').val() );
});
any advice is appreciated. thanks guys.
Plain old inline javascript variable perhaps? Placed before all scripts possibly at the head
var csrf_token = "{{ csrf_token() }}";
...
// js file where dz related code is residing
...
myDropzone.on("sending", function(file,xhr,formData) {
// Show the total progress bar when upload
var folname = document.getElementById('folname').value;
formData.append('folname',folname);
formData.append('_token', csrf_token);
});
Guys thank you for leading me to the right path. I found the problem, I have two elements with "_token" name. so when debugging it returns 'undefined' error.
this code now works.
var token = document.getElementsByName("_token")[0].value;
my csrf token declaration is like this
<form name="post_form" id="post_form" class="form-horizontal" role="form" method="POST" action="/post">
{!! csrf_field() !!}
<!-- other code input boxes -->
</form>
<!--my dropzone code is below the form-->
<script>
// dropzone code here
</script>
the solution is either I use the token in my meta tag to my dropzone submission or change the name of the meta tag name from "_token" to something else.
so for this, I choose to use the meta tag to my dropzone code and it's now working. please see below for the solution.
I added a meta tag in my header with "_token" name.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="_token" content="{!! csrf_token() !!}"/>
</head>
and in my footer
<script type="text/javascript">
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
</script>
</body>
</html>
I have use the meta tag token value instead. here's what I did.
myDropzone.on("sending", function(file,xhr,formData) {
// Show the total progress bar when upload starts
var folname = document.getElementById('folname').value;
var token1 = document.getElementsByTagName('meta')['_token_'].getAttribute('content');
formData.append('folname',folname);
formData.append('_token', token1 );
});
let me know if I should add anything else to make the post more useful.
There are two ways to solve it.
--- FIRST (easiest) ---
<form method="POST" action="/your/url/here" class="dropzone" id="upload-files" enctype="multipart/form-data">
{{ csrf_field() }}
{{ method_field('POST') }}
</form>
<script>
$(function() {
Dropzone.options.uploadFiles = {
paramName: 'document_files',
maxFilesize: 3,
init : function() {
this.on("success", function(file, response) {
// file uploaded successfully
});
}
};
});
</script>
--- SECOND ---
Using dropzone in this way, you can place your dropzone inside another form.
<div class="dropzone dropzone-previews" id="dropzone-upload-documents"></div>
<script>
$(function() {
// in this case is important that autoDiscover = false
Dropzone.autoDiscover = false;
$("#dropzone-upload-documents").dropzone({
paramName: 'document_files',
maxFilesize: 3,
url: "/your/url/here",
init: function() {
this.on("success", function(file, response) {
// file uploaded successfully
});
},
sending: function(file, xhr, formData) {
formData.append("_token", "{{ csrf_token() }}");
formData.append("_method", "POST");
}
});
});
</script>
This is my code
chrome.windows.create({'url': "http://example.com/upload/upload.php?pictureID="+ theResponse + "&userID=" + localStorage["id"]+"&username="+ localStorage["mainLogin"]}, function(tab) {
// open window
});
this constructs a URL that looks like:
http://example.com/upload/upload.php?pictureID=123&userID=1&username=jack
I would call this method GET -- like how forms GET or POST
How can I open a window with POST data rather than GET data?
I think you have to write a HTML page that creates a form containing your POST data and target URL and submit the form.
Here's a simple example:
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function()
{
location.search.substr(1).split('&').forEach(function(item)
{
var input = document.createElement('input');
input.type = 'hidden';
input.name = item.substr(0, item.indexOf('='));
input.value = item.substr(item.indexOf('=') + 1);
document.getElementById('postform').appendChild(input);
});
document.getElementById('postform').submit();
});
</script>
</head>
<body>
<form action="http://example.com/upload/upload.php" method="post" id="postform">
</form>
</body>
</html>
Say that's test.html in your extension's root directory. Call
chrome.windows.create({'url': "test.html?pictureID="+ theResponse + "&userID=" + localStorage["id"]+"&username="+ localStorage["mainLogin"]}, function(tab) {
// open window
});
will open the website with POST method.
I'm trying to load a remote content of my site with jquery, but I constantly get an error:
XMLHttpRequest cannot load
'anylink_here'
Origin null is not allowed by
Access-Control-Allow-Origin.
Here is my code:
jQuery(function(){
$('#checkout').submit(function(e){
//prevent default behavior and hide possibly existing pop-up
e.preventDefault();
//process request
var form = this;
var url = form.action;
var dialog = $('<div id="lightbox_dialog"></div>').appendTo('body');
// load remote content
dialog.load(
url,
function (response, status, xhr){
dialog.html(response);
});
dialog.dialog();
//prevent the browser to follow the link
return false;
});
});
And a form code:
<form id="checkout" action='http://me.me/' method='get'>
<input type="image" class="class1" onclick="this.form.action='http://en.wikipedia.org/wiki/Sample'" title="Title" value="" src="http://4cornersautoloan.com/images/SmallButton.gif">
</form>
I also need to do it for the same domain but from http to https.
This is not possible basically because ajax doesn't support cross-domain request and http to https will be regarded as one.
You will need server-side code on your same domain to perform the fetching for you.
How about iframing it in?
<body>
<p id="open">Click to open</p>
<div id="dialog" title="window title">
<p><iframe src="popup.html" ></iframe></p>
</div>
<script>
$('div#dialog').dialog({
autoOpen : false,
show : "scale",
hide : "scale",
});
$('#open').click (function (event)
{
if ($("#dialog").dialog("isOpen"));
else $("#dialog").dialog("open");
});
</script>
</body>
</html>
I've wasted at least a half day of my company's time searching the Internet for an answer and I'm getting wrapped around the axle here. I can't figure out the difference between all the different technology choices (long polling, ajax streaming, comet, XMPP, etc.) and I can't get a simple hello world example working on my PC.
I am running Apache 2.2 and ActivePerl 5.10.0. JavaScript is completely acceptable for this solution. All I want to do is write a simple Perl CGI script that when accessed, it immediately returns some HTML that tells the user to wait or maybe sends an animated GIF. Then without any user intervention (no mouse clicks or anything) I want the CGI script to at some time later replace the wait message or the animated GIF with the actual results from their query.
I know this is simple stuff and websites do it all the time using JavaScript, but I can't find a single working example that I can cut and paste onto my machine that will work in Perl.
Here is my simple Hello World example that I've compiled from various Internet sources, but it doesn't seem to work. When I refresh this Perl CGI script in my web browser it prints nothing for 5 seconds, then it prints the PLEASE BE PATIENT web page, but not the results web page. So the Ajax XMLHttpRequest stuff obviously isn't working right. What am I doing wrong?
#!C:\Perl\bin\perl.exe
use CGI;
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/;
sub Create_HTML {
my $html = <<EOHTML;
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<script type="text/javascript" >
var xmlhttp=false;
/*#cc_on #*/
/*#if (#_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
#end #*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
</script>
<title>Ajax Streaming Connection Demo</title>
</head>
<body>
Some header text.
<p>
<div id="response">PLEASE BE PATIENT</div>
<p>
Some footer text.
</body>
</html>
EOHTML
return $html;
}
my $cgi = new CGI;
print $cgi->header;
print Create_HTML();
sleep(5);
print "<script type=\"text/javascript\">\n";
print "\$('response').innerHTML = 'Here are your results!';\n";
print "</script>\n";
If your process relies on query-string parameters, a simple meta-refresh would suffice. E.g. if they load http://yoursite.com/message?foo=1, then that can output a meta tag like:
<meta http-equiv="refresh" content="0; http://yoursite.com/realquery?foo=1" />
And some HTML that has your "please wait" message. The realquery script would actually execute the query and the HTML output by message will remain on the screen until realquery provides some output.
If the query relies on POST data, then it gets a little more complicated, because you can't redirect a POST. You can, however, output a form with some hidden fields and use Javascript to submit it. For example:
<script type="text/javascript">
window.onload = function() {
document.getElementById( 'form_with_hidden_fields' ).submit();
}
</script>
<form method="POST" action="realquery" id="form_with_hidden_fields">
<input type="hidden" name="foo" value="1" />
...
</form>
Please wait while your query is processed...
If you're interested in an AJAX solution, here's an example using jQuery:
$( '#submit-button' ).click( function() {
// show a "please wait" image
$( '#status-div' ).html( '<img src="please_wait.gif" />' ); // animated gif
// get form values
var formdata = { foo: $( 'input#foo' ).val(),
...
};
// submit form via ajax:
$.ajax( { type: "POST", url: "/realquery", data: formdata, success: function() {
$( '#status-div' ).html( '<img src="success.gif" />' );
} );
} );
And you could attach that to a form like:
<form>
<input type="text" name="foo" id="foo" />
<input type="submit" id="submit-button" />
<div id="status-div"> </div>
</form>
The empty status-div div will receive an image tag that points to a "please wait" image (this can be an animated gif). When the Ajax query finishes, it's replaced by a "success" image.
See Watching long processes through CGI by Randal Schwartz.
Here is a complete working example using friedo's HTTP meta refresh solution. This is not my personal first choice solution because it modifies the URL in the browser and it also refreshes the whole web page.
#!C:\Perl\bin\perl.exe
use CGI;
use CGI::Carp qw/fatalsToBrowser warningsToBrowser/;
sub html_page {
my ( $meta_string, $results_string ) = #_;
my $html = <<EOHTML;
<html>
<head>
$meta_string
<title>Two Stage Web Page Demo</title>
</head>
<body>
Some header text.
<p>
$results_string
<p>
Some footer text.
</body>
</html>
EOHTML
return $html;
}
my $cgi = new CGI;
print $cgi->header;
if ($cgi->param()) {
if ($cgi->param('doResults') eq "true") {
sleep(5);
print html_page('', 'Here are your results!');
}
}
else {
my $meta_refresh = '<meta http-equiv="refresh" content="0; /cgi-bin/twoStageScript.pl?doResults=true" />';
print html_page($meta_refresh, 'PLEASE BE PATIENT');
}
exit;
Finally got an Ajax version working. The slow.pl file is the file that takes a while to return.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Two Stage web page demo using Ajax</title>
</head>
<body>
<h1>Two Stage web page demo using Ajax</h1>
<div id="result">
Users input form goes here.
<p>
<input type="submit" value="Here is your submit button" id="load_basic" />
</div>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "Please be patient, this could take a while. <p> <img src='img/load.gif'/>";
// load() function
$("#load_basic").click(function(){
$("#result").html(ajax_load).load("/cgi-bin/slow.pl");
});
</script>
</body>
</html>