I've searched on internet but I just can't seem to figure this out.
I got this Jquery function which I want to call in my php/html page. I'm an absolute noob when it comes to Jquery.
!function( $ ){
var Keyboard = function ( element, options ) {
this.$element = $(element)
this.options = options
if (this.options.display) {
this.$keyboard = $('<div class="keyboard"><input type="text" class="input-keyboard"></div>').appendTo('body')
} else {
this.$keyboard = $('<div class="keyboard"></div>').appendTo('body')
}
this.$biginput = this.$keyboard.find('.input-keyboard')
this.wait_timer = null
this.init()
this.listen()
}
}
How can I call this function in a div or button?
<body>
<button id="testKeyboard">Test open keyboard</button>
</body>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
Without knowing this plugin, i would say something like this:
$(document).ready(function(){
$("div, button").keyboard();
});
with ID:
$(document).ready(function(){
$("#button_id").keyboard();
});
your php/html file, needs also the jQuery Library in the head part...
For example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
maybe an other version. It should be before the plugin script...
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
</head>
<body>
<button id="testKeyboard">Test open keyboard</button>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
</body>
Call like this from your php file,
<script type = "text/javascript">
$(window).keyboard();
</script>
Check now on JSfiddle, included Jquery plugin and added that in head section from the option.
You can see the console.log firing.
http://jsfiddle.net/7ttq2gf0/2/
Related
It seems that this question has already been asked many times but none of the solution is working for me. I'm new to AJAX so maybe there are some basics that I've missed? Basically I just want to pass the content of an html paragraph to a PHP script and I don't want to use html form.
I have two files: tes.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
and tes.php
<?php
if (isset($_POST['text'])) {
$content = $_POST['text'];
echo $content;
} else {
echo "no content";
}
?>
After I clicked the Post button, in the PHP file it returns
Notice: Undefined index: text in C:\xampp\htdocs\projects\lab\tes.php on line 3.
Where did it go wrong? Really need your help guys. Thanks!
can you try this
$(document).ready(function(){
$("#post").click(function(){
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent},
dataType:"html",
success:function(data) {
console.log(data)
}
});
});
});
and in the HTML (as reza suggested)
<button id="post">post 2</button>
then, open the developer console and see if you can see the response from the tes.php
change html
<button id="post2">post 2</button>
to
<button id="post">post 2</button>
You have a click event and that sends an AJAX request so far, so good. You have
target="_blank"
which makes sure the page is opened in another tab/window. As far as I understood, you only want to send the request, so you need to prevent default:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(e){
e.preventDefault();
var getContent = $("#text").html();
$.ajax({
url:"tes.php",
type:"POST",
data:{text:getContent}
});
});
});
</script>
</head>
<body>
<p id="text" contenteditable="true">This is the content</p>
<button id="post">post 2</button>
</body>
</html>
The new tab/window will give you the error, since an expected parameter is not there, so don't open it.
I´m trying to get typed text on ckeditor (textarea), but I have some trouble:
Here is my code:
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#editor').ckeditor();
var editor = $('#editor').ckeditorGet();
var data = $('#editor').val();
window.alert(data);
window.alert(CKEDITOR.instances['editor'].getData());
});
</script>
<body>
<form method="post">
<textarea name="editor" id="editor"></textarea>
<input type="submit" value="Submit">
</form>
The results on two alerts are empty. What i´m doing wrong?
That's because you are calling the alerts when the page loads. At that time, there is nothing yet on the textarea.
Bind the event to something that will happen after the textbox has something to show, for example, when you click the submit button:
$(document).ready(function(){
$('#editor').ckeditor();
$('input[type=submit]').on('click', function() {
window.alert($('#editor').val());
});
});
Also, you may want to bind the click event to the document instead, so it will happen even if you add new submits programatically. For that to happen, bind the event like this:
$(document).on('click', 'input[type=submit]', function() {
window.alert($('#editor').val());
});
Ok, I have this code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function get() {
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
}
</script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" href="javascript: get()">haller</a>
<div id="age">See your name</div>
</body>
</html>
Here's what I want: get the id of an anchor tag from the anchor tag that has been clicked by the user via jQuery and then past that to a PHP file. The PHP file will then echo the id name of the anchor tag that was clicked by the user back to the jQuery which will then display the output into the specified element.
Here's the PHP file:
<?
$name=$_POST['name'];
if ($name==NULL)
{
echo "No text";
}
else
{
echo $name;
}
?>
Bind your event like this, since you are using jQuery
$('a').click(function(){
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
});
And remove the javascript from the href
<a id="grabe" href="#">haller</a>
<a id="kane" href="#">haller 2</a>
$('#grabe').click(function() {
$('#age').load('yourphp.php', {'name':$(this).prop('id')});
});
You can use $(this) to access almost anything about "what brought you here" in the code. You'll also need a listener for the event. In this way too brief example below, I have it listening for any clicks to <span class="edit_area"> spans.
<script>
$(document).ready(function(){
$('span.edit_area').click( function(){
var fieldname = $(this).attr('id');
...
});
});
I dont know why you want to send an id to a server and then receive that id back again from the ajax call as it is already there in your client script. Anyway this is the code.
This code will does this functionalirty for all a tag with a class called"crazyLink" and show the data received from the server page in a div with id anotherCrazyDiv
HTML
<a class="crazyLink" href="#">I am crazy</a>
<a class="crazyLink" href="#">I am crazy2</a>
<div id="anotherCrazyDiv"></div>
Script
$(function(){
$(".crazyLink").click(function(){
var id=$(this).attr("id");
$.post("data.php", { name : id } ,function(data){
$("#anotherCrazyDiv").html(data);
});
return false; // to prevent normal navigation if there is a valid href value
});
});
Keep in mind that, in your scenario, the value in id variable and value in data variable (after getting response from ajax call ) are same.
you may want to separate your javascript from your html. it makes things easier. it should probably look something like this.
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="javascript/somescript.js"></script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" class="someclass">haller</a>
<div id="age">See your name</div>
</body>
</html>
javascript
$(document).ready(function() {
$('.someclass').click(function() {
$('#age').load(
url: 'tt.php',
data: { name: $(this).attr('id')}
);
});
});
In a php page I have placed a submit button,
HTML:
<input type="submit" name="btnAdd" id="btnAdd" Value="Add">
I need to hide this button (using jQuery) when link is cliked,
Link:
echo ' Edit ';
Javascript:
<script type="text/javascript">
$(document).ready(function() {
function MyFunction(){
$('btnAdd').hide();
});
</script>
But this code does not hide the button as expected. How can I fix this?
You have a wrong selector. You need to use #btnAdd for an id selector:
<script type="text/javascript">
function MyFunction() {
$('#btnAdd').hide();
}
</script>
Also you should put the MyFunction function outside of the document.ready callback to avoid making it privately scoped.
Another possibility is to do this unobtrusively:
echo ' Edit ';
which seems easier to be written as:
Edit
and then subscribe for the .click() event of the edit link:
<script type="text/javascript">
$(function() {
$('#edit').click(function() {
$('#btnAdd').hide();
});
});
</script>
I am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>