Trying to trigger an event in the infowindow..i have the following content string
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
'<div id="bodyContent">'+
'<p>'+data.address+'</p>'+
'<p></p>'+
'<p>Do You Want to change search location</p>'+
'<input type="button" value="click me" onclick="alert(\"infoWindow\")">'+
'</div>'+
'</div>';
here the alert statement is no triggering..Actually i need to implement a event that whenever i click the button i need to store that particular coordinates into local storage
any suggestions would be appreciated
Change '<input type="button" value="click me" onclick="alert(\"infoWindow\")">'+
To '<input type="button" value="click me" onclick="saveData()">'+
saveData() Function used latlng from marker which should be set GLOBAL (At start of script)
function saveData() {
var latlng = marker.getPosition();
var lat=latlng.lat();
var lng=latlng.lng();
//store data
}
EDIT
Changed from(cut & paste error in origonal)
var lat=" + latlng.lat();
var lng=" + latlng.lng();
Related
How Can i use *ngIf inside google Maps InfoWindow so that i can hide or show a Div based on a button i click in InfoWindow?
This is my Current Code:
let infowindow = new google.maps.InfoWindow({
content: '<div id="iw-container" *ngIf="showList">'+
'<div class="alert-box">Regd: ' +Data[i].foo.registration+'</div>'+
'<div class="alert-box" *ngIf="showList">Phone: ' +Data[i].foo.id.phoneNumbers[0]+'</div>'+
'<div *ngIf="showList">Hi</div>'+
'<button class=List">View List</button>'+
'</div>'
});
self.marker[reg].infowindow = infowindow;
function to change the flag which i've declared after the above line:
$('.List').click(function(){
self.showList = !self.showList;
self.showDataList(i);
});
showDataList() will give some data which i want to handle later.
*ngIf works only once and later it just fails.
I have multiple markers which i'm storing in marker[].
What am I doing wrong ?
Thanks in Advance
Like in the screenshot I have div element working as button to expand area inside comments-loaded-more-wrap div element. Inside this div there are paragraphs if that div contains any text content. If there are no paragraphs comments-load-more div don't appear at first. It appears after I add text from input element. So I'm appending texts inside comments-loaded-more-wrap. but after append my expand jquery doesn't work. When I refresh the page its working fine.
I want to know how to reload the element to inherit jquery or is there any way to solve it?
If there is not content highlighted button don't appear at first. It comes when I add something from comment field. But when I click button the jquery doesn't work. If there are more that button is there at first time and it's working if I add something from comment field.
Here is the graphical view of my button:
here is my data append ajax:
//get comment input box id by its name
var elements = document.getElementsByName( 'comment_input' );
//on enter key press
$(elements).each(function(){
var cmt_id = $(this).attr('id');
var resp = cmt_id.split("_");
$('#comment_post_'+resp[2]).on('click', function(event) {
var comment = $('#'+cmt_id).text();
var form_data = {
comment_input : comment,
post_Id : resp[2],
ajax : '1'
};
$.ajax({
url: "comment/post_comment/",
type: 'POST',
async : true,
dataType:"json",
data: form_data,
success: function(data) {
$('#'+cmt_id).text('');
var latest_comment = data;
print_latest_comment(latest_comment);
}
});
});
});
function print_latest_comment(data){
$ght = $('#post_comment_id_'+ data.post_Id + ' .mCSB_container').children().length;
if($ght==0){
$('#post_comment_id_'+ data.post_Id + ' #panel1').append('<div class="comments-load-more" id="more-load-'+ data.post_Id +'">'+
'<span class="load-more-comments-count"><span class="new_cmt_count_'+ data.post_Id +'"></span></span>'+
'</div>');
$( '#post_comment_id_'+ data.post_Id + ' .mCSB_container' ).append('<div class="post-meta-single-comment" name="comment-field" id="comment_'+ data.comment_id +'">'+
'<div class="post-exp-top-meta-left">'+
'<div class="post-exp-top-meta-left-profile-picture">'+
'<a href="user?id='+ data.user_Id +'" ><img src="uploads/'+ data.pro_image.name + data.pro_image.ext +'"/></a>'+
'</div>'+
'<div class="post-exp-top-meta-left-profile-info">'+
'<div class="post-exp-top-meta-left-profile-name">'+
'<a href="user?id='+ data.user_Id +'" >'+ data.user_details.full_name +'</a>'+
'</div>'+
'<div class="post-exp-top-meta-left-profile-modes">'+
'<ul>'+
'<li><div class="time"><abbr class="timeago" title="'+ data.comment_datetime +'">less than a minute ago</abbr></div></li>'+
'<li class="flag"></li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="post-meta-single-comment-vote">'+
'<a class="comment-edit_'+ data.comment_id +'" title="Edit Comment" id="comment-edit">Edit</a>'+
'<i class="fa fa-times fa-2 close-comment" style="display: none;" title="Remove Comment" id="delete_comment_'+ data.comment_id +'"></i>'+
'<div class="comment-count">6</div>'+
'<div class="comment-icon"></div>'+
'</div>'+
'<div class="clearfix"></div>'+
'<div class="comment-content comment_content_'+ data.comment_id +'">'+
'<span class="comment-content-alone_'+ data.comment_id +'">'+ data.content +'</span>'+
'<input type="text" id="edit_comment_'+ data.comment_id +'" name="cmt_edit_input" style="display:none; padding:5px; height: 30px;" value="'+ data.content +'" spellcheck="true" />'+
'</div>'+
'</div>'
);
}
} // function end
I want to know how to reload the element to inherit jquery or is there any way to solve it?
If you add a button after pageload
$('#myNewButton').on('click', function....
Then it wont work, as the javascript has run, and it's not going to rerun to bind the click event to your post-ready button.
Instead, do this.
$('#myContainerThatExistsInSourceCode').on('click', '#myNewButton', function()....
This binds the clickevent to the parent, of your button, so the children wont have an event bound to it, but the child will trigger the event bound to the parent.
$('body').on('click', '#comment_post_'+resp[2], function(event) {
var comment = $('#'+cmt_id).text();
var form_data = {
comment_input : comment,
post_Id : resp[2],
ajax : '1'
};
Hi I am showing a infoWindow on click of the marker on google map , the content of the infoWindow is an inline html along with img tag the src of the image changes for every marker,I want to get the img src dynamicaly the code what iv done is
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<img id="image" alt="No Photograph to Display" src="" width="400px" height="250px" />'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+title+'</h1>'+
'<div id="bodyContent">'+
'<p>'+probdesc+'</p><br>'+
'<p><b>Open Date:</b>'+opendate+'</p><br>'+
'<p><b>Status:</b>'+status+'</p><br>'+
'</div>'+
'</div>';
the image tag must get the src value must be replaced by url value which contains the dynamic path of the image
var url = '<%=imageURL %>'+ "&<portlet:namespace/>imagepath=" + imagepath;
You can use jQuery for it, after print the HTML code on your page:
$("#image").attr("src", url); //"url" is your var.
Only Javascript:
document.getElementById("image").setAttribute("src", url);
document.getElementById("image").src = url; //it works too - http://www.w3schools.com/js/js_htmldom_html.asp
Just for make it simple, after Paul S' comment. If you don't print the HTML on your page, the "attr" code wouldn't work. For print the HTML code on your page, you can use:
$("#anchor_element").html(contentString);
// and then
$("#image") .....
Using pure Javascript:
document.getElementById("anchor").innerHTML = contentString;
// and then
document.getElementById("image")......
I want to make a for example content variable in javascript which will have a html tags inside with certain values.
How can I put that in the div when button is pressed.
For example :
This is a content which I want to use:
var contentString = '<div id="info">'+
'<h2><b> Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style=width:220px;display:inline-block;>'+
'<p> Name: '+ this.name + '</p>' +
'<p> Last name: '+ this.last+ '</p>' +
'<p>
'</div>'+
'</div>'+
'</div>'+
'</form>';
And I want to put it into : <div id=something"></div>
In javascript I can have something like:
$("#button").on('click', function() {
// What to put in here?
});
How can I put that in the div when button is pressed.
Like this:
$("#button").on('click', function() {
$('#something').html(contentString);
});
More info about html();
http://api.jquery.com/html/
It goes like this:
$("#button").on('click', function() {
$("#something").html(contentString);
});
If I'm not misunderstanding, then this will work:
$("#button").on('click', function() {
$('#something').html(contentString);
});
This does, of course, assume that you have an element with an id of button (though I assume you do, otherwise you wouldn't have put that jQuery).
JS Fiddle demo.
References:
html().
You should fix up your markup. You have unbalanced elements, and you can't have new lines in the string without escaping it. Try this instead:
var contentString = '<div id="info">'+
'<h2><b style="text-indent: 40px">Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style="width:220px;display:inline-block;">'+
'<p style="text-indent: 1em">Name: '+ this.name + '</p>' +
'<p style="text-indent: 1em">Last name: '+ this.last+ '</p>' +
'</div>';
Note that I skipped the and replaced them with style attributes. You really should put these styles in a stylesheet, though.
$("#button").on('click', function() {
$('#something').html(contentString);
});
Keep in mind that the variables in contentString will not be evaluated when the click event on the button fires, meaning that this.name and this.last will not change. Do you need to update these values on click as well?
I am trying to add elements to specific div, but not using clone(), because i need fresh copy of original elements on every add, mainly because elements are draggable and their values are being change by user? So i have my html in variable, i need to take this elements and add them on click to another elem. ?
$(document).ready(function (e) {
var $gElem = $(
'<div class="distributionWrapper" id="element_0">' +
'<div class="cbox cboxQuarterWidth">' +
'<select id="combobox100">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</div>'+
'<div class="help"></div>'+
'<div class="cbox cboxEighthWidth"><span>'+
'<select id="combobox200" name="PeriodId">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</span></div>'+
'<div class="clear" id="clearDistribution"></div>'+
'<div class="add" id="addDistribution"></div>'+
'</div>'
);
$('.mainSearch').html($gElem); // initial load of element
$("#combobox100").combobox();
$("#combobox200").combobox();
var counter = 1;
$('.add').live('click', function () {
if ($('.distributionWrapper').length === 6) return;
//var el = $('.distributionWrapper:first').clone().attr('id', 'element_' + ++counter).appendTo('.mainSearch');
$('.mainSearch').add($gElem).attr('id', 'element_' + ++counter);
// here on click add gElem to .mainSearch and set atribute to .distributionWrapper
});
$('.clear').live('click', function () {
if ($('.distributionWrapper').length === 1) return;
$(this).parents('.distributionWrapper').remove();
});
});
Any ideas?
try this
$('.mainSearch').append($gElem);
$('.mainSearch').children('.distributionWrapper:last').attr('id', 'element_' + ++counter);
Store the html as a string in a javascript variable and create a jQuery element every time you need one from that string.
var elemHtml =
'<div class="distributionWrapper" id="element_0">' +
'<div class="cbox cboxQuarterWidth">' +
'<select id="combobox100">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</div>'+
'<div class="help"></div>'+
'<div class="cbox cboxEighthWidth"><span>'+
'<select id="combobox200" name="PeriodId">'+
'<option>1</option>'+
'<option>2</option>'+
'</select>'+
'</span></div>'+
'<div class="clear" id="clearDistribution"></div>'+
'<div class="add" id="addDistribution"></div>'+
'</div>'
$(function(){
//your initial element
var $elem1 = $(elemHtml);
}
function someHandler(){
//you can create fresh new elements anywhere without cloning
var $elem2 = $(elemHtml);
}
The duplicate IDs need to be removed. But that's outside the scope of your question.