It's a chat application code in notepad++. My enter key is not working as it gives a new line always. I tried to find the problem but couldn't rectify it,
It will be of great help if someone can spot and rectify the problem?
?
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link href="../Style/Style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="..Js/jquery.js"></script>
<title>Chat Application Home</title>
<script type="text/javascript">
$(document).ready(function(){
$("#ChatText").keyup(function(e){
//When We Press Enter Do
if(e.keyCode ==13){
var ChatText = $("#ChatText").val();
$.ajax({
type:'POST',
url:'InsertMessage.php',
data:{ChatText:ChatText},
success:function(){
$("#ChatText").val("");
}
});
}
});
});
</script>
</head>
<body>
<h2>Welcome <span style="color:green"><?php echo $_SESSION['UserName'];?></span></h2>
</br></br>
<div id="ChatBig">
<div id="ChatMesseges">
</div>
<textarea id="ChatText" name="ChatText"></textarea>
</div>
</body>
</html>
You have to cancel the default behaviour of the enter keypress event. Add this to your code:
$("#ChatText").keypress(function(e) {
if(e.keyCode ==13){
return false;
}
}
Note that this is a different event; leave the keyup handling as-is, or alternatively, change your code to respond to the keypress event instead of the keyup event, and add the return false; there. Both ways are fine.
You should prevent the default behaviour on key press. Use e.preventDefault() or return to do that, then run your code.
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 working on a page with some JQuery and Kendo UI. This is my first JQuery project and I getting things along. However, my page refreshes for some reason. This is what I am trying to do: I have a text field where I can enter a search term and when I press a button, the query is sent to a php file and some json info will pop up. So far, I can get it to return something, but the page refreshs and all the data is gone.
code:
*<!DOCTYPE html>
<html>
<head>
<title>Search</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<div id="example">
<form id="search">
<label for="search">Search For:</label>
<input type="text" id="txtSearch" name="q">
<button type="submit" id="submit">Find</button>
</form>
<div id="grid">
</div>
</div>
<script>
$(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "include/showsearch.php"
},
schema: {
data: "data"
}
},
columns: [{field: "id"},{field: "name"},{field: "season"}]
});
$("#submit").click(function(){
var textVal = $("#txtSearch").val();
var dynamicURL = "include/showsearch.php?show_name=" + textVal;
var grid = $("#grid").data("kendoGrid");
alert("sdf123");
grid.dataSource.transport.options.read.url = dynamicURL;
grid.dataSource.read();
alert("sdf");
});
});
</script>
</body>
</html>*
NOTE:
I used the alert functions to stop and see how the page reacts. How do I get the page from refreshing?
The reason this is happening is that the default action for your submit button is still occurring; submitting the form.
It's probably best to catch the form submission event rather than the button click as hitting Enter in a text field may also submit the form.
You will also need to prevent the default event action.
Change this
$("#submit").click(function(){
to this
$('#search').on('submit', function(e) {
e.preventDefault();
// and the rest of your code here
I want to begin by saying I am extremely new to Jquery / client side scripting. I was kinda blind sided when my bosses wanted some way for customers to acknowledge form submission.
This is my jquery / header :
<head>
<title>Access Point</title>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<link rel="stylesheet" href="<?php echo base_url();?>css/mainstyle.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url();?>css/secondarystyles.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$("#signinform").submit( function(e)
{
if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait."))
{
e.preventDefault();
return;
}
});
</script>
</head>
And this is my form :
<?php echo form_open('staff_controller/agree', 'id="signinform"') ?>
<input type="checkbox" id="agree" name="options" value="agree"<?php echo form_checkbox('options','agree') ?>I have read and understood the above <br /> <font color="#ff0000" size="3">(Please click on the box)</font></input>
<br />
<br />
<br />
<?php
echo form_submit('submit', 'Submit');
echo anchor('staff_controller/studentlogin', 'Cancel');
echo form_close();
?>
My php script checks if the checkbox is checked (to agree to our requirements) and also checks if submit is clicked. If it is clicked then submit the values into a database. To my understand I can continue to use this style to handle my data I just want jquery in the middle to allow users to know they are submitting. I found this code out in the internet and I have no idea how to debug this. I also do plan to a jquery confirm to check if you want to "Cancel" form submission
Edit 1 :
looking at source code it "should" work :
form
action="https://www.finaidtest.com/index.php/staff_controller/agree"
id="signinform" method="post" accept-charset="utf-8"
and then my updated confirmation :
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
$(document).on('submit', "#signinform", function(e)
{
if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait"))
{
e.preventDefault();
return;
}
});
</script>
Edit 2
Thanks to Musa it all works fine now! Thanks!!
Code :
<script src="<?php echo base_url();?>javascript/js/jquery.js" type="text/javascript"></script>
<script>
$(document).on('submit', "#signinform", function(e)
{
if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait"))
{
e.preventDefault();
return;
}
});
</script>
You have to wait for the element to be created before you can bind an event handler to it. Use $(document).ready to ensure your element is created before you set the handler.
$(document).ready(function(){
$("#signinform").submit( function(e)
{
if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait."))
{
e.preventDefault();
return;
}
});
});
You could also use delegation to attach the event so you don't have to wait for the dom to be loaded
$(document).on('submit', "#signinform", function(e){
if (!confirm("If you click OK you will be inserted into student queue. Please take a seat and wait."))
{
e.preventDefault();
return;
}
});
Just to give some context I'm a self taught programmer with no formal education or experience so apologise for my code in advance...
Code below attempts to turn a site designed for an iphone into a single page site (i.e. using ajax). I'm having an issue with multiple form submissions... looks like this is occurring when clicking the submit button on form #id2.
I've done some research and was thinking of implementing the below jquery solution for preventing multiple form submissions:
How to prevent form from submitting multiple times from client side?
and this php solution for preventing multiple form submissionson the server side:
http://www.ideologics.co.uk/programming/how-to-prevent-multiple-form-submissions-in-php
Also some sites suggest that the ajax post code should set async to false and cache to false but I'm not entirely sure of the reason and whether this is applicable in my case.
The reason I had to use the delegate function is because clicking submit on form #id1 loads a form with id#2... I tried using the on function which jquery site says supersedes the delegate function but this didn't seem to work. I'm loading version 1.8.2 using google CDN.
var startUrl = 'menu.php';
$(document).ready(function(){
loadPage(startUrl);
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
if (url == startUrl) {
var element = ' #header ul';
} else {
var element = ' #content';
}
$('#container').load(url + element, function(){
var title = $('h2').html() || 'Menu';
$('h1').html(title);
$('h2').remove();
$('.leftButton').remove();
if (url != startUrl) {
$('#header').append('<div class="leftButton">Menu</div>');
$('#header .leftButton').click(function(e){
$(e.target).addClass('clicked');
loadPage(startUrl);
});
}
$("#container").delegate("a", "click", function(e){
var url = e.target.href;
if (url.match(/example.com/)) {
e.preventDefault();
loadPage(url);
}
});
$("#container").delegate("form", "submit", function(event){
event.preventDefault();
});
$('#id1').submit(function(){
var formData = $(this).serialize();
$.post('processform1.php',formData,processResults);
function processResults(data) {
$('#id1').remove();
$('#container').html(data);
}
});
$("#container").delegate("#id2", "submit", function(event){
var formData = $(this).serialize();
$.post('processform3.php',formData,processResults);
function processResults(data) {
$('#id2').remove();
$('#container').html(data);
}
event.preventDefault();
});
$('#progress').remove();
});
}
Below is the index page:
<html>
<head>
<title>Title</title>
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
<link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
<link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="iphone.js"></script>
</head>
<body>
<div id="header">
<h1>Menu</h1>
</div>
<div id="container"></div>
</body>
</html>
Just place this in your JS for the page the submit button is on
<script type="text/javascript">
$(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
$("input[type='submit']").attr("disabled", true).val("Please wait...");
return true;
})
})
</script>
You may need to use an on() event handler or do other tinkering depending on if the form is generated on page load.
I am new in jQuery and need help to figure out why $.get does not reply.
Let me explain what I have: There is a main index.php as follows:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> </head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/reqhan.js"> </script>
<input id="string" type="text" />
<input id="button" type= "button" value="Go" />
<div id="div"></div>
</body>
</html>
the js/reqhan.js contains
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){alert('2');});
$('#div').text(data);
alert('3');
});
});
and reverse.php contains a simple code (I pasted here but does not preview it) that gets the text from reqhan.js file and returns an echo message.
when running the code on Google Chrome, the first alert is shown but not the rest and of course the `$('#div').text(data);' doesn't send back the data to the js file.
Please let me know if further info is required.
many thanks.
You're closing your callback function before you do anything with the data
Try this instead:
$(document).ready(function(e) {
alert('1');
$('#button').click(function() {
$.get('php/reverse.php',{input: string},function(data){
alert('2');
$('#div').text(data);
alert('3');
});
});
});
Try to format your code so that each pair of brackets gets its own indentation. It should help catch small things like this.