Grails and Javascript - javascript

I would like to know how to use tinybox in my Grails app.
I've tried this so far (placed it inside the head tags):
<g:javascript library="TinyBox/tinybox"/>
<g:javascript>
function errorResponse(){
var b = ["Oh com'on!Say it!",
"At least say a word!",
"Don't be mean, say something. :)",
"I'll be sa sad."];
var a = Math.floor(Math.random()*3);
//alert(b[a]);
TINY.box.show(b[a],0,0,0,0,3);
}
</g:javascript>
And I called it somewhere inside my form:
...
<g:submitToRemote update="comments" url="[controller:'sushiTrail',action:'save']" value="Send" onFailure="errorResponse();" onSuccess=" comment.value='';"></g:submitToRemote>
...
I'm new to both grails and Javascript. Tinybox is supposed to load when validation fails. I've tried a simple alert() and it worked, and I seriously think there is something wrong with the way I call stuff. I followed the tinybox demo here, but I still can't get it going even though view source seems to be correct. Can someone enlighten me?
Note: there was no error. The tinybox just didn't appear. :(

The <g:javascript> tag only accepts values "prototype", "scriptaculous", "yahoo" or "dojo" for the library attribute, so the following won't work:
<g:javascript library="TinyBox/tinybox"/>
Add the tinybox JavaScript files to the Grails application's web-app/js directory and use one of the following instead to import it:
<g:javascript src="path/to/tinybox.js" />
or
<script type='text/javascript' src="path/to/tinybox.js"></script>

Related

How to get a DIV element from an external webpage in HTML file?

Apologies in advance if this question has been asked earlier. I did find some similar questions on web but I couldn't figure out the answer still. You can say I have never dealt with anything beyond basic HTML. So any help would be appreciated.
I have a HTML file (Say text.html) only for personal use. In the file, there will be an input box for entering text and a submit button. I want that if I clicks on submit, it opens a particular hyperlink from an external webpage based on the input text. I guess it's like "I am feeling Lucky" of Google.
Example: If the user enters "Test" and clicks on Submit, it should open the second result from the page "https://www.google.com/search?q=test"
Here is my HTML:
<!DOCTYPE html>
<html>
<body style="background-color:beige">
<h1 style="text-align:center"><font size="14">Test</font></h1>
<style type="text/css">
</style>
<form id="form">
<div align="center" style="vertical-align:bottom">
<input type="text"
value="Test"
id="input"
style="height:50px;width:200px;font-size:14pt;">
</div>
</form>
<TABLE BORDER="0">
<TD><button class="button" id="button01">SUBMIT</button></TD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
</script>
Also, here is the example of the div element from the page on which the hyperlink I want to open is on:
<div id="XYZ" class="contentEditValue" style="float:left;width:180px;">
2nd Result
</div>
I have read that it can be achieved with PHP or Jquery and all but they are not something I have ever worked on. Thank you very much in advance for any help!
Appreciate any other alternatives as well.
You shouldn't be able to do that because of security. If that (reading content from iframes, other browser windows...) would be possible, an attacker could add JS keylogger to your internet banking login or read your messages on Facebook. CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is used to block these requests and if the website doesn't say explicitly that you are allowed to do something with its content, most browsers won't allow you that.
You have are missing a }); to close the ready() function
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
});
</script>
Here's a basic example of how to do this in PHP.
Taking JavaScript/JQuery out of the picture, let's just say you have a basic form:
<form>
<input type="text" value="Test" name="input">
<input type="submit">
</form>
Without specifying action or method attributes on the <form> tag, the form will make an HTTP GET request to the URL of the page it is on, so for this example the PHP code will be on the same page as the form. Here's a more detailed description of sending form data if you're interested.
Now that you have a way to pass the input to the PHP script*, there are three basic parts to this problem.
Make a request to the page you want with a query string including your input
http_build_query is an easy way to construct a properly encoded query string to use with your request. For this example we'll use file_get_contents to make the request. There are other ways to do it, including cURL, but let's keep it simple.
$query = http_build_query(['q' => $_GET['input']]);
$page = file_get_contents('http://www.example.com/?' . $query);
I'm not using Google for this example because it's a bit more complicated to find the right links in the response and follow them. (Partially because they don't really want you to do it that way.)
Find the link you want in the response
Don't try to find the link in the response with regex. You'll have problems with it, come back to Stack Overflow to try to solve them, and people will tell you that you shouldn't be using regex, so just skip that part and use a DOM parser.
$doc = new DomDocument;
$doc->loadHTML($page);
$links = $doc->getElementsByTagName('a');
$url = $links[0]->getAttribute('href');
I used getElementsByTagName() to find links, but if the page is more complex an xpath query will work better. Also, I used the first link ($links[0]) because example.com only has one link. $links[1] would get you the second link if it existed.
Follow the link
header("Location: $url");
exit;
If everything goes well, you'll end up where you want to be. But there are a lot of things that can go wrong. If you're requesting a resource that you have no control over, it can change at any time without any advance warning to you, so your code that finds the link may stop working. You may get blocked from making requests. Scraping links from sites like this violates the terms of service on many sites, so check that out beforehand. You may find that the site offers a web API, which should be a much better way to access its content than this.
*You don't really need a form for this; you can just pass the input parameter in the URL to your page.

Sending Pdf, created with html2pdf, via Mail

I'm trying to send a document using eKoopmans html2pdf (new-api-branch) script via email. But since I'm not a trained programmer, I'm having a couple of problems with it.
Here is my code so far
<head>
<!-- Stuff that goes here -->
<script src="opt/html2pdf-new-api/dist/html2pdf.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#cmd").click(function(){
var signaturefilename = $('#auftragsnummer').val();
var element = document.getElementById('PDFcontent');
var opt ={
filename: signaturefilename+'.pdf',
image: { type: 'jpeg', quality: 1 },
}
html2pdf().from(element).set(opt).save();
});
});
</script>
</head>
<body>
<div class="container" id="PDFcontent">
<!-- Contents that should be converted to pdf -->
</div>
</body>
I can save the file, using the value of an input field as filename, without any problems. Everything I need is in the PDF and it displays fine.
As I've read in one of the issues here, it is possible to get that PDF data and pass it to phpmailer. But I have to be honest here, I have no clue on how to do that. I tried to do
html2pdf().from(element).set(opt).toDataURL();
instead, but that just gave me an error.
What I want to do in the end is as follows. I want to create that PDF and attach it to an email. That email should also have the value of the field with the id="auftragsnummer" + some text as subject.
I think I would need to get some kind of string, store in a var and pass that to phpmailer. I probably need to decode it back inside the php-script, but as I've said, my knowledge is limited...
If someone could help me, on how to attach that PDF to phpmailer, or somehow save it on the server, that would be highly appreciated.
Thanks in advance for your help. Best regards

Jquery script doesn't work in jquery loaded page

I have tried to search for similar questions, but I could not find anything, so if you know any similar question please let me know.
Let me explain what Im doing:
I have a script that validates forms in a js file, It works fine in any page with a form I have, the problem is that when I load a form using jquery it just doesn't work, I have tried using the next line in different places: Header, footer, etc
<script src='myFile.js'></script>
By far the only thing that has worked for is writing the line of code above inside the form itself.
I think it has something to do with the form that the DOM works, I have also tried using and not using it.
$(document).ready(function (){ //code});
It only will work when I add the script tag with the src attribute inside the form itself.
It would not represent a big problem for me to add the script tag to any form I load using jquery but it's a little bit more of work an unefficient, and also when I add the script tag to any form and load it using ajax I get the next console warning that only goes away when I remove the script tag from the form file:
jquery-3.2.1.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Here is a part of my code:
<!--home.html-->
<div id='formFrame'>
</div>
<script>
$("#formFrame").load("html/loginForm.html");
</script>
<!--end of home.html-->
<!--loginForm.html-->
<form action='somePage.php' method='post' id='loginForm'>
<input type='email' name='email' placeholder='email'>
<input type='password' name='password' placeholder='password'>
<input type='submit' name='submit' value='Login'>
</form>
<script src='js/validate.js'></script>
<!--end of loginForm.html-->
<!--validation script (validate.js)-->
$(document).ready(function (){
$("#loginForm").submit(function (e){
e.preventDefault();
alert("Working");
});
});
Thanks for spending some of your valuable time on reading this, I appreciate it a lot!
As I can't comment, putting my comment in answer!
I am not sure what you have written in validate.js, but if you are using jQuery unobtrusive validation, then you must rebind the validators to the form if you are loading it dynamically.
I was facing same issue in ASP.NET MVC while loading forms using AJAX. I am not sure will it help you or not but below is the code.
$("#formFrame").load("html/loginForm.html", function(){
var $form = $("formSelector");
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
});
Well guys I found a solution:
As there seems to be a conflict when loading an external page using ajax (.load) I opted to use php instead of javascript which worked fine:
I removed the next code
<script>
$("#formFrame").load("html/loginForm.html");
</script>
And added the next to the div where I want to load my content:
<!--home.php (changed html to php)-->
<div id='formFrame'>
<?php
require 'html/loginForm.html';
?>
</div>
I would have prefered to use the load method from ajax to avoid loading the content befere the user could request it, but by far that's the only solution I have been able to think about.
Thanks to everybody for your help it was really helpful!

target in php when i click on the submit button i want to go to two different URL

I am facing problem in a project: When I press submit, I want to go to two different urls: one from blank and one direct here.
How can I resolve this problem?
My code:
<form method="post" action="" name="form" target="_blank">
function addAmount($invoice_number,$particular,$quantity,$rate,$percentile,$amount){
$addAmm=$this->conn->prepare("insert into `amount`(invoice_number,particular,quantity,rate,tax,amount)values(?,?,?,?,?,?);");
$addAmm->bind_param("isssss",$invoice_number,$particular,$quantity,$rate,$percentile,$amount);
$addAmm->execute();
header('loaction:add_info_success.php');
//header('loaction:printpdf.php'); error face
}
I want to print pdf and swith current page to iformation page.
In PHP, you can't set two different Location headers (you have a typo in your code by the way). If you need to achieve something similar to what you want, you have to handle form by JavaScript and open two different windows with window.open (manual).
it is possible to open multiple URL's if you combine PHP with js. But i am not sure if it's a good way to implement it. It can lead to confusion at the user. My suggestion is to add a direct download link at the success page. But if you want to go this way, you can use the next in PHP.
<?php
$urls = 'window.open("add_info_success.php");window.open("printpdf.php");';
?>
<script language="javascript" type="text/javascript">
function openURLs() {
<?php echo $urls; ?>
}
window.onload = openURLs;
</script>
If you have more URLs, you can simply use a loop and add each url's in the windows.open() method.
Use
header('location:printpdf.php');
inside 'add_info_success.php'

Uncaught Reference Error: function is not defined

I'm working on an app for webOS that will take a megaupload link(assuming its a video), parse it into a direct link and stream it to a ffplay port for webos called TouchPlay.
I'm working on a basic prototype that will just take the end code on a megaupload link and return a direct link.
Now that I have laid out the basic parts of my application, on to my question. I want to take data in a form in an html page and feed it into a function in an external js script.
Here's the html portion
<html>
<head>
<script LANGUAGE="JavaScript" src="source/main.js"></script>
</head>
<body>
<form NAME="myform" ACTION="" METHOD="GET">
Enter the MegaUpload Code, ex. megaupload.com/?d=glgrn8f1 -> glgrn8f1: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="javascript:codeIn(this.form);">
</form>
</body>
</html>
And in my main.js file is in a subdirectory called source and it contains function codeIn(code){ plus the rest of the functions.
Yet when I enter some test data in my web page and hit submit, I get an error in the chrome dev console saying Uncaught Reference Error: codeIn is not defined
I have a very limited experience with html and javascript, but I cant seem to figure this out, I imagine its something really simple that I'm missing.
EDIT: Here's main.js, and yes, I have checked for typos. Just ask if you need to see the contents of any of these functions, but I didn't think they were neccesary.
function codeIn(code){
...
}
function getInfo(url){
...
}
function waiting(timer){
...
}
Ive looked through all these suggestions and it all seems to point to a syntax error, yet when I try to put all the js functions into the head of the html, it works. So thats what I'm doing. I don't change a single thing when I reference it from source/main.js, but whatever.
From the look of it, I think you then need to double check the location of main.js. Verify whether your HTML file is in a location from where main.js can be accessed as source/main.js, rather than something like ../source/main.js (in case your HTML file is in a folder parallel/sibling to the source folder)
The RefereceError in general related to the scope of function that is present and the function call that is being made. It might the source path of the js, html/xhtml/jsp or function scope with in the js file. Hope this helps. Thanks.

Categories