I'm building up an ajax function that grabs the info needed to send into the database than print it out on the page. Only it grabs the streamid but not the commentcontent. I can see this in firebug under the post parameters. The strange thing is, I've used the same method for my main status updates and just changed the id's so they don't conflict.
Most would say there is no value in the commentcontent..but that would be the users inserted comment, and their is no value on my main status updates..So I'm rubbing my head thinking, where am I going wrong?
FORM
<form id='mycommentform' method='POST' class='form_statusinput'>
<input type='hidden' name='streamid' id='streamid' value='".$streamitem_data['streamitem_id']."'>
<input class='text' name='commentcontent' id='commentcontent' placeholder='Say something' autocomplete='off'>
<input type='submit' id='button' value='Feed'>
</form>
</div>
AJAX
<script>
$(document).ready(function(){
$("form#mycommentform").submit(function(event) {
event.preventDefault();
var streamid = $("#streamid").val();
var commentcontent = $("#commentcontent").val();
$.ajax({
type: "POST",
url: "comment_add.php",
cache: false,
dataType: "json",
data: { streamid: streamid, commentcontent: commentcontent},
success: function(response){
$("#commentcontent").val("");
$("#commentaddid").html("<div class='stream_comment_holder' style='display:none;' id='comment_holder_"+response['streamitem_id']+"'><div id='comment_list_"+response['streamitem_id']+"'></div></div>");
}
});
return false
});
});
</script>
You always need to quote your data, so changing it to: { 'streamid': streamid, 'commentcontent': commentcontent} should probably fix your issue
After some discussion, we found out var commentcontent = $(this).children('#commentcontent ').val(); fixed the issue
Related
For example i have this form that i send to queries.php.
echo "<form method='GET' action='queries.php'>
<label>name1</label>
<input type='checkbox' name='name1'/>
<label>name2</label>
<input type='checkbox' name='name2'/>
<label>name3</label>
<input type='checkbox' name='name3'/>
<input type='submit' name='sendData' value='Send'/>
</form>";
In order to perform an ajax call the url can be queries.php?name1=on&name2=on&name3=on&SendData=Send or with less and variable parameters.
If i have main.js how can i access the url if the parameters i send are variables? For variables i mean that they are not always the same.
$.ajax({
type: "GET",
url: "queries/queries.php?",
dataType: "json",
contentType: "application/json",
}).done(function (data) {
console.log(data);
}).fail(function (response) {
console.log(response);
});
}
Hope i've been clear, thank you. And sorry if the question can be newbie.
I think you're asking how to get the data from the form fields and put it into the URL?
If so, the simplest way is to handle the form's submit event, and then have jQuery serialise the form's data for you, and send it to the server in your AJAX request.
For example:
HTML (note the ID on the form):
<form method='GET' id="someForm" action='queries.php'>
<label>name1</label>
<input type='checkbox' name='name1'/>
<label>name2</label>
<input type='checkbox' name='name2'/>
<label>name3</label>
<input type='checkbox' name='name3'/>
<input type='submit' name='sendData' value='Send'/>
</form>
JavaScript/jQuery:
$(function() { //wait till page has loaded
$("#someForm").submit(function(event) { //add "submit" event handler to the form
event.preventDefault(); //stop normal postback behaviour
$.ajax({
type: "GET",
url: "queries/queries.php?",
data: $(this).serialize() //grab the form data
dataType: "json",
}).done(function (data) {
console.log(data);
}).fail(function (response) {
console.log(response);
});
});
});
serialize() will output a querystring (like you showed in your question) automatically and, for a GET request, append it to the URL - although for a form like this, it's usually preferable to use POST to submit, but that's up to you. Documentation: https://api.jquery.com/serialize/
Use data property of JQuery AJAX.
$.ajax({
type: "GET",
url: "queries/queries.php?",
data: {name1: variable1, name2: variable2, name3: variable3},
dataType: "json",
contentType: "application/json",
}).done(function (data) {
console.log(data);
}).fail(function (response) {
console.log(response);
});
Where variable1, variable2, variable3 are variables and name1, name2, name3 are GET variables.
So in PHP you'll receive them $name1 = $_GET["name1"];
If you have html form and want to submit entire form using AJAX, go for #ADyson's approach as it'll submit entire form and easier to write and cleaner too.
So far, i have done creating report with paging.
sample code index.php:
<div class='web'>
<h1>Data Order Notaris</h1>
<div id="page_data"></div>
<span class="flash"></span>
</div>
and use script:
$(document).ready(function(){
change_page('0');
});
function change_page(page_id){
$(".flash").show();
$(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
var dataString = 'page_id='+ page_id;
$.ajax({
type: "POST",
url: "paging.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$("#page_data").html(result);
}
});
}
my file for show paging is paging.php
my problem when using live search. i am trying add input type in index.php
add input script:
<input type='text' name='search' placeholder='search' />
i think it doesn't need form and submit button.
how to post value from input name='search' to paging.php for filter data report?
is it need more function or using function change_page? i am still confuse with logic. thanks for help
You should give Input in this way:
<input type='text' Id="search_box" name='search' placeholder='search' />
Then using js you can fetch this field's value
So your js code will be as:
$(document).ready(function(){
change_page('0');
});
function change_page(page_id){
//To get the field value
var search_val = $("#search_box").val();
$(".flash").show();
$(".flash").fadeIn(400).html('Loading <img src="ajax-loader.gif" />');
var dataString = 'page_id='+ page_id+'&search='+search_val;
$.ajax({
type: "POST",
url: "paging.php",
data: dataString,
cache: false,
success: function(result){
$(".flash").hide();
$("#page_data").html(result);
}
});
}
Then make the appropriate query in your paging.php :)
<form id='gbookform'>
<input id='inputname' type='text' name='name' autocomplete='off' placeholder='Your name'>
<input id='inputcon' type='text' name='contact' autocomplete='off' placeholder='Your contact or website'>
<div id='forminfo'></div>
<textarea id='inputstory' name='story' rows='9' placeholder='Your story'></textarea>
<div class="g-recaptcha" data-sitekey="6LfobygTAAAAACxBzCl1FxPe4lALE-669wt6NC7G"></div>
<input id='btnsubmit' type='submit' value='SEND'>
</form>
JS
$("#gbookform").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "gbookajax.php",
data: $(this).serialize(),
success: function(data) {
$('#dataload').load('gbookdata.php');
$('#forminfo').text(data).show();
}
})
})
After submitting the form I see my variables written inside url:
http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=
How can I avoid this ?
Just specify the form method :
<form id='gbookform' method='post'>...</form>
Your ajax is not working. the file name in
http://localhost/gbook.php?name=q&contact=q&story=q&g-recaptcha-response=
is different from
url: "gbookajax.php",
so i believe the form is being posted the regular way, and not the ajax.
what you can do is put
$("#btnsubmit").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "gbookajax.php",
data: $(this).serialize(),
success: function(data) {
$('#dataload').load('gbookdata.php');
$('#forminfo').text(data).show();
}
})
})
in a function, like:
function postForm(){
...// the ajax request above
}
and add replace:
<input id='btnsubmit' type='submit' value='SEND'>
with
<button onclick="postForm()">SEND</button>
I am not sure if you want to send form as GET, but suppress the variables that show in your link, or if you want to send a POST request. According to the JS you provided I assumed you want to send a POST request so I think this should work for you.
<form id='gbookform' method="post">
...
</form>
Notice the difference in the first line of code, where method is added.
Default method for form is GET, hence why it was treated as such.
// EDIT
Since you are trying to send a post request, you should also suppress the buttons core functionality to send the request and refresh the page. So to your JS you should probably add this...
$("#gbookform").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "gbookajax.php",
data: $(this).serialize(),
success: function(data) {
$('#dataload').load('gbookdata.php');
$('#forminfo').text(data).show();
}
})
return false;
})
First let me say I'm new to Ajax. I've been reading articles from jquery.com and some tutorials but I didn't figured it out yet how this works on what I'm trying to achieve.
I am trying to get the weather for a searched city using Google's Weather API XML, without page refresh.
I managed to retrieve the Weather XML and parse the data but everytime I search for a different place, the page reloads since my weather widget is under a tab.
This is what I have in my HTML:
<script type="text/javascript">
$(document).ready(function(){
// FOR THE TAB
$('.tab_btn').live('click', function (e) {
$('.tab_content').fadeIn();
});
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
aysnc:false,
success:function(result){
$(".wedata").html(result);
}});
});
});
</script>
<style>.tab_content{display:none;}</style>
</head><body>
<input type="button" value="Show Content" class="tab_btn">
<div class="tab_content">
<h2>Weather</h2>
<form id="searchform" onKeyPress="return submitenter(this,event)" method="get"/>
<input type="search" placeholder="City" name="city">
<input type="hidden" placeholder="Language" name="lang">
<input type="submit" value="search" class="submit" style="width:100px">
</form>
<div id="weather" class="wedata">
</div>
</div>
And here is the actual demo I'm working on: http://downloadlive.org.
Now, if I add action="weather.php" on the search form I get the results, but I get redirected to weather.php which is logical. Without the action="weather.php", everytime I search my index which I'm on, adds up /?city=CITY+NAME which shouldn't. This should be added to weather.php, get the results and then retrieve them back into my index, if that makes sense?
This is my php code for weather.php: http://pastebin.com/aidXCeQg
which can be viewed here: http://downloadlive.org/weather.php
Can someone please help me out with this please?
Thanks alot
You just need to return false; from the click event handler. This will prevent the default action from occuring - in this case, submitting the form. Also, remove the async: false setting. You almost never want synchronous ajax requests.
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
return false;
});
Alternately you can pass a parameter name to the callback and then use event.preventDefault() to accomplish the same result as above:
$(".submit").click(function(e){
$.ajax({
type : 'post',
url:"weather.php",
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
e.preventDefault();
});
You need to send the form data with the POST. It's super-easy to do this using .serialize().
$(".submit").click(function(){
$.ajax({
type : 'post',
url:"weather.php",
data: $(this.form).serialize(),
datatype: "text",
success: function(result){
$(".wedata").html(result);
}
});
return false;
});
Here is my jQuery using delegate and ajax:
$(".tweets").delegate("#fav #submit", "click", function(){
var favid = $("#fav input#favid").val();
var favsave = 'favid=' + favid;
alert(favsave);
$.ajax({
type: "POST",
url: "fav.php",
data: favsave,
success: function() {
$('#fav').fadeOut(100);
}
});
return false;
});
The HTML:
<div class='tweets'>
<ul class='entries'>
<li>
<form id='fav' method='post' class='favo' action=''>
<input style='display: none;' type='text' name='fav' id='fav' value='".$row["tweetid"]."' />
<input type='submit' value='Add to Favorites' name='submit' id='submit' />
</form>"
</li>
</ul>
</div>
There is another set of Ajax on the page that is constantly adding to the .entries list, these records that get appended pickup the click function, so that when I click on them the Alerts are shown but the Ajax part of the function doesnt work.
Any ideas? Would .live be better?
"doesn't work" is not the best of all descriptions.
Anyway, it makes no sense to use "absolute" selectors within an delegated event.
By querying $("#fav input#favid").val(); you would get results from all elements with that id
you would only get the first match (since ids are assumed to be unique) (which would be unfortunate just because of multiple id tags)
You should grab the target property from the event object to identify the elements which should get involved.
Example:
$(".tweets").delegate("#submit", "click", function(event){
var $self = $(event.target);
var favid = $self.siblings('#fav');
var favsave = 'favid=' + favid;
$.ajax({
type: "POST",
url: "fav.php",
data: favsave,
success: function() {
$self.closests('#fav').fadeOut(100);
}
});
return false;
});
It's probably not a good idea to have IDs for elements which are created dynamically.
As mentioned, it's no valid HTML markup to have multiple ID tags. Should be classes I guess.