I am trying to pass variables to a javascript function but i have the Javascript Error: 'missing ) after argument list"
html = html + '' + 'Lugar: ' +name.name +' Coordenadas: Lat '+ name.lat +' Lng'+ name.lng+ '<br>';
It doesn't look like I am missing any ')'s.
I see you have found your solution, but here's an alternative anyway, which reduces your string concatenation a little. There's still a far better way of achieving this, but this may help you start to see the benefit of moving away from building HMTL via string concatenation.
<meta charset="UTF-8">
<span id="spanTest"></span>
<script>
// Or whatever your initMap2 function does...
function initMap2(lat, lng, name) {
console.log('Lat: ' + lat);
console.log('Lng: ' + lng);
console.log('Name: ' + name);
}
var spanTest = document.getElementById('spanTest');
var worldLocation = { name:"test", lat:98.5, lng:-88.45 };
var anchor = document.createElement('a');
anchor.href = 'javascript:initMap2(' + worldLocation.lat +', ' + worldLocation.lng + ', \'' + worldLocation.name + '\');';
anchor.innerHTML = 'Name: ' + worldLocation.name + ', Lat: ' + worldLocation.lat + ' Lng: ' + worldLocation.lng;
spanTest.appendChild(anchor);
</script>
I'm assuming your last argument is expected to be a string, but it's resolved to look like a variable. Try this instead:
html = html + '<a href="javascript:initMap2(' + name.lat +','+ name.lng +',\''+ name.name +'\');">' // etc.
When name.name resolves to a string, it'll be wrapped in single quotes as expected. It'll look something like javascript:initMap2(1, 2, 'someString').
Related
Is there any way to use a form in leaflet mapping to open another page?
I'm using a post route for this and have even tried embedding it in an tag but to no avail.
At the moment the form data is in a for loop like so
map_data.forEach(element => {
console.log('program=' + element.program + ', lat=' + element.gps_lat + ', long=' + element.gps_lon);
data[i] = L.marker([element.gps_lon, element.gps_lat], {icon: redIcon}).addTo(map);
var url = '{{ route("opentraining", ":training_id") }}';
var alt_url = '{{ route("opentraining") }}';
url = url.replace(':id', element.id);
data[i].bindPopup(
'<strong>' + element.program + '</strong>'
+ '<br />'
+ '<b>Location:</b> ' + element.location + ', ' + element.district + ', ' + element.province
+ '<br />'
+ '<b>Description:</b> ' + element.description
+ '<br /><br />'
+ '<form onsubmit="' + alt_url + '" method="POST" class="formEditTraining">#csrf<input type="hidden" name="training_id" value='+ element.id + '>'
+ '<button type="submit" value="submit" class="btn btn-primary trigger-submit">View Record</button>'
+'</form>'
).openPopup();
i++;
});
Even when use the route directly within the form it makes no difference all I get is an error saying POST method isn't supported.. What could I be missing ?
You're using the wrong attribute for the URL in your <form> tag. onsubmit is for specifying a JS function to run before the form is submitted. To specify the URL you want to submit the form to, use action. Since you are not specifying action at the moment, it's posting it back to the same URL that the form is on, which evidently is not set up to receive POSTs.
Hi I have a simple question, do I need to specify lblWelcomeUserMessage.innerHTML = ""; ( see below in code ) in the following function before insertAdjacentHTML on it ? It actually works as it is without declaring it, but I want to know what is the optimal approach ?
// Dynamic HTML / user interface for ALL users
function showWelcomeMessage() {
//lblWelcomeUserMessage.innerHTML = "";
var sWelcomeUserMessage = '<h3>' + 'Welcome:' + ' ' + sessionStorage.getItem( 'name' ) +
' ' + sessionStorage.getItem( 'lastname' ) + ' ' + sessionStorage.getItem( 'role' ) + ' </h3>';
var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
}
It depends on what you want to do.
If you are calling showWelcomeMessage function more than once then
you need to set it to empty lblWelcomeUserMessage.innerHTML = ""
function showWelcomeMessage() {
lblWelcomeUserMessage.innerHTML = "";
var sWelcomeUserMessage = '<h3>' + 'Welcome:' + ' ' + sessionStorage.getItem( 'name' ) +
' ' + sessionStorage.getItem( 'lastname' ) + ' ' + sessionStorage.getItem( 'role' ) + ' </h3>';
var iUserImage = '<img src=" ' + sessionStorage.getItem( 'image' ) + ' " width="50px">';
lblWelcomeUserMessage.insertAdjacentHTML( 'beforeend', sWelcomeUserMessage + iUserImage );
}
setInterval(showWelcomeMessage,4000);
OR
Otherwise you can remove lblWelcomeUserMessage.innerHTML = ""; from
above code
insertAdjacentHTML inserts some HTML around a node (lblWelcomeUserMessage, which you should have get before with something like lblWelcomeUserMessage = document.getElementById('welcome_tag')).
Setting it's inner content to an empty string is not really necessary, unless you want to clear it. It's rather a design issue than a programmatic one.
Optimal approach for what?
By the way based on MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
insertAdjacentHTML() parses the specified text as HTML or XML and
inserts the resulting nodes into the DOM tree at a specified position.
It does not reparse the element it is being used on and thus it does
not corrupt the existing elements inside that element. This avoids the
extra step of serialization, making it much faster than direct
innerHTML manipulation.
So it's basically depends on your needs. If you want to replace previous message you just add the lblWelcomeUserMessage.innerHTML = ""; , if you want to show all previous message just comment that code.
Three questions:
1) Is there any way to make this code more neater? Mainly to avoid so much nesting and quotes within quotes issues?
2) Any advice on parsing error below. I tested some code separately to mke sure it works. (see second code box below).
3) I'm getting "undefined" when I look at request.body in the NodeJS server program that handles this request. From what I read, I didn't need a body parser if the content-type was set to application/json.
<button id="updateStudentButton" data-dojo-type="dijit/form/Button"
data-dojo-props="iconClass:'dijitIconTask',
onClick:function(){
var url = '../student/' + dom.byId('studentId').value;
var studId = dojo.byId('studentId').value;
dom.byId('studentFeedback').value +=
'updateStudentButton clicked studentID=' + studId + '\n';
var firstname = dom.byId('studentFirstname').value;
var lastname = dom.byId('studentLastname').value;
var postBody = JSON.parse(
'{ \"data\": {' +
' \"firstname\": "' + firstname + '\",' +
' \"lastname\": "'+ lastname + '\"' +
'},' +
'\"headers\": { ' +
' \"Content-Type\": \"application/json\" ' +
'}}'
);
dom.byId('studentFeedback').value += 'postBody=' + postBody + '\n';
require(['dojo/request'], function(request){
// AJAX Post the data to the server
request.post(url, postBody
).then(function(response){
dom.byId('studentFeedback').value += response + '\n';
// parse and return data in text boxes
var respJSON = JSON.parse(response);
var rowsAffected = respJSON.rowsAffected;
dom.byId('studentFeedback').value += 'rowsAffected=' + rowsAffected + '\n';
},
function(error){
dom.byId('studentFeedback').value += response;
});
})
}
">
Update
</button>
I tested separatley in NodeJS to make sure quotes all work and saw the correct console.log:
var firstname = 'John';
var lastname = 'Doe';
var postBody = JSON.parse(
'{ \"data\": {' +
' \"firstname\": "' + firstname + '\",' +
' \"lastname\": "'+ lastname + '\"' +
'},' +
'\"headers\": { ' +
' \"Content-Type\": \"application/json\" ' +
'}}'
);
console.log ("postBody=");
console.dir (postBody);
Getting parsing error:
dojo/parser::parse() error Error: SyntaxError: Invalid or unexpected token in data-dojo-props='iconClass:'dijitIconTask',
onClick:function(){
var url = '../student/' + dom.byId('studentId').value;
var firstname = dom.byId('studentFirstname').value;
var lastname = dom.byId('studentLastname').value;
var postBody = JSON.parse(
'{ \'
at Object.construct (parser.js.uncompressed.js:401)
at Object.<anonymous> (parser.js.uncompressed.js:190)
at Object.map (dojo.js:8)
at Object._instantiate (parser.js.uncompressed.js:184)
at parser.js.uncompressed.js:893
at _2f8 (dojo.js:8)
at Promise.then._305.then (dojo.js:8)
at Object.parse (parser.js.uncompressed.js:890)
at Object._parse (html.js.uncompressed.js:301)
at Object.onEnd (html.js.uncompressed
The way to avoid quotes within quotes issue is to have your onClick javascript code inside <script></script> tags.
Below a modified version of your code that works Ok in my environment. The request activates the error callback as I don't have the server handling side.
See the documentation here for the declarative details (use of data-dojo-event), and here for the request details.
For the request, I have stringified the data, as this is what I do in my application (php on the server side). The documentation says it can be a string or object, you may want to try sending the data object, depending on what your server environment expects.
Rgds,
jc
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Neal Walters stask overflow test</title>
<link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<button type="button" id="updateStudentButton" data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'dijitIconTask'">
<span>update</span>
<script type='dojo/on' data-dojo-event='click'>
var dom = require('dojo/dom');
var url = '../student/' + dom.byId('studentId').value;
var studId = dom.byId('studentId').value;
dom.byId('studentFeedback').value += 'updateStudentButton clicked studentID=' + studId + '\n';
var firstname = dom.byId('studentFirstname').value;
var lastname = dom.byId('studentLastname').value;
var data = {firstname: firstname, lastname: lastname};
//dom.byId('studentFeedback').value += 'postBody=' + postBody + '\n';
require(['dojo/request'], function(request){
// AJAX Post the data to the server
request.post(url, {data: JSON.stringify(data), method: 'POST', handleAs: 'json'}).then(
function(response){
dom.byId('studentFeedback').value += JSON.stringify(response) + '\n';
// parse and return data in text boxes
var rowsAffected = response.rowsAffected;
dom.byId('studentFeedback').value += 'rowsAffected=' + rowsAffected + '\n';
},
function(error){
dom.byId('studentFeedback').value += error;
}
);
});
</script>
</button><p>
<form>
Student feedback: <input id="studentFeedback"><p>
Student first name: <input id="studentFirstname"><p>
Student last name: <input id="studentLastname"><p>
Student id: <input id="studentId"><p>
</form>
<script src="dojo-release-1.12.2-src/dojo/dojo.js" data-dojo-config="async:true"></script>
<script type="text/javascript">
require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],
function(parser){
parser.parse();
});
</script>
</body>
</html>
data-dojo-props="iconClass:'dijitIconTask'
don't you need to end with "?
data-dojo-props="iconClass:'dijitIconTask'"
You can better the way you are creating JSON ex:
var json={};
json.name="Test";
json.age="23"
when you print json (JSON.stringify(json)), you will see
{
"name":"Test",
"age":"23"
}
I would like to use Opbeat with Totaljs.
Do you have an idea how to use this tool with Total?
Thank you
While i haven't tried i believe the way to use Opbeat in Total.js is as follows
Place bellow code above require('total.js').http(....) or basicly at the very top of the file where this line require('total.js').http(....) is used.
// globally available OPBEAT can be used throughout the application
global.OPBEAT = require('opbeat').start({
// see documentations for more info
appId: '<app id>',
organizationId: '<org id>',
secretToken: '<token>'
});
require('total.js').http(....);
for logging errors or whatever you want you can use any of framework events
but since the framework doesn't emit event in case of error the easiest you can do is to overwrite bellow function, place the code bellow in some definition file
Framework.prototype.onError = function(err, name, uri) {
OPBEAT.captureError(err);
// original code can be left as is
console.log('======= ' + (new Date().format('yyyy-MM-dd HH:mm:ss')) + ': ' + (name ? name + ' ---> ' : '') + err.toString() + (uri ? ' (' + parser.format(uri) + ')' : ''), err.stack);
return this;
};
EDIT
one of these may be needed for showing the URL in Opbeat dashboard
F.on('request', function(req, res) {
OPBEAT.setTransactionName(req.method + ' ' + req.url);
});
F.on( 'controller', function( controller, name ) {
OPBEAT.setTransactionName(controller.route.method + ' ' + controller.route.url);
});
In my code, how can I get the name of the User that someone clicked on in the marker?
Currently my code has:
function createMarker(point, user, studytopic) {
var marker = new GMarker(point);
var currUser = user;
var html = '<b>' + user + '</b> <br/>' + studytopic + '<br/>' +
' Contact ' + user + '' ;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
currUser is a global field, however, it's not updated every time I click on a different marker in Google maps.
Basically what I'm looking for is a event to fire when a link (id=contactSBLink) within any marker is clicked. I want it to get the Username(which is a link) to pass the user variable to another function.
I'm not sure what's the best way to go about to get this?
You can pass the user u to the javascript:showContactSB(u). This is an exercise in setting quotes properly:
var u = "'" + user + "'";
var html = '<b>' + user + '</b> <br/>' + studytopic + '<br/>' +
' Contact ' + user + '' ;
Now, you get the user in the click-function:
function showContactSB(user) {
alert("Hi " + user);
}
BTW, I would recommend you to upgrade to Google Maps v3.