i have made this simple app with gmaps.js but i need the search functions like they show it here:
http://hpneo.github.io/gmaps/examples/geocoding.html
i looked at the source code and all but it aint working.. The search button reloads the page...
my code is a follows:
<script>
$('#geocoding_form').submit(function(e){
e.preventDefault();
GMaps.geocode({
address: $('#address').val().trim(),
callback: function(results, status){
if(status=='OK'){
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
}
}
});
});
</script>
<form method="post" id="geocoding_form">
<label for="address">Address:</label>
<div class="input">
<input type="text" id="address" name="address" />
<input type="submit" class="btn" value="Search" />
</div>
</form>
<div id="map"></div>
the rest is loaded in from scripts.js you can see it in sourcecode. Why is this happening and how can i fix this?
The web app is located here, http://travelers.work/trein/
You need to change
map.setCenter(latlng.lat(), latlng.lng());
to
map.setCenter(latlng);
because the search returns a LatLng object as a result, and that's what is needed as an input for setCenter.
Here's a JS demo with your code: http://jsfiddle.net/DuRhR/3/
EDIT after comments:
Alternatively, you can pass to setCenter a LatLngLiteral
map.setCenter({lat: latlng.lat(), lng: latlng.lng()});
Related
I am using summernote rich text editor, and I want to edit my posted data(stored in DB). I am sending the value to the text area and inputs but not showing into the text area and showing into the input. kindly share some solutions and suggestions with me. any jquery and js function like this...
here is rendered data to web page
route.get('/edit/:id', async (req, res) =>{
const id = req.params.id
const article = await Article.findById(id)
res.render('editarticle',{article:article})
})
and here is ejs or HTML
<%- include('header'); -%>
<div class="container-9">
<h2>Create Article Here</h2>
<hr>
<form action="/create/blog" method='post'>
<input type="text" name="title" id="" placeholder="Enter Title" value='<%=article.title%>'/>
<input type="text" name="description" id="dics" placeholder="Enter Description" value='<%=article.discription%>'/>
<hr>
<button id='btn-post' type="submit">Post</button>
<textarea name='content' id="body" rows="10" value="<%=article.content%>" ></textarea>
</form>
</div>
<%- include('footer'); -%>
I have solved this problem with help of one line of code. I have got the solution after 2 month
var value = $('#value').val()
console.log(value);
$('textarea#body').summernote('pasteHTML', value);
if want to render the HTML for edit this will work, var value = $('#value').val() it just receiving the value (HTML) from the backend and $('textarea#body').summernote('pasteHTML', value); this line of code pesting the HTML into summernote editor.
#tushar Very useful !!
I use it on summer note as like
Put Content in a div, and set it display none
<div id="contentDumpDiv" style="display:none;">
<?php echo $post['content'] ?>
</div>
then use this javascript code
var value = $('#contentDumpDiv').html();
$('textarea#saContent').summernote('pasteHTML', value);
I'm trying to create a blog site that has the ability to comment on a blog/article. I have the end point
app.get('/post/:slug', function(req, res) {
var _slug = req.params.slug;
var blog_post = _.findWhere(_DATA, { slug: _slug });
if (!blog_post) return res.render('404');
res.render('post', blog_post);
});
that handles the display of a blog/article using HandleBars. It retrieves a post from database _DATA and simply display it using the template post.handlebars. It right now does nothing else.
I would like to add the ability to comment on this article. I'm very new to web programming and don't know how to handle requests like that. Right now, my idea is to add
<article>
<form method="POST" action="/comment">
<div class="input-field">
<label>Comment:</label>
<textarea type="text" name="comment" rows="20" placeholder="What's on your mind?"></textarea>
</div>
<button type="submit">Add Comment</button>
</form>
</article>
to the bottom of my post.handlebars and add the end point app.post('/comment', function(req, res) {});
But this presents multiple problems, namely, how would I know which article I'm commenting on? In this new end-point, my req.body would contain nothing except the contents of the comment.
What is the proper way to handle this?
Put the ID of your article in the comment form as an hidden input. When you'll submit the form you'll get the article-id value.
I've used handlebar to place the article id in the form change the value of article.id according to your data.
<article>
<form method="POST" action="/comment">
<div class="input-field">
<label>Comment:</label>
<textarea type="text" name="comment" rows="20" placeholder="What's on your mind?"></textarea>
</div>
<input type="hidden" name="article-id" value="{{article.id}}">
<button type="submit">Add Comment</button>
</form>
</article>
I have a form that I am submitting using post. I can retrieve input values, however I also want to retrieve the class name or attribute of a div within a form.
html:
<form method='post' action='/formResult'>
<input type='text' name='someInput' />
<div class="stateAlpha" customAttr="alpha"></div> <!-- want 'alpha' -->
<button type="submit" class="btn btn-default">Submit</button>
</form>
node/express:
router.post('/formResult', function(req, res, next){
res.render('formResult', { someInput: req.body.someInput, someState: req.body.??? });
});
You'll need to intercept the submit event of the form, and put the class info into a hidden field. In pure JavaScript:
<form method='post' class='myForm' action='/formResult'>
<input type='text' name='someInput'>
<input type='hidden' name='state'>
<div class="stateAlpha" customAttr="alpha"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
document.querySelector('.myForm').addEventListener('submit', function(evt) {
var alpha = evt.target.querySelector('[customAttr="alpha"]');
var hiddenState = evt.target.querySelector('[name="state"]');
hiddenState.value = alpha.classList.join(' ');
});
</script>
Note that I added a class to the form, and used that to select the form; that's because you may have more than one form on the page, and you want to select the right one. Also note that inside the submit listener, I don't use document as the base of my selection, but evt.target; that's because you might have elements with customAttr='alpha' elsewhere in your document.
Once I have the div with the class you want to identify, I get the hidden input element, and set it's value property to the div's class list (remember any element can have more than one class, so classList is an array, which I just join using spaces).
If you're using jQuery, it gets a little shorter:
<form method='post' class='myForm' action='/formResult'>
<input type='text' name='someInput'>
<input type='hidden' name='state'>
<div class="stateAlpha" customAttr="alpha"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script>
$(document).ready(function() {
$('.myForm').on('submit', function() {
var $alpha = $(this).find('[customAttr="alpha"]');
$(this).find('[name="state"]')
.val($alpha.get(0).classList.join(' '));
});
});
</script>
The DOM is client-side and when you post the form only the values of the fields are posted, nothing else. To achieve what you are trying to do you can create a hidden field that stores the value of your class like this.
<input type="hidden" value="stateAlpha" name="myFieldName" />
This will then get sent in the form post.
I have 2 versions of my code, one is not working and the other it is.
My question is "why the not working one is not working?"
here is the JSfiddle http://jsfiddle.net/fhjF7/
The not working version:
Controller:
function Ctrl($scope) {
$scope.username = "username";
$scope.users = [ "Matteo", "Marco", "Michele" ];
};
HTML:
<h1> Not working example</h1>
<div ng-controller="Ctrl">
<div ng-repeat="user in users">
<input type="radio" ng-model="username" name="usern" ng-value="user" />
<strong>{{user}}</strong>
</div>
<div>selected: {{username}}</div>
</div>
and here is the working one, which is almost identical but replacing the string variable with an object:
Controller:
function usersCtrl($scope) {
$scope.names = {username: "username"};
$scope.users = [ "Matteo", "Marco", "Michele" ];
};
HTML:
<h1> Working example</h1>
<div ng-controller="usersCtrl">
<div ng-repeat="user in users">
<input type="radio" ng-model="names.username" name="username" ng-value="user" />
<strong>{{user}}</strong>
</div>
<div>selected: {{names.username}}</div>
</div>
It is because of the way javascript manages function parameters.
The easy way to understand it is that String, Number, and Boolean parameters are always sent byValue, while Objects and Functions are always sent byRef, that is why when you use the dot inside an ng-model it means you are doing a reference to an object which will propagate, while if you don't use a dot inside the ng-model, you are referencing a String, Number or Boolean which is actually a copy of the real variable.
More information here https://egghead.io/lessons/angularjs-the-dot and https://github.com/angular/angular.js/wiki/Understanding-Scopes
Ng-repeats create their own isolate scopes, so that's why the string is not being preserved as it's not pass by reference. If you want to update the model use
<input type="radio" ng-model="$parent.username" name="usern" ng-value="user" />
$parent gives you access to the parents scope which is outside the ng-repeat and should be the one you want.
The answer for your not working code : http://jsfiddle.net/ashuslove/fhjF7/30/
HTML :
<h1> Not working example</h1>
<div ng-controller="Ctrl">
<div ng-repeat="user in users">
<input type="radio" ng-model="names.usern" name="usern" ng-value="user" />
<strong>{{user}}</strong>
</div>
<div>selected: {{names.usern}}</div> //Changed line here
</div>
The function :
function Ctrl($scope) {
$scope.names = {usern: "usern"}; //Also need to change this
$scope.users = [ "Matteo", "Marco", "Michele" ];
};
I need to redirect page into external site with POST parameters, but I cannot use vanilla HTML <form action="url"> like it is explained here:
JSF commandButton - passing POST params to an external site
because then the form would be within a jsf form - and it doesn't work.
Is it possible to use:
FacesContext.getCurrentInstance().getExternalContext().redirect("http://example.com");
with POST parameters without additional vanilla form somehow? Or maybe there is other way to acheive this without form?
Try something like this:
JAVASCRIPT:
function redirect() {
document.getElementById("mySubmitButton").submit();
}
XHTML:
<h:form>
<span onclick="javascript:redirect()" class="linkClass">REDIRECT</span>
</h:form>
<div style="display:none:"> <!-- If you want it hidden -->
<form action="http://external/myplace.html" method="post">
<input type="hidden" value="value1"></input>
<input type="submit" id="mySubmitButton"</input>
</form>
</div>
EDIT: Added another test.
PASSING DYNAMIC PARAMETER:
In this example we assume that we are always going to send a value.
JAVASCRIPT:
function redirect(dynamicValue) {
document.getElementById("dynamicField").value = dynamicValue;
document.getElementById("mySubmitButton").submit();
}
XHTML:
<h:form>
<span onclick="javascript:redirect('myValue')" class="linkClass">REDIRECT</span>
</h:form>
<div style="display:none:"> <!-- If you want it hidden -->
<form action="http://external/myplace.html" method="post">
<input id="dynamicField" type="hidden" value=""></input>
<input type="hidden" value="value1"></input>
<input type="submit" id="mySubmitButton"</input>
</form>
</div>