I have a image from a angular scope that is placed over my background image in a from, when i submit the form i clear the data from the form, however the image remains. How would i be able to remove the image from the $scope and just see the background image again.
This is the code (example)
<form ng-submit=submitform()>
<input type="text" ng-model="formdata.gametitle">
<input type="text" ng-model="formdata.image">
<img ng-src="{{formdata.image}}" style="background-image: 'url("select.jpg")'; width: 5vw; height: 7vw;"/>
<input type="submit">
so what this does it that the user adds a suggested image in the input (formdata.image) as an html link, in that case the directly shows the
image on the screen. When the user clicks the submit button i wipe the formdata clean (after adding it to the db first of course) as such
$scope.formdata = [];
this clears all the input fields, however the image stays. I can do this as example:
$scope.formdata.image = "//:0" // broken image link displayed
$scope.formdata.image = "" // does not do anything
$scope.formdata.image = $0; // results in crash
$scope.formdata.image = null; // no result
How would i be able to remove the complete data from the formfield and remove the image display, i don't want to 'ng-hide' the complete image i just want to show the image that is in the background. When one first time loads the form the DevTools elements mentions, you can reference to this expression with ==$0, "use $0 in the console.log to refer to this element" it say's. In this case there is no data.
To be able to clear all the data of a form one could use the $destroy.
$scope.formdata.$destroy
Related
Using NodeJS, Express and MongoDB, i have a text area for a user to add text to a blog.
What I want is for the user to be able to put image URL inside the text area and submit his post, and the application will show an image in place of that URL. How can I do that ?
I've tried to simply add a URL into it, but it doesn't work. I've also tried to add strong tags to some text but it doesn't get applied. As I will be the only one user able to post, I would also like to have that functionality.
Here is the HTML part to create a new post :
<div class="field">
<label>Contenu</label>
<textarea name="body"></textarea>
</div>
To show the post (I'm showing only the body part) :
<div class="description">
<p><%=blog.body%></p>
</div>
And in case you want to see my CREATE route for the post (which does work) :
router.post('/blogs',middleware.isLoggedIn,function(req,res){
var titre = req.body.title;
var image = req.body.image;
var body = req.body.body;
var author = {
id : req.user._id,
username : req.user.username
}
var newBlog ={title:titre ,image:image, body:body, author:author};
Blog.create(newBlog, function(err,newBlog){
if(err){
console.log(err);
res.render('blog/new');
}
else
{
console.log(newBlog);
res.redirect('/blogs');
}
});
});
What I want is the user input (only me for posts) to be translated to image for URL input or font style when I use tags like 'strong' in a textarea.
You can't display an image directly inside a textarea control.
The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.
Perhaps a writable div (content editable) would suit your purposes better. html
but you can use the contenteditable attribute specifies whether the content of an element is editable or not.
Note: When the contenteditable attribute is not set on an element, the element will inherit it from its parent.
<div contentEditable="true"> type here
<img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1" />
</div>
but read this link: Why ContentEditable is Terrible
I am attempting to get the data displayed from a database (it displays it on a dynamic page within a table) and have it as the value for a textfield on a different html page (map.html).
The value will be some sort of postcode/address and I want that to go into my google map page within the destination textfield. So when users check the location of the event they press the 'View on Map' button which will open up the page of the map and the data from the event should already be populated within the textfield.
However nothing appears and instead it remains blank, even when I just put in some dummy text it still doesn't populate. I know that the location value is being fetched as the alert correctly displays the location, but the problem is having it populate in the textfield.
I am using JQuery Mobile/Cordova/JavaScript/JQuery/HTML. The app is a one-page structure, with the exception of map.html which has it's own page.
Any ideas?
Fetching the location value:
$(document).on("click", ".btnMap", function(e){
var location = $(this).data("rowlocation");
viewMap(location);
});
Snippet of Button:
<a data-rowlocation='" + response.rows.item(i).Location + "' href='map.html' onclick='viewMap(location)' data-role='button' rel='external' data-mini='true' class='btnMap'>View on Map</a></td></tr>"
viewMap Function:
function viewMap(location) {
alert(location);
$("#target-dest").val(location);
}
HTML:
<input type="text" name="target-dest" id="target-dest" />
the simplest way of passing the location to a new page - using your existing code would be to append the location as a query string to the href in the link.
<a ...href='map.html?loc='" + response.rows.item(i).Location + "'...
and then on the destination page - use JS to grab the querystring from the URL, split it from the rest of the UURL and pass it to the textbox.
//js on destination page
var locn=location.href;
var locationPortions = locn.split("?loc=");
$('#target-dest").val(locationPortions[1]);
Because the trigger for this is clicking an <a>, the link is causing a loading of the map.html page which negates the updating of the contents of the textbox:
<a ...href='map.html'...
This is taking precedence over the onclick event. You need to either change the link into a button and trigger the function as an onclick event or prevent the link from performing its normal function as other posters have noted with e.preventDefault().
I have a HTML input field like this
<input type="text" id="Bild"/>
I want to get the value of the input field and store it in a String in my JSP page, something like this
<%
String theString= <input type="text" id="Bild"/>
%>
After that I want to use the string to as a source for my image field, like this
<img src= <%= theString %> >
I have no clue how to do this, and I've been staring at the screen for two hours not getting my head straight. How can I get the value of the input field to use for my image source?
I'm new to JavaScript so if I have to use this, please be very descriptive. Thanks.
Changes a pre-existing image's src when the byt button is clicked.
function bytUtBilden() {
// select <input id="Bild"/>
var bildenFalt = document.getElementById('Bild');
// select <img id="bilden"/>
var bilden = document.getElementById('bilden');
bilden.src = bildenFalt.value;
}
function begynna() {
// select element with id="byt"; when clicked, run bytUtBilden
document.getElementById('byt').addEventListener('click',bytUtBilden,false);
}
// when DOM is loaded, run begynna()
document.addEventListener('DOMContentLoaded',begynna,false);
Edit: Changed it so that it updates when the button is clicked. Also bytUtBilden() can be run from anywhere and it will do the same thing.
var path = $('Bild').val();
$('#imgid').attr('src',path);
Is there a reason to be going through a middle-man? Just grab the value with a direct DOM query as long as you know that the text field does already contain a value:
document.getElementById('Bild').value
In this example I used a button as the action, but you don't need that for the value to be query-able
http://jsfiddle.net/Py2E2/
I am working on an email template editor where the user will select from a list of pre-existing templates and will be able to update the template as necessary. I had problems with using the CKEditor plugin across browsers and so I have attempted to create my own. When the user selects a template it opens in a modal window. To change the images I have included input tags which are removed upon close of the modal. This works so well and so good but if the user then wants to go back into the editor the input buttons are no longer there.
I want to add in the input button in the modal window if it does not exist. I have tried checking the length of the property but I am unable to return a value other than null whether it exists or not. My code is as follows:
function template1InputButtons() {
if ($("#imageInput1T1").length == 0) {
$('<input id="imageInput1T1" type="file" name="newImage1T1" onchange="previewImage1T1(this)" />').insertBefore('.article_media');
}
}
If I open it the first time the length comes up as one and so nothing is added as expected. If I remove and then click the button again length shows as 0 and input is added correctly as expected. If I then remove the input and click the button again the length comes up as 1 despite the control not existing.
Any ideas?
Try this:
function template1InputButtons() {
if (!$("#imageInput1T1")) {
$('<input id="imageInput1T1" type="file" name="newImage1T1" onchange="previewImage1T1(this)" />').insertBefore('.article_media');
}
}
and also assure that you have placed it inside ready function.
Try this:
if ($("body").find("#imageInput1T1").length == 0) {
$('<input id="imageInput1T1" type="file" name="newImage1T1" onchange="previewImage1T1(this)" />').insertBefore('.article_media');
}
Problem was a similar finding of class attribute article_media on the other modal my mistake thanks for the help anyway
Here is functioning code on a form that displays a Tweet button -- the button's on a form that displays several images -- when the user clicks one of the images, it becomes the 'selected' image and the Tweet button is supposed to tweet the selected image's name and url:
<a id="tweetBtnId" href="https://twitter.com/share" class="twitter-share-button"
data-text="Check me out on OurWebSite!"
data-url=http://$ourSiteURL
data-via=http://$ourSiteURL data-size="medium" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s); js.id=id;
js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}
(document,"script", "twitter-wjs");</script>
I have an 'onclick()' handler for the div that displays the image. When the user clicks one of the images, its div's onclick() handler is called and sets that image to be the 'currentlySelectedImage' on the page -- and the onclick() handler then needs to update the Tweet button's 'data-text' attribute with the name of the just-selected image:
// This is part of the code of the 'onclick()' handler for
// the image being selected.
<script>
function handleImageOnClick()
{
var myDynamicTweetText = "name of currently-selected image goes here";
var elem = document.getElementById("tweetBtnId");
alert("The elem is: " + elem); // elem IS NULL !! Dagnabbit.
// this fails because 'elem' is null
elem.setAttribute("data-text", myDynamicTweetText);
// other onclick() code not shown for brevity......
}
</script>
I need to dynamically change the 'data-text' attribute's value in the Tweet button to be the name of the selected image. I added the javascript code above which fails-- the 'elem' obtained from the code here:
var elem = document.getElementById("tweetBtnId");
is null (I think) because of this line in the Twitter tweet button code above:
if(!d.getElementById(id)){js=d.createElement(s); js.id=id;
I'm not sure but it looks like the Twitter Tweet button default script overwrites any attempt
to add an 'id' attribute to the Tweet button.
You will see that I added the id="tweetBtnId" to the Tweet button above so I could get access to the Tweet button in my image-selection onclick() handler above, then set the 'data-text' to the name of the just-selected image.
I just doubt that Twitter's design goal for the Tweet button was "we're gonna dumb this sucker WAY down, we'll only let these animals choose ONE data-text value - every Tweet button has to have one hard-coded, "Once-on-the-page" data-text attribute - joke's on them if they try to dynamically change the Tweet button's data-text attribute."
I need to get this to work -- any ideas?
Just put it in a container with a known ID and traverse the document with it:
<div id="someIDiKnow">
<a id="tweetBtnId"...>...</a>
</div>
$("#someIDiKnow a").attr("data-text", "Replacement Text!");
Looks like it's going to be the kludgy hidden form/php variable approach for now -- I'll post back if I find a better work-around.
EDIT: the hidden-form/PHP variable solution has beaten the roadblock put up by Twitter's Tweet button -- I can now successfully, dynamically change the Tweet button text at will, anytime based on the user's client-side input. Per Domenic's astute observation that the question above is too long and has code in it, I'll skip posting the answer here, and I apologize for the length above.
You could use JQuery to update the attribute data-text by adding an onclick action on the image. If you wanted to include the text inside the actual image tag by adding your own attribute to the tag, that could be an easy work around to assembling the tweet text.
For example:
function updateTweetBtn(obj) {
$('#someIDiKnow a').attr('data-text', $(this).attr('tweet'));
}
<img src="/images/myimage.jpg" tweet="This is what I want to tweet" onclick="updateTweetBtn(this);" />
<img src="/images/myimage2.jpg" tweet="This is some other text I want to tweet" onclick="updateTweetBtn(this);" />
using in html
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Tweet
I managed to change the 'data-text' with javascript
var a = "new text";
document.getElementsByClassName('twitter-share-button')[0].setAttribute("data-text", a);
also worked with document.getElementById('twitter') if you add id='twitter' to <a>