i'm dealing with this ajax call:
HTML:
A form has a textarea in which user can type some text
<div id="step-3">
<h2 class="StepTitle">Testo</h2>
<form id="text" class="form-horizontal form-label-left">
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Textarea <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<textarea id="textarea" name="testo" data-parsley-required="true" class="form-control col-md-7 col-xs-12"></textarea>
</div>
</div>
</form>
<ul id="error3_ul" class="list-unstyled">
<li id="error3_li"></li>
</ul>
</div>
JS:
This function is called by smartwizard. When user types some text and pushes button, an ajax call starts to do a server side check before to effectively insert text into db.
function onFinishCallback()
{
var data = $('#textarea').val();
$.ajax({
method: 'post',
data: data,
dataType: 'html',
url: "include/library/pull_sim.php",
success: function(result) {
successmessage = 'Data was succesfully captured';
$("#error3_li").text(result);
},
});
}
PHP:
Php receives the posted textarea value, check if a similar_text is already into db and if yes, it alerts that to user by the ajax call result.
if((!ISSET($_POST['testo'])))
$val='';
else
$val=$_POST['testo'];
$q_sim='select nciarfata from nciarf.nciarfata';
$s_sim=mysqli_query($conn,$q_sim);
$n_sim=mysqli_num_rows($s_sim);
if ($n_sim>0)
{
$simil=array();
for ($i=0;$i<$n_sim;$i++)
{
$rou=mysqli_fetch_row($s_sim);
similar_text($val, $rou[0], $percent);
if ($percent>=95.0)
{
array_push($simil,$rou[0]);
}
}
echo"val=$val, rou[0]=$rou[0], percent=$percent";
}
Question:
In my opinion something goes wrong in server side, probably in the 1st if.
Php doesnt recognized the posted value and then assign val="" instead of real text typed by user before..
Why?
Thanks for helping me.
I find the solution here:
Can't figure out why PHP not receiving POST data from $.ajax call
It wasn't a textarea issue but an ajax jquery one (data option).
Related
I need to reload a table or div inside a model popup continuously, i failed with my code can you help me....
i tried with ajax ..code is below but its is not updating chats (i am doing a chat task)
**My Ajax code to check new message is or not**
function check_msg()
{
$.ajax({
type: "POST",
url: "<?php echo site_url('member/check_message')?>/",
datatype: "JSON",
success: function(data) {
data = JSON.parse(data);
if(data.MsgStatus == "1")
{
$('#newchat').ajax.reload();
} });}
**HTML**
<div class="modal-body form">
<form action="#" id="chatform" class="form-horizontal">
<input type="hidden" value="" name="UserId"/>
<div class="form-body">
<div class="container" id="container">
<table id="newchat">
<div class="Scroll" id="Scroll">
<div id="messagesout"></div>
</div> </table> </div</div>
function reload_table()
{
table.ajax.reload();
}
Use this code in your ajax and call it
I have a statistical panel which displays the last registered users. I want to implement a AJAX call to upload the panel without having to reload the full page.
I have the following code in my view:
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
<div class="mt-comment">
<div class="mt-comment-img">
<g:if test="${user?.avatar}">
<img src="${createLink(controller:'controllerUser',
action:'image', id: user?.id)}" />
</g:if>
<g:else>
<img class="img-circle"
src="${resource(dir: 'img/profile', file: 'user_profile.png')}"/>
</g:else>
</div>
<div class="mt-comment-body">
<div class="mt-comment-info">
<span class="mt-comment-author">${user?.username}</span>
<span class="mt-comment-date">
<g:formatDate date="${user?.dateCreated}"/>
</span>
</div>
<div class="mt-comment-text">${user?.email}</div>
<div class="mt-comment-details">
<g:if test="${user?.enabled}">
<span class="mt-comment-status label label-sm label-success circle">
</g:if>
<g:else>
<span class="mt-comment-status label label-sm label-info circle">
</g:else>
<g:formatBoolean boolean="${user?.enabled}"/>
</span>
<ul class="mt-comment-actions">
<li>
<g:link controller="user" action="edit" id="${user?.id}">Edit</g:link>
</li>
</ul>
</div>
</div>
</div>
</div>
</g:each>
Also, I have a button when it is clicked calls the AJAX function. The Ajax function receives the data successful in JSON format. From there, I don't know upload my g:each tag.
I have tried the remoteFunction of Grails to use the upload attribute, but an error appears: No javascript provider is configured and I have searched the solution but anything works me.
The AJAX call:
$('.button').click(function() {
$.ajax({
url: URL,
success: function(data) {
console.log(data[index]);
console.log(val.username);
console.log(val.dateCreated);
console.log(val.email);
console.log(val.enabled);
console.log(val.avatar);
console.log(val.id);
},
error: function(){
},
});
Thanks for helping me.
Instead of Using JSON Data, You can do this using grails templates and jQuery load method. Here is a quick POC.
Template (_userComments.gsp)
This will act as a reusable view which can be called via AJAX or can be included directly in other views.
<g:each in="${lastUsers}" var="user">
<div class="mt-comments">
.....
</div>
</g:each>
View (main.gsp)
Our Main View.
<div class="userComments">
<!-- When the Page is Loaded, We need render this without an Ajax Call -->
<g:render template="userComments" model="['lastUsers':lastUsers]"/>
</div>
Javascript
$('.button').click(function() {
$( ".userComments" ).load( "user/userComments" );
});
Controller
We are defining two methods one for the main view and one for the ajax call.
def index() {
def lastUsers = User.list();
render(view:'main', model: [lastUsers: lastUsers])
}
// Ajax Call
def userComments() {
def lastUsers = User.list(); // what ever your fetch logic is
render(template:'userComments', model: [lastUsers: lastUsers])
}
I have a kendo mobile form that I will be using to capture some information from my users.
I would like to post the data to a web service or aspx(test page) using ajax. It seems like overkill to use MVVM for a form that the user fills out and there will be no reads/updates/deletes.
The ajax call happens but I cannot figure out how to post the data . Nothing goes over if i use $(this).serialize(). If I hard code some data, then it works.
There are going to be a lot of controls on the page and i hope i don't have to manually build the form data. I cannot add a <form> tag as it breaks the styling of the page.
If there is a more "kendo" way of doing this please show me how. Thanks
Here is what I have so far.
//Submit Form
function submit_form(e) {
$.post('TestPost.aspx', $(this).serialize(), function (data) {
// This is executed when the call to web service was succesful.
// 'data' contains the response from the request
alert(data);
}).error(function (xhr, ajaxOptions, thrownError, request, error) {
alert('xrs.status = ' + xhr.status + '\n' +
'thrown error = ' + thrownError + '\n' +
'xhr.statusText = ' + xhr.statusText + '\n' +
'request = ' + request + '\n' +
'error = ' + error);
});
e.preventDefault();
}
//Example of html controls
<div id="checks" data-role="view" data-title="Foo" data-layout="checklayout">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Floor
<ul>
<li>
<label for="Foo">
<input type="radio" name="Foo" id="FooOk" value="Ok" />
Ok</label>
</li>
<li>
<label for="Foo2">
<input type="radio" name="Foo" id="FooNotOk" value="NotOk" />
Not Ok</label>
</li>
<li id="Comment1" class="divComment" style="display: none;">
<label>
Comments
<input type="text" name="TextComment" id="TextComment" placeholder="Type Comments" autocomplete="off" tabindex="1" />
</label>
</li>
<li id="C1" class="divComment" style="display: none;">
<label>
Charges
<select id="Charges" name="Charges" >
<option value="nc">test</option>
</select>
</label>
</li>
</ul>
</li>
</ul>
<ul data-role="listview" data-style="inset" data-type="group">
<li>Picture
<ul>
<li>
<label>
Select a Photo
<input type="file" id="kitFile" style="display: none;" />
<a data-role="button" data-click="select" style="float: right;">Select</a>
</label>
</li>
</ul>
</li>
</ul>
</div>
//Submit button
<a data-align="right" data-role="button" class="nav-button" data-click="submit_form">Save</a>
Here $(this) will give u only the button element. The easy way to do this is use the built in MVVM feature in Kendo UI Mobile. create an model as JS object and set data-model attribute of your view as this object. Now on click of the submit button, just send this object to your server using ajax. This way u are reducing the amount of data sent to the server.
Documentation on mobile and mVVM integration: http://docs.kendoui.com/getting-started/mobile/mvvm .
I have used a PageMethod previously.
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
Would something like this help your cause?
Let's take an example of such a method in the code behind:
[WebMethod]
public static string MyMethod(string Id)
{
return string.Format("Thanks for calling me with id: " + Id);
}
Things to note: the method must be static and decorated with the [WebMethod] attribute.
And on the client side you could invoke this method using the jQuery.ajax() function like this:
$.ajax({
url: 'default.aspx/MyMethod',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ ID : ID }),
success: function (result) {
alert(result.d);
}
});
Make sure that in your WebForm you have actually added reference to the jQuery library before using it.
For example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
I am trying to make a form submit through ajax and the JsHelper from CakePHP 1.3
I try to make a call to /eng/feedbacks/submit_feedback but instead in the console, i see a post to http://lang/eng/pa/homepage instead. The result returned is another instance of that page, rather than anything else.
This seems to be irrelevant to whether such submit_feedback exists or not. I have started that action with die("test"); and it doesn't change anything.
why is that, what is going on?
the form is in my layout (as i want it to be in my footer). Runs when the url is /eng/pa/homepage
Form code:
echo $this->Form->create('Feedback', array('url'=>array( 'controller'=>'feedbacks', 'action'=>'submit_feedback')));
echo $this->Form->input('Feedback.content', array('label'=>false, 'type'=>'textarea'));
echo $this->Js->submit('Save', array('class'=>'button blue',
'before'=>$this->Js->get('#sending')->effect('fadeIn'),
'success'=>$this->Js->Get('#sending')->effect('fadeOut'),
'update'=>'#success'
));
echo $this->Form->end();?>
<div id="success">xx</div>
In that #success DIV i get a related full page, rather than what I have defined in the controller action
Controller method:
function submit_feedback(){
if(!empty($this->data)){
$this->Feedback->set($this->data);
if($this->Feedback->validates()){
if($this->Feedback->save($this->data)){
// AJAX
if($this->RequestHandler->isAjax()){
$this->render('/feedbacks/success', 'ajax');
}else{
die('not ajax');
}
}
}
}
}
And the success template is:
<p style="background: lightgreen">Purple cow!</p>
What am i doing wrong?
NOTE: If I run the same form from the /eng/feedbacks/submit_feedback page, It works exactly as it should through ajax, and my database gets updated, i get the necessary 'success' template loaded and all is shiny and happy.
UPDATE: FORM SOURCE COUDE GENERATED:
<form accept-charset="utf-8" action="/eng/feedbacks/submit_feedback" method="post" id="FeedbackReadForm">
<div style="display: none;">
<input type="hidden" value="POST" name="_method">
</div>
<input type="hidden" id="FeedbackUserId" value="141" name="data[Feedback][user_id]">
<div class="input radio">
<input type="hidden" value="" id="FeedbackType_" name="data[Feedback][type]">
<input type="radio" value="suggestion" id="FeedbackTypeSuggestion" name="data[Feedback][type]">
<label for="FeedbackTypeSuggestion">Suggestion</label>
<input type="radio" value="problem" id="FeedbackTypeProblem" name="data[Feedback][type]">
<label for="FeedbackTypeProblem">Poblem</label>
<input type="radio" value="opinion" id="FeedbackTypeOpinion" name="data[Feedback][type]">
<label for="FeedbackTypeOpinion">Other Opinion</label>
</div>
<div class="input textarea">
<textarea id="FeedbackContent" rows="6" cols="30" name="data[Feedback][content]"></textarea>
</div>
<div style="margin-top: 17px; margin-right: 50px;" class="right">
<a onclick="javascript: closeFeedbackPuller(); return false;" href="#">Cancel</a>
</div>
<div class="submit">
<input type="submit" value="Save" id="submit-396027771" class="button blue">
</div>
</form>
UPDATE 2: JS generated:
$(document).ready(function () {
$("#submit-396027771").bind("click", function (event) {
$.ajax({
beforeSend:function (XMLHttpRequest) {
$("#sending").fadeIn();
},
data:$("#submit-396027771").closest("form").serialize(),
dataType:"html",
success:function (data, textStatus) {
$("#sending").fadeOut();
$("#success").html(data);
},
type:"post",
url:"\/eng\/pa\/homepage"
});
return false;
});
});
I see that the url is wrong, even thought the form url was right. How can this be resolved?
echo $this->Js->submit('Save', array('class'=>'button blue',
'before'=>$this->Js->get('#sending')->effect('fadeIn'),
'success'=>$this->Js->Get('#sending')->effect('fadeOut'),
'url' => '/eng/feedbacks/submit_feedback',
'update'=>'#success'
));
That may fix your problem, but I am not 100% sure. It seems that the Js->submit() method accepts a lot of the Form helper methods.
Hi all I have a problem with anchors and dynamic content loaded thought $.ajax().
Let suppose this is my jQuery code:
$("a.false").live("click", function() {
var data = $(this).attr("href");
$("div#text").hide("fast");
$("div#loader").show("fast");
$.ajax({
type: "GET",
url: "callback.php",
data: data,
dataType: "html",
cache: false,
success: function(result){
$("div#loader").hide("fast");
$("input#data").val(data);
$("div#text").html(result);
$("div#text").show("fast");
}
});
});
I think everybody knows what means this code and I'll no explain it.
callback.php answer is:
<div class="name">
<div class="replic_id">
<input type="hidden" id="replica_1" name="replica_1" value="1" />
<a id="rp1">#1</a>
</div>
<div class="names">Name 1</div>
<div class="replicas">Replica 1</div>
</div>
<div class="name">
<div class="replic_id">
<input type="hidden" id="replica_2" name="replica_2" value="2" />
<a id="rp2">#2</a>
</div>
<div class="names">Name 2</div>
<div class="replicas">Replica 2</div>
</div>
And now I javascript variable "data" value is = "movie=scarymovie#255" the page must start from anchor #255 but it starts from the begin. How I can fix it to start from anchor 255, no from begin?
with regards ;]
Fixed: Correct a IDs
It is easier to send back the anchor as its own value and just use:
window.location.hash = '#255';
It is worth noting that even though it may work, 255 is not a valid value for an ID attribute in HTML: What are valid values for the id attribute in HTML?
Edit: fixed a typo in the variable name