I've found following javascript library for client-side validation:
http://livevalidation.com/
The examples on the website are very clear, but I just can't get them to work...
Even when creating a very basic html-only website like this:
<html>
<head>
<link rel="scrip" type="text/javascript" href="scripts/LiveValidation-1.3.js" title="LiveValidation"/>
</head>
Enter the field then click somewhere else:
<input type="text" id="f1"/>
<script type="text/javascript">
var f1 = new LiveValidation('f1');
f1.add(Validate.Presence);
</script>
</html>
This code comes directly from the examples provided on the website, however it doesn't do anything, the reference to the .js file is correct... What am I overlooking here? Thanks.
You need to use a script tag to reference the javascript file not the link tag.
<html>
<head>
<script type="text/javascript" src="scripts/LiveValidation-1.3.js"></script>
</head>
Related
I have created a website, I want to add 3 languages(Taiwan, China, English) for this website - multilingual website.
I've tried to find Google Language API tutorial, but I really very understand their guideline and don't know how to use it. Do yours have some simple coding example can introduce for me to refer to add multilingual in the website? Thanks.
Please Refer Following url:
It's example of google language to add in site
https://www.geeksforgeeks.org/add-google-translate-button-webpage/
Please use below code to translate with google :
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
Adding Google Translate API is very simple to implement. You can add Google translate script by following these steps.
Step 1: Set up CDN Path for Google API.
Step 2: Set up a div element to place Translator.
Step 3. Set up Default Language for the Webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Google Translater for Website </title>
</head>
<body>
<h2>Your Web Page</h2>
<p>Click on the dropdown button to translate.</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
Copy this code and run it on any Editor.
Source: https://www.coderepublics.com/howto/how-to-google-translate.php
I'm working with PHP Fat Free and I am attempting to create a layout/sublayout system which will eventually mimic MVC to some extent. I have a main layout which has placeholders (essentially the backend sets different sublayout or partial file paths and then the view takes care of calling the rendering of that file name. This all works great.
The issue I'm running into is when I need inline javascript in my sublayout to run after scripts in the main layout (after the jquery include line, for instance). In a previous framework I was using, I was able to do us output buffering ob_start and ob_get_clean to grab the script in the sublayout and then pass that to the layout to display below the script line. I hope that makes sense, but if not, here's the current code I'm working with in F3.
The route:
$f3->route('GET /test',
function($f3) {
// set the sublayout name
$f3->set('sublayout', 'testpage.php');
// render the whole shebang
echo View::instance()->render('testlayout.php');
}
);
The layout:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
The sublayout:
<h2>My Test Page</h2>
<div id='message'></div>
<script>
// This code needs to be placed AFTER the jquery include in the main layout
$(function(){
$('#message').html('This is my message');
});
</script>
I tried extending the view to include a "beginRegion" and endRegion function that basically handled the ob_start and ob_get_clean portion so that my inline script could be picked up, but once I'm in the sublayout I wasn't able to figure out how to pass that buffered code back to the layout so it could be echo'd after the jquery include.
Before you tell me that I should not be using inline script, I know this and most things I do are in external script files which I have a solution for including, but there are times when I need it inline and that's where I'm stuck.
Is there a way to handle what I'm trying to do with output buffering, or better yet is there a better way to solve this than the output buffering approach?
Update:
Best practices generally dictate that you should include the script at the bottom of the page right before the closing body tag. If I put the script above the sublayout, it breaks both our FE best practices and has the disadvantage of blocking the rest of the page while the script downloads. That's why I'd like to keep it structured the way I have noted instead of placing the jquery include ABOVE the sublayout.
I don't understand what's the problem.
Your layout is:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<?php echo View::instance()->render($sublayout) ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
</body>
</html>
You want to include sublayout after jquery usage. So why not to write it like this? :
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
<?php echo View::instance()->render($sublayout) ?>
</body>
</html>
Also You can write custom function. Lets say You've folder with partials or something else more structured and want to use it:
$f3->set('partial',
function($file) {
$file .= (strpos($file, '.php')>0)? '' : '.php';
if(!is_file($file)) return '';
return View::instance()->render($file);
}
);
and then use it like:
<!DOCTYPE html>
<html>
<head>
<title>Test Layout</title>
</head>
<body>
<h1>Test Layout</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" />
<!-- inline script should go here -->
{{ #partial('partials/testpage') }}
</body>
</html>
I knew why You want to do so. But what's the problem to decouple scripts in scripts.php file and HTML,php part to another file and render them as needed? (:
From a google groups discussion I had, someone offered up a JS solution that might work:
inside your layout:
<head>
<script>
var callbacks=[];
</script>
</head>
<body>
<script src="...jquery.min.js"/>
<script>
$.each(callbacks,function(i,func){func.call(null,jQuery);}) //<< triggers all queued callbacks
</script>
</body>
inside your sublayout:
<h2>My Test Page</h2>
<div id="message"></div>
<script>
callbacks.push(function($){
//do something with jQuery
});
</script>
Here's the link:
https://groups.google.com/forum/#!topic/f3-framework/iGcDuDueN8c
Maybe someone already had the problem like mine - I want to use the Simple init DateTimePicker from this example . I created a simple php page:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
</head>
<body>
<input id="datetimepicker" type="text" >
</body>
</html>
I also put the jquery.datetimepicker.js and jquery.js in the js folder, same with css, however after refreshing the page - all I see is the empty input field and the datepicker doesn't show up. What am I doing wrong?
Use document.ready function and make sure js are included correctly
<script>
jQuery(document).ready(function(){
jQuery('#datetimepicker').datetimepicker();
});
</script>
I use jQuery mobile to make a mobile form and then submit it.
On the main page I import the jQuery libraries.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Waiter Menu</title>
<link rel="stylesheet" href="js1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="js1.0/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js1.0/jquery.mobile-1.0.min.js"></script>
</head>
When submit the form from the first page and linked to the second, the libraries have pre-import and I don't want that.
Because at the second page I want to use custom JavaScript.
Is there any way not to stop jQuery at linked file?
Thanks in advance!!
---edit----
I found the solution here: How To Disable Ajax In jQuery Mobile Before Page Load?
i put this into form header
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
and I set new header at second file!
I'm trying to integrate LinkedIn the login feature onto my site, but the button does not show. The code is:
<head><script type="text/javascript" src="http://platform.linkedin.com/in.js">
<body>
<script type="IN/Login" data-onAuth="onLinkedInAuth"></script>
</script>
</body>
</head>
I have made this jsfiddle it it helps as well.
I'm fairly wet behind the ears in programming so I'm sure its something simple I'm missing when it comes to understanding the api as a whole. A little help would be more than enough.
The html you've provided is all messed up - body should NOT be above head!. Check this or this out to learn the basics.
To get the login page follow instructions linkedin developer page.
First, you need to get an API key.
Than, build the HTML something like this:
<html>
<head>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: YOUR_API_KEY_GOES_HERE
authorize: true
</script>
<script type="text/javascript">
function onLinkedInAuth() {
IN.API.Profile("me")
.result( function(me) {
var id = me.values[0].id;
// AJAX call to pass back id to your server
});
}
</script>
</head>
<body>
<script type="IN/Login" data-onAuth="onLinkedInAuth"></script>
</body>
</html>
Well you have a problem of order with your tags. You can't put a body tag in the head. Try perhaps this:
<head>
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script>
</head>
<body>
<script type="IN/Login" data-onAuth="onLinkedInAuth"></script>
</body>
But I'm not sure if your second script is correctly done, as I don't know how the LinkedIn Api works.
<head>
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
api_key: YOUR_API_KEY
</script>
</head>
<body>
<script type="IN/Login">
Hello, <?js= firstName ?> <?js= lastName ?>.
</script>
</body>