We Keep Coding

Undefined Javascript variable - phcat

I have a function that returns an undefined variable. I tried all responses in some similar posts but no results.
identifier_id is defined but phcat is not defined. Any ideas?
$(function() {
$('body').on('click', '.save_random_profile', function() {
var identifier_id = $(this).attr("id");
$('.created_profile' + identifier_id).html('<img src="img/loader.gif" class="loading" />');
var phcat = document.getElementById('#phcat'+identifier_id).value;
alert(phcat);
$.ajax({
type: "POST",
async: false,
url: "actions/save_random_profile.php",
data: dataString,
cache: false,
success: function(data) {
if (data == 0) {
$('.created_profile' + identifier_id).html('Not Sent!');
} else {
$('.created_profile' + identifier_id).html(data);
}
}
});
return false;
});
});

Try jquery.attr().
Object.id is a native javascript method and will not be applicable on a jquery collection objects.
To get the id in a jquery object, use var phcat = $('.phcat#' + identifier_id).attr("id");
Or if you want to persist with javascript, use document.querySelector('.phcat#' + identifier_id).id;
$(function() {
$('body').on('click', '.save_random_profile', function() {
var identifier_id = $(this).attr("id");
$('.created_profile' + identifier_id).html('<img src="img/loader.gif" class="loading" />');
var phcat = $('.phcat#' + identifier_id).attr("id");
alert(phcat);
$.ajax({
type: "POST",
async: false,
url: "actions/save_random_profile.php",
data: dataString,
cache: false,
success: function(data) {
if (data == 0) {
$('.created_profile' + identifier_id).html('Not Sent!');
} else {
$('.created_profile' + identifier_id).html(data);
}
}
});
return false;
});
});
EDIT
If you are using document.getElementById, do not use the # along with the id.
var phcat = document.getElementById('phcat'+identifier_id).value;

Use var phcat = $('.phcat#'+identifier_id).attr('id');

use
var phcat = $('.phcat#' + identifier_id)[0].id;
it will give you native JS obj
OR
var phcat = $('.phcat#' + identifier_id).attr('id');
it will return id of element

How to trigger callbacks jquery 3.1.0

What I like is the best way to handle my .fail() & .done() when my ajax request returns with a assoc array that I parse.
This is my current code and my current problem is .fail(). always firing.
Note: I tested my something.php and its giving me the right response when it fail or when it succeeded this is the actual response to my something.php
Fail :
{
"ac":"failed"
}
Success :
{
"alias": "cd9d0e2e",
"sso": "http://somethin.com/home/site/cd9d0e2e?dm_sso=2!dsa654654sa56d FGfre4f645465fTIxYWE3NGZkMzk0NGM3NzIyMWFhNWQyMTgifQ",
"ru": "http://somethin.com/login/resetpwd?uuid=asd1as3d1as321d-4370-be5d-123a3s2d1a3sd13a2s",
"ac": "something#sample.com",
"fn": "Fish",
"ln": "Fillet"
}
$(document).ready(function(){
$('#btn-create').click(function(e){
e.preventDefault();
var cSite = createSite();
cSite.done(sendMail).fail(failOption).always(alwaysOption);
}
});
function createSite() {
var promise = $.Deferred();
$.ajax({
url: 'something.php',
method: 'POST',
data:"template_id="+template_id+"&original_url="+original_url+"&email="+email+"&first_name="+first_name+"&last_name="+last_name
}).then(function(data) {
var dataa = JSON.parse(data);
//debugger;
if(dataa.ac === 'failed') {
promise.reject(dataa);
} else {
promise.resolve(dataa);
}
});
return promise;
}
function sendMail(dataa) {
console.log(dataa);
}

You can return the promise form your createSite function.
var cSite = createSite(); and then use with .then, .done, .always or .fail etc.
$(document).ready(function() {
$('#btn-create').click(function(e) {
e.preventDefault();
var cSite = createSite();
cSite.done(function(resp) {
var dataa = JSON.parse(resp);
sendMail(dataa);
}).fail(failOption).always(alwaysOption);
});
});
function createSite() {
var promise = $.ajax({
url: 'something.php',
method: 'POST',
data: "template_id=" + template_id + "&original_url=" + original_url + "&email=" + email + "&first_name=" + first_name + "&last_name=" + last_name
})
return promise;
}
function sendMail(dataa) {
console.log(dataa);
}

Okay I figure it out now .. this is the code that works now.
$(document).ready(function(){
$('#btn-create').click(function(e){
//debugger;
e.preventDefault();
$(this).html('Creating Site');
var template_id = $("#template_id").val();
var original_url = $("#original_url").val();
var email = $("#email").val();
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
$.ajax({
url: 'create-site-con.2.php',
method: 'POST',
data:"template_id="+template_id+"&original_url="+original_url+"&email="+email+"&first_name="+first_name+"&last_name="+last_name
}).done(function(resp) {
var dataa = JSON.parse(resp);
if (dataa.ac === "failed"){
failOption(dataa);
}
else{
sendMail(dataa);
}
});
});//click
});//doc ready

dynamic load template in backbone and comunication between object

i faced ploblem solving write repitation code but i don't want that.
so i think how to solve this problem as beautiful programing aspect.
i thought some solution.
1. parent object add event bind to router
for example, user when visit example.com/#aaa , example.com/#bbb
i load router hashtag than handle that event.
if user visit #aaa then load template aaa.
but i find many reference but i don't know how to implement that solution which is parent and child object communication at backbone.js
2. parent object add function
i thought solution that visiting url stored target in router
for example, if i visit example.com/#aaa then router is written target = aaa
then parent object loads function and render ansync ajax load template and toss result child object.
but likewise i haven't ablity implement that is.
who will give hint to me?
many backbone.js reference is poorly and difficulty.
router.js (my source)
var app = app || {};
(function() {
'use strict';
var views = app.view = app.view || {};
app.Router = Backbone.Router.extend({
initialize: function(){
this.bind("all", this.change)
console.log(this.change);
},
routes: {
'situation': 'situationRoute',
'video': 'videoRoute',
'culture': 'cultureRoute',
//와일드카드 디폴트 라우터는 맨 마지막에 삽입.
'*home': 'homeRoute'
},
_bindRoutes: function() {
if (!this.routes) return;
this.routes = _.result(this, 'routes');
var route, routes = _.keys(this.routes);
while ((route = routes.pop()) != null) {
this.route(route, this.routes[route]);
}
},
initialize: function() {
// create the layout once here
this.layout = new views.Application({
el: 'body',
});
},
homeRoute: function() {
var view = new views.Home();
var target = 'Home';
this.layout.renderSubpage(target);
this.layout.setContent(view);
},
situationRoute: function() {
var view = new views.Situation();
var target = 'Situation';
this.layout.setContent(view);
},
videoRoute: function() {
var view = new views.Video();
var target = 'Video';
this.layout.setContent(view);
},
cultureRoute: function(){
var view = new views.Culture();
var target = 'Culture';
this.layout.setContent(view);
}
});
var router = new app.Router();
Backbone.history.start();
})();
view.js (my source)
var app = app || {};
(function() {
'use strict';
//views linitalize
var views = app.view = app.view || {};
views.Application = Backbone.View.extend({
initialize: function() {
this.$content = this.$('#container');
//this.$loading = this.$('#loading');
},
setContent: function(view, target) {
var content = this.content;
this.renderSubpage();
if (content) content.remove();
content = this.content = view;
this.$content.html(content.render().el);
},
showSpinner: function() {
this.$loading.show();
},
hideSpinner: function() {
this.$loading.hide();
},
renderSubpage: function(target){
var target = target;
var templateName = target;
var tmpl_dir = '../assets/static';
var tmpl_url = tmpl_dir + '/' + templateName + '.html';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType : html,
success: function (data) {
tmpl_string = data;
}
});
var template = _.template(tmpl_string);
this.$el.html(template);
return this;
}
});
views.Home = Backbone.View.extend({
render: function(html) {
return this;
//how to get return result? in parent object?
}
});
views.Stuation = Backbone.View.extend({
render: function() {
var template = _.template("<strong><% print('Hello ' + page); %></strong>");
var pageTxt = {page: "About"};
var html = template(pageTxt);
this.$el.html(html);
return this;
}
});
views.Video = Backbone.View.extend({
render: function() {
var template = _.template("<strong><% print('Hello ' + page); %></strong>");
var pageTxt = {page: "Contact"};
var html = template(pageTxt);
this.$el.html(html);
return this;
}
});
views.Culture = Backbone.View.extend({
render: function() {
var template = _.template("<strong><% print('Hello ' + page); %></strong>");
var pageTxt = {page: "Contact"};
var html = template(pageTxt);
this.$el.html(html);
return this;
}
});
})();
renderSubpage: function(target) is originally under source.
views.Home = Backbone.View.extend({
render: function(html) {
var templateName = home;
var tmpl_dir = '../assets/static';
var tmpl_url = tmpl_dir + '/' + templateName + '.html';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType : html,
success: function (data) {
tmpl_string = data;
}
});
var template = _.template(tmpl_string);
this.$el.html(template);
return this;
}
});
i don't want repitation code.
views.Home = templateName = 'home';
~~
views.Situation = tamplateName = 'Situation';
~~
How to fix it?

var app = app || {};
(function() {
'use strict';
//views linitalize
var views = app.view = app.view || {};
views.Application = Backbone.View.extend({
initialize: function() {
this.$content = this.$('#container');
//this.$loading = this.$('#loading');
},
setContent: function(view, target) {
var content = this.content;
var subUrl = this.target;
if (content) content.remove();
//if (content || target) content.remove()target.remove();
content = this.content = view;
subUrl = this.target = target;
var templateName = subUrl;
var tmpl_dir = '../assets/static';
var tmpl_url = tmpl_dir + '/' + templateName + '.html';
var tmpl_string = '';
$.ajax({
url: tmpl_url,
method: 'GET',
async: false,
dataType : 'html',
success: function (data) {
tmpl_string = data;
}
});
console.log(tmpl_string);
this.$content.html(content.render(tmpl_string).el);
},
showSpinner: function() {
this.$loading.show();
},
hideSpinner: function() {
this.$loading.hide();
}
});
views.Home = Backbone.View.extend({
render: function(templateName) {
var template = _.template(templateName);
this.$el.html(template);
return this;
}
});
i solve that ploblem use function parameter using ajax call subUrl and toss child object then child object renders this template string.

Creating an observable knockout array from a JSON response

C#/MVC/Knockout/JSON
I've got the following javascript:
function Feed(data) {
this.ID = ko.observable(data.ID);
this.RSSName = ko.observable(data.RSSName);
alert(data.RSSName + " " + data.ID);
}
function ViewModel() {
self = this;
self.CurrentFeeds = ko.observableArray([]);
self.isLoading = ko.observable(false);
self.StatusMessage = ko.observable("Loading");
$.ajax({
type: "GET",
url: '#Url.Action("RSSList", "RSS")',
success: function (data) {
var feeds = $.map(data, function (item) {
alert(item.RSSName + " " + item.ID + " 1");
return new Feed(item)
});
self.CurrentFeeds(feeds);
//self.CurrentFeeds(data);
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}
});
self.save = function () {
self.deleteFeed = function (feed) {
};
};
}
The JSON response (as copied from fiddler) looks like this:
{"aaData":[{"ID":"0","RSSName":"Most Recent"},{"ID":"1","RSSName":"Website feed"}]}
Controller:
public JsonResult RSSList()
{
var query = (from t in db.tblRSSFeeds
select new ViewModels.RSSList()
{
ID = t.pkID.ToString(),
RSSName = t.szFeedName
}).OrderBy( t => t.RSSName).ToList();
var recent = new ViewModels.RSSList();
recent.ID = "0";
recent.RSSName = "Most Recent";
query.Insert(0, recent);
return Json( query, JsonRequestBehavior.AllowGet);
}
I'm thinking my issue has to do with the Feed(data) function in that it's only passing back one record. I tried setting the self.CurrentFeeds(data) as well with no luck. The "alerts" shown above show undefined but I can see the data coming down from fiddler...
For some reason the success function isn't seeing the data correctly to create the array. Why is this?

If it is the response:
{"aaData":[{"ID":"0","RSSName":"Most Recent"},{"ID":"1","RSSName":"Website feed"}]}
Change the success callback to:
$.ajax({
type: "GET",
url: '#Url.Action("RSSList", "RSS")',
success: function (data) {
var feeds = $.map(data.aaData, function (item) {
alert(item.RSSName + " " + item.ID + " 1");
return new Feed(item)
});
self.CurrentFeeds(feeds);
},
error: function (err) {
alert(err.status + " : " + err.statusText);
}
});
And i belive it works, because you are trying to map an object not an array, so you must to get the aaData that is the array to map.

JavaScript callback function when working withing a loop

This is what the code below does:
Goes to a table in a database and retrieves some search criteria I will send to Google API (the PHP file is getSearchSon.php)
After having the results, I want to loop around it, call the Google API (searchCriteriasFuc) and store the results in an array
The last part of the code is doing an update to two different tables with the results returned from Google API (updateSearchDb.php)
In my code, I am using setTimeout in a few occasions which I don't like. Instead of using setTimeout, I would like to properly use callback functions in a more efficient way (This might be the cause of my problem) What is the best way of me doing that?
$(document).ready(function() {
$.ajax({
url: 'getSearchSon.php',
type: 'POST',
async: true,
dataType: 'Text',
/*data: { }, */
error: function(a, b, c) { alert(a+b+c); }
}).done(function(data) {
if(data != "connection")
{
var dataSent = data.split("|");
var search_criterias = JSON.parse(dataSent[0]);
var date_length = dataSent[1];
var divison_factor = dataSent[2];
var length = search_criterias.length;
var arrXhr = [];
var totalResultsArr = [];
var helperFunc = function(arrayIndex)
{
return function()
{
var totalResults = 0;
if (arrXhr[arrayIndex].readyState === 4 && arrXhr[arrayIndex].status == 200)
{
totalResults = JSON.parse(arrXhr[arrayIndex].responseText).queries.nextPage[0].totalResults;
totalResultsArr.push(totalResults);
}
}
}
var searchCriteriasFuc = function getTotalResults(searchParam, callback)
{
var searchParamLength = searchParam.length;
var url = "";
for(var i=0;i<searchParamLength;i++)
{
url = "https://www.googleapis.com/customsearch/v1?q=" + searchParam[i] + "&cx=005894674626506192190:j1zrf-as6vg&key=AIzaSyCanPMUPsyt3mXQd2GOhMZgD4l472jcDNM&dateRestrict=" + date_length;
arrXhr[i] = new XMLHttpRequest();
arrXhr[i].open("GET", url, true);
arrXhr[i].send();
arrXhr[i].onreadystatechange = helperFunc(i);
}
setTimeout(function()
{
if (typeof callback == "function") callback.apply(totalResultsArr);
}, 4000);
return searchParam;
}
function callbackFunction()
{
var results_arr = this.sort();
var countResultsArr = JSON.stringify(results_arr);
$.ajax({
url: 'updateSearchDb.php',
type: 'POST',
async: true,
dataType: 'Text',
data: { 'countResultsArr': countResultsArr },
error: function(a, b, c) { alert(a+b+c); }
}).done(function(data) {
var resultsDiv = document.getElementById("search");
if(data == "NORECORD") resultsDiv.innerHTML = 'Updated failed. There was a problem with the database';
else resultsDiv.innerHTML = 'Update was successful';
}); //end second ajax call
}
//llamando funcion principal
var arrSearchCriterias = searchCriteriasFuc(search_criterias, callbackFunction);
}
else
{
alert("Problem with MySQL connection.");
}
}); // end ajax
});

How you did it in 2015
Callbacks are things of the past. Nowadays you represent result values of asynchronous tasks with Promises. Here is some untested code:
$(document).ready(function() {
$.ajax({
url: 'getSearchSon.php',
type: 'POST',
async: true,
dataType: 'text'
/*data: { }, */
}).then(function(data) {
if (data == 'connection') {
alert("Problem with MySQL connection.");
} else {
var dataSent = data.split("|");
var search_criterias = JSON.parse(dataSent[0]);
var date_length = dataSent[1];
var divison_factor = dataSent[2];
return Promise.all(search_criterias.map(function(criteria) {
return $.ajax({
url: "https://www.googleapis.com/customsearch/v1"
+ "?q=" + criteria
+ "&cx=005894674626506192190:j1zrf-as6vg"
+ "&key=AIzaSyCanPMUPsyt3mXQd2GOhMZgD4l472jcDNM"
+ "&dateRestrict=" + date_length,
type: 'GET'
});
})).then(function(totalResultsArr) {
totalResultsArr.sort();
var countResultsArr = JSON.stringify(totalResultsArr);
return $.ajax({
url: 'updateSearchDb.php',
type: 'POST',
async: true,
dataType: 'text',
data: { 'countResultsArr': countResultsArr },
error: function(a, b, c) { alert(a+b+c); }
});
}).then(function(data) {
var resultsDiv = document.getElementById("search");
if(data == "NORECORD") {
resultsDiv.innerHTML = 'Updated failed. There was a problem with the database';
} else {
resultsDiv.innerHTML = 'Update was successful';
}
});
}
}).then(null, function() {
alert('Some unexpected error occured: ' + e);
});
});
This is how you do it in 2016 (ES7)
You can just use async/await.
$(document).ready(async() => {
try {
var data = await $.ajax({
url: 'getSearchSon.php',
type: 'POST',
async: true,
dataType: 'text'
/*data: { }, */
});
if (data == 'connection') {
alert("Problem with MySQL connection.");
} else {
var dataSent = data.split("|");
var search_criterias = JSON.parse(dataSent[0]);
var date_length = dataSent[1];
var divison_factor = dataSent[2];
var totalResultsArr = await Promise.all(
search_criterias.map(criteria => $.ajax({
url: "https://www.googleapis.com/customsearch/v1"
+ "?q=" + criteria
+ "&cx=005894674626506192190:j1zrf-as6vg"
+ "&key=AIzaSyCanPMUPsyt3mXQd2GOhMZgD4l472jcDNM"
+ "&dateRestrict=" + date_length,
type: 'GET'
}))
);
totalResultsArr.sort();
var countResultsArr = JSON.stringify(totalResultsArr);
var data2 = await $.ajax({
url: 'updateSearchDb.php',
type: 'POST',
async: true,
dataType: 'text',
data: { 'countResultsArr': countResultsArr },
error: function(a, b, c) { alert(a+b+c); }
});
if(data2 == "NORECORD") {
resultsDiv.innerHTML = 'Updated failed. There was a problem with the database';
} else {
resultsDiv.innerHTML = 'Update was successful';
}
}
} catch(e) {
alert('Some unexpected error occured: ' + e);
}
});
UPDATE 2016
Unfortunately the async/await proposal didn't make it to the ES7 specification ultimately, so it is still non-standard.

You could reformat your getTotalResults function in the following matter, it would then search rather sequential, but it should also do the trick in returning your results with an extra callback.
'use strict';
function getTotalResults(searchParam, callback) {
var url = "https://www.googleapis.com/customsearch/v1?q={param}&cx=005894674626506192190:j1zrf-as6vg&key=AIzaSyCanPMUPsyt3mXQd2GOhMZgD4l472jcDNM&dateRestrict=" + (new Date()).getTime(),
i = 0,
len = searchParam.length,
results = [],
req, nextRequest = function() {
console.log('received results for "' + searchParam[i] + '"');
if (++i < len) {
completeRequest(url.replace('{param}', searchParam[i]), results, nextRequest);
} else {
callback(results);
}
};
completeRequest(url.replace('{param}', searchParam[0]), results, nextRequest);
}
function completeRequest(url, resultArr, completedCallback) {
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.onreadystatechange = function() {
if (this.readyState === 4 && this.status == 200) {
var totalResults = JSON.parse(this.responseText).queries.nextPage[0].totalResults;
resultArr.push(totalResults);
completedCallback();
}
};
req.send();
}
getTotalResults(['ford', 'volkswagen', 'citroen', 'renault', 'chrysler', 'dacia'], function(searchResults) {
console.log(searchResults.length + ' results found!', searchResults);
});
However, since you already use JQuery in your code, you could also construct all the requests, and then use the JQuery.when functionality, as explained in this question
Wait until all jQuery Ajax requests are done?

To get the callback execute after google calls are finished you could change:
var requestCounter = 0;
var helperFunc = function(arrayIndex)
{
return function()
{
if (arrXhr[arrayIndex].readyState === 4 && arrXhr[arrayIndex].status == 200)
{
requestCounter++;
totalResults = JSON.parse(arrXhr[arrayIndex].responseText).queries.nextPage[0].totalResults;
totalResultsArr.push(totalResults);
if (requestCounter === search_criterias.length) {
callbackFunction.apply(totalResultsArr);
}
}
}
}
then remove the setTimeout on searchCreteriaFuc.
Consider using promises and Promise.all to get all much cleaner :D