We Keep Coding

unable to set result from ajax success to div html in mvc

I have the below code, I'm calling an action and getting a partialviewresult in ajax success.
But I'm unable to set the html to the div-Graph, but I'm getting undefined in alert; alert( $('#div-Graph').html()); The entire html is disappearing...
Any idea on this?
$(document).ready(function () {
$('#ChartTypes').change(function () {
var selectedID = $(this).val();
$.ajax({
url: '/charts/GetChart/4',
type: 'GET',
success: function (result) {
debugger ;
$('#div-Graph').html(result.toString());
alert( $('#div-Graph').html());
}
});
});
});
Kindly let me know if you need any more code parts. Tried a lot for a solution :(
Thanks
Ragesh

You can directly append it to the class/id like this. You can't display the whole div inside the alert box.
success: function (result) {
alert(result);
var res = JSON.stringify(result);
$('#div-Graph').append(res);
}

Uncaught SyntaxError: Unexpected token : Can't resolve

I keep on getting a syntax error in the console that I can't seem to resolve. When i copy and paste the link to the browser, it works just fine. Could someone help? I looked at the other threads and retyped the link in case there was a hidden character, but that didn't solve the issue.
function searchHotwire(city){
console.log(city);
var hotwireURL1 = "http://api.hotwire.com/v1/search/hotel?apikey={keyRemoved}&format=json&dest=";
var hotwireSearchURL1 = hotwireURL1 + city;
var hotwireURL2 = "&rooms=1&adults=1&children=0&startdate=10/20/2015&enddate=10/21/2015";
var hotwireSearchURL2 = hotwireSearchURL1 + hotwireURL2;
$.ajax({
url: hotwireSearchURL2,
type: "GET",
dataType: "jsonp",
error: function(data){
console.log("We got a problem");
console.log(hotwireSearchURL2);
console.log(data);
},
success: function(data){
console.log(hotwireSearchURL2);
console.log(data);
}
});
}
$(document).ready( function(){
$("#theButton").click( function(){
console.log("you clicked");
var theCityValue = $("#destination").val();
console.log(theCityValue);
searchHotwire(theCityValue);
});
});

So you tell the jQuery Ajax call it is "JSONP" and you are requesting "format=json" from the api.

Function Statements no name error

I have the following code:
<script type="text/javascript">
$(document).on("click", "#leftconversation", function(){
var self = this;
var cid = $(this).attr('class'); // getting the user id here
var request = $.ajax({
url: "conversation.php",
type: "POST",
data: { cid: cid },
beforeSend: function(){
self.html("Loading please wait...");
}
});
//WHEN SUCCESS
request.success(function( data ) {
$("#right").html(data); // replace the right div with echoed content from php file
});
});
</script>
However, my console keeps giving me the error: “SyntaxError: Function statements must have a name.”
I can't seem to fix the issue and that’s why the AJAX code isn’t running. Where’s this error coming from?
As per what Todd said, i changed the code to following:
<script type="text/javascript">
$(document).on("click", "#leftconversation", function(){
var self = this;
var cid = $(this).attr('class'); //you are getting the user id here
var request = $.ajax({
url: "conversation.php",
type: "POST",
data: { cid: cid },
beforeSend: function(){
self.html("Loading please wait...");
},
success: function(data) {
$("#right").html(data);
},
error: function(request, err){ console.log('An Error Occured' + err); }
});
});
</script>
It fixed the first error, but now its telling me TypeError: undefined is not a function (evaluating 'self.html("Loading please wait...")')
This is fixed, should have used var self = $(this); instead

as per my comment
$(document).on("click", "#leftconversation", function(){
var $self = $(this);
var cid = $(this).attr('class'); // getting the user id here
var request = $.ajax({
url: "conversation.php",
type: "POST",
data: { cid: cid },
beforeSend: function(){
$self.html("Loading please wait...");
}
});
//WHEN SUCCESS
request.success(function( data ) {
$("#right").html(data); // replace the right div with echoed content from php file
});
});

You can fix your issue without having to use a variable. Just set the context: property of the $.ajax call.
var request = $.ajax({
url: "conversation.php",
type: "POST",
data: { cid: this.className }, // Quicker way to get the class.
context: $(this), // The context in the callback will be the jQuery object.
beforeSend: function() {
// v-- This is now a jQuery object.
this.html("Loading please wait...");
}
});

Your code, as you have posted it, is correct. The error must be coming from elsewhere. That said, wherever the error is, here’s what to look for:
As you likely know, functions can be defined like this:
function greet(name) { /* ... */ }
This works in a statement context. Functions can also be used in an expression context:
[1, 2, 3].forEach(function(item) { alert(item); });
In an expression context, we can omit the name, as we did above, or we can include a name:
[1, 2, 3].forEach(function foo(item) { alert(item); });
However, what we cannot do is have a standalone function declaration without a name. This is an error:
function(name) { /* ... */ }
That is what your (now first) problem was.
“undefined is not a function”
Your updated code has a different problem. When you set self = this, this is a DOM element, not a jQuery object. You later try to use self.html, but DOM elements do not have a html property. If you wish to use jQuery methods, you must convert the element into a jQuery object, either at the point of assignment (self = $(this)) or at the point of use $(self).html.

Jquery ajax() not working as expected

I have a function getActivityHP() which I am calling as soon as my page loads. This function makes an ajax calls to another test3.php page with certain data which will contain default values initially. However as soon as I add my ajax code the function stops working as if there is an error. Simple alert also doesn't work!
<script>
$(document).ready( function(){
alert("Welcome");// not working
getActivityHP();
}
function getActivityHP() {
$("#loading").show();
alert("Hello"); // not working
var search = $("#search").val();
var deployedon = $("#deployedon").val();
var platform = $("#platform").val();
var country = $("#country").val();
var carrier = $("#carrier").val();
$.ajax({
type: "POST",
url: "test3.php",
data: {
"action" : "activity",
"deployedon" : deployedon,
"platform" : platform,
"country" : country,
"carrier" : carrier
},
success: function(msg) {
$("#loading").hide();
$("#activity").html(msg);
}
error: function() {
alert("An error occurred while processing file.");
}
});
}
</script>
In my test3.php I am doing:-
$action=$_POST['action'];
$deployedon=$_POST['deployedon'];
$platform=$_POST['platform'];
$carrier=$_POST['carrier'];
$country=$_POST['country'];
and then I am using echo to print these in my html!

There is syntax error. You are missing ) at the end of -
$(document).ready( function(){
alert("Welcome");
getActivityHP();
});
And missing , at the end of success -
success: function(msg) {
$("#loading").hide();
$("#activity").html(msg);
},
Update your code and try to run.

You missed a comma right here:
success: function(msg) {
$("#loading").hide();
$("#activity").html(msg);
}, // <--- This comma
error: function() {
alert("An error occurred while processing file.");

CKEDITOR ajax posts

I am trying to make an admin page using AJAX so when the client updates information in the CKEDITOR it doesn't have to take him to a new page. Getting data from input fields are easy enough using the .val() function, but because textareas are not updated on the fly, I can't use that same function. Heres as far as I got:
// this replaces all textarea tags into CKEDITORS
<script type="text/javascript">
CKEDITOR.replaceAll();
</script>
//this attempts to grab all data from inputs and textareas
$(function() {
$("#submit").click(function() {
var newsTitle = $("#newsTitle").val();
var editNews = CKEDITOR.instances.editNews.getData();
var contactTitle = $("#contactTitle").val();
var editContact = CKEDITOR.instances.editContact.getData();
var linksTitle = $("#linksTitle").val();
var editLinks = CKEDITOR.instances.editLinks.getData();
$.ajax({
type: "POST",
url: "update.php",
data: 'newsTitle='+newsTitle+'&editNews='+editNews+'&contactTitle='+contactTitle+'&editContact='+editContact+'&linksTitle='+linksTitle+'&editLinks='+editLinks,
cache: false,
success: function(){
updated();
}
});
return false;
});
});
the getData() function seemed like it would work because I tested it with alerts and it was grabbing the data from the editors, but once I would try and update, it wouldn't work...
any ideas?

This code replaces the textarea:
<script type="text/javascript">
CKEDITOR.replace( 'TEXTAREA_ID', {
extraPlugins : 'autogrow',
removePlugins : 'resize',
entities : false
});
</script>
In the JS file this is the code and I am using Jquery Validator Plugin:
$(document).ready(function(){
jQuery.validator.messages.required = "";
$("#FormID").validate({
submitHandler: function(){
var ContentFromEditor = CKEDITOR.instances.TEXTAREA_ID.getData();
var dataString = $("#FormID").serialize();
dataString += '&ContentFromEditor='+ContentFromEditor;
$.ajax({
type: "POST",
url: "Yourfile.php",
data: dataString,
cache: false,
success: function(html){
YOU WORK WITH THE RETURN HERE
},
error: function(xhr, ajaxOptions, thrownError){
alert(xhr.responseText);
}
});
return false;
}
});
});
This is the line that most of the time creates the error:
CKEDITOR.instances.TEXTAREA_ID.getData();
After the instances always comes the ID of the textarea.
I have my own config.js that you can get from the ckeditor website or from the examples.

Tage a look at the CKEditor function/adaptor for jQuery
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter
Because setting and retrieving the editor data is a common operation, the jQuery Adapter also provides the dedicated val() method:
// Get the editor data.
var data = $( 'textarea.editor' ).val();
// Set the editor data.
$( 'textarea.editor' ).val( 'my new content' );

With this code, my problems were solved.
I updated the field running ckeditor to be seen in serialize.
$('#form').find('.class').each(function(index) {
$(this).val(CKEDITOR.instances[$(this).attr('id')].getData());
});