In my vue project i'm using google map api and over marker icons i generate infoWindow with custom html code.
I that code I would like to add in tag v-on:click listener. Every my try failed, always vue generate it as html.
My code
let infowindow = new google.maps.InfoWindow({
content: '<div class="listing-box">\n' +
' <div class="listing-rate-share">\n' +
' <div class="rated-list">\n' +
' <b class="la la-star"></b>\n' +
' <b class="la la-star"></b>\n' +
' <b class="la la-star"></b>\n' +
' <b class="la la-star-o"></b>\n' +
' <b class="la la-star-o"></b>\n' +
' <span>(13)</span>\n' +
' </div>\n' +
' <span><i class="la la-share-alt"></i></span>\n' +
' </i>' +
' </div>\n' +
' </div>' });
Ho to add this part on:click="this.addRemoveFavorite(place)" correct?
Thank you.
Here 2 approaches that will help you to achieve such a functionality, with cleaner templates and better code:
Constructor of google.maps.InfoWindow accepts also DOM node, so you can create component with your code and then pass ref of it to InfoWindow constructor.
Another way is to use vue-google-maps.
Related
I have the following html code :
<aside id="side">
<a class="active" href="#!"> some text <a>
<a href="#!"> some text <a>
<p> active </p>
</aside>
I am looking for a regex that only finds the 'active' string that is inside <aside id="side"></aside> and also 'active' should be value of class and something like <p> active </p> should not be match.
I try to use :
<aside.*[\s\S\n]class="active".*</aside>
but I dont find any match.
Try this
/class="\w*\W*active\W*\w*"/
Example
The problem with your regex is that the . in .* does not catch newlines. A JavaScript regex has no modifier to have newlines included in ., but you can use [\s\S]* as a workaround. The workaround skips over all whitespace and non-whitespace.
Here is a working code snipped that demonstrates that:
var html1 =
'<aside id="side">\n' +
' <a class="active" href="#!"> some text <a>\n' +
' <a href="#!"> some text <a>\n' +
' <p> active </p>\n' +
'</aside>';
var html2 =
'<bside id="side">\n' +
' <a class="active" href="#!"> some text <a>\n' +
' <a href="#!"> some text <a>\n' +
' <p> active </p>\n' +
'</bside>';
var re = /<aside [\s\S]* class="active"[\s\S]*<\/aside>/;
console.log('test html1: ' + re.test(html1));
console.log('test html2: ' + re.test(html2));
I'm working on an online website for contact management and I need to display my contacts from an xml file in html divs. How can I do this using an AJAX CALL, exclusively? My xml looks like this and I want to put this tags in some divs, one div for each contact.
<?xml version="1.0" encoding="UTF-8"?>
<contacts>
<contact id_contact="1">
<firstName>Lara</firstName>
<lastName>Adey</lastName>
<photo>lara.png</photo>
<email>lara.adey#gmail.com</email>
<birthday>1999-03-12</birthday>
<adress>Brooklyn 99</adress>
<description>Nice girl</description>
<phone>520-447-9821</phone>
<interests>Coding</interests>
<idUser>2</idUser>
</contact>
</contacts>
Try this in your javascript using JQuery $.ajax
Documentation : http://api.jquery.com/jquery.ajax/
$(document).ready(function () {
$.ajax({
type: "GET",
url: "contacts.xml",
dataType: "xml",
success: xmlParse
});
});
function xmlParse(xml) {
$(xml).find("contact").each(function () {
$(".main").append('<div class="contact"><div class="firstname">' + $(this).find("firstName").text() + '</div><div class="lastName">' + $(this).find("lastName").text() + '</div><div class="photo">Photo ' +
$(this).find("photo").text() + '</div><div class="email">Email ' + $(this).find("email").text() +'</div><div class="birthday">Birthday ' + $(this).find("birthday").text() + '</div><div class="address">Address ' + $(this).find("address").text() + '</div><div class="description">Description ' + $(this).find("description").text() + '</div><div class="phone">Phone ' + $(this).find("phone").text() + '</div><div class="interests">Interests ' +
$(this).find("interests").text() + '</div><div class="idUser">User ID ' +
$(this).find("idUser").text() + '</div></div>');
$(".contact").fadeIn(1000);
});
}
In your HTML :
<div class="main"></div>
I have to show an <a> tag. But depending on whether a value exists or not, I need to set href.
This is what I have:
<a ng-show="source.element!=0" "href="#/resource/{{source.a}}/{{source.b}}/val">
{{source.element}})
</a>
<a ng-show="source.element==0" "href="">{{source.element}}</a>
If source.element is 0 , then nothing should happen on clicking on the value of source.element (href="")
Else, the page must be redirected according to the href.
Is there a better way to do this since this duplicates code?
Thanks..
create a method in scope
$scope.getUrl = function(source){
return source.element==0 ? '#' : '#/resource/'+source.a+'/'+source.b+'/val';
}
then call from view
<a ng-href="{{getUrl(source)}}">
{{source.element}})
</a>
For angular markup it's better to use ngHref .
Becuse if user click on href before angular load it'll go the wrong address.
You can use ng-if
<div ng-if="source.element!=0"><a ng-href="your-url">{{sourceElement}</a></div>
<div ng-if="source.element==0"><a ng-href="">{{sourceElement}}</a></div>
ngif Documentation
Use ng-switch to reduce the number of watches and code duplication:
<span ng-switch="source.element">
<a ng-switch-when="0">
{{source.element}}
</a>
<a ng-switch-default ng-href="#/resource/{{source.a}}/{{source.b}}/val">
{{source.element}}
</a>
</span>
In your controller:
$scope.source.url = $scope.source.element === 0 ? '' : '#/resource/' + $scope.source.a + '/' + $,scope.source.b + '/val';
And in your markup
<a "ng-Href={{source.url}}>{{source.element}}</a>
Create a directive with two attributes like condition and url:
app.directive('anchor', function() {
return {
scope: {
condition: '=expr',
url: '#',
prompt: '#'
},
restrict: 'AE',
replace: 'true',
template: '<div>' +
'<div ng-if="condition">' +
'<a ng-href="{{url}}">{{prompt}}</a>' +
'</div>' +
'<div ng-if="!condition">{{prompt}}</div>' +
'</div>'
};
});
<anchor expr="1 === 1" url="#/test" prompt="test" />
The jsfiddle link.
I'm trying to create a website content management using asp.net and C# and bootstrap. I already done this using asp.net and C# and a server control like gridview but I want create this version one like as wordpress CMS.
I will describe my project to clear my purpose.
First I fill a DataTable from database. This Datatable has messageId int, Subject varchar, name varchar, email varchar, message text, isRead bit, and so on columns.isRead column is bit type for specifies that the message is read or not.
I Fill my DataTable using below Method:
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
Then I generate html text using another method dynamically: on Page_Load
protected void Page_Load(object sender, EventArgs e)
{
messeges = cls.fetchMessages();
}
messege the string variable, will append generated html code to aspx page:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-clock-o fa-fw"></i> Last messages From users</h3>
</div>
<div class="panel-body">
<div class="list-group">
<%=messeges %>
</div>
<div class="text-right">
View All messages <i class="fa fa-arrow-circle-right"></i>
</div>
</div>
</div>
</div>
the message content has these text from fetchMessages()method:
public string fetchMessages()
{
string post = ""; string readed = "";
DataTable dt = cls.Fill_In_DataTable("MessageFetchMessage");
if (dt.Rows.Count>0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
DateTime dtTemp = DateTime.Parse(dt.Rows[i]["messageDate"].ToString());
if (dt.Rows[i]["isRead"].ToString() == "True")
readed = "MessageReaded";
else
readed = "MessageNew";
post += "<div class='modal fade' id='myModal" + dt.Rows[i]["messageId"].ToString() + "' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>"
+ "<div class='modal-dialog' role='document'>"
+ "<div class='modal-content'>"
+ "<div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='myModalLabel'><span style='font-weight:bold'>Subject</span> : " + dt.Rows[i]["subject"].ToString() + "</h4></div>"
+ "<div class='modal-header'><p><span style='font-weight:bold'>Date</span> : " + dtTemp.ToString("yyyy/MM/dd") + "</p>"
+ "<p><span style='font-weight:bold'>Time</span> : " + dt.Rows[i]["messageTime"].ToString() + "</p>"
+ "<p><span style='font-weight:bold'>Email</span> : " + dt.Rows[i]["email"].ToString() + "</p></div>"
+ "<div class='modal-body'>" + dt.Rows[i]["message"].ToString() + "</div>"
+ "<div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><input type='submit' ID='btn" + dt.Rows[i]["messageId"].ToString() + "' class='btn btn-danger' onserverclick='btn_Click' value='Delete message' /></div>"
+ "</div></div></div>";
string narrow = Special.TimeToNarrow(dt.Rows[i]["messageDate"].ToString(), dt.Rows[i]["messageTime"].ToString());
post += "<a data-toggle='modal' data-target='#myModal" + dt.Rows[i]["messageId"].ToString() + "' href='#' class='list-group-item " + readed + "'><span class='badge'>" + narrow + "</span><i class='fa fa-fw fa-comment'></i> <span>"
+ dt.Rows[i]["name"].ToString() + "</span> : <span>" + dt.Rows[i]["subject"].ToString() + "</span></a>";
}
}
return post;
}
finally I add server code behind for btn_Click Event:
protected void btn_Click(object sender, EventArgs e)
{
string id = (sender as Control).ClientID;
//Then give Id to database class for CRUD Intractions
}
but btn_Click never called from client side. I search for similar question within 2 days and didn't get answer. please help me :)
Here I will put my Website screen Shots:
Then after click on one of the rows a pop up window will show using modal bootstrap:
Add your Modal, button and any other mark up you have to the ASPX page (mark up). Then you can get your ID on click event. The dynamic generation of your code is not registering the controls with the server side in Webforms.
Once you have captured your Message ID, you can place it in ViewState, Session or a hidden field on the UI. That way you can have the ID to use whenever you need it.
html += '<tr style="display:none;"><td class="leftval">ID:</td><td><span id="' + _uniqueId + '-id">' + one + '</span></td></tr>';
html += '<tr><td class="leftval"><label for="' + _uniqueId + '-itemdesc" title="This is the descriptive text that will actually appear in the email.">Description: </label></td>';
html += '<td><input value="' + four + '" class="CDinput" name="itemdesc" id="' + _uniqueId + '-itemdesc" type="text"></td></tr>';
html += '<tr><td class="leftval"><label for="' + _uniqueId + '-title" title="This is the title text that is used in the email. The text usually is used as the anchor text of a link.">Title: </label></td>';
html += '<td><input value="' + five + '" class="CDinput" name="title" id="' + _uniqueId + '-title" type="text"></td></tr>';
html += '<tr><td class="leftval"><label style="color:#f16d44;" for="' + _uniqueId + '-enddate" title="This is the expiration of the offer. The formating here is arbitrary and does not impact how the end date would look in the actual template.">End Date: </label></td>';
html += '<td><input style="width:230px" value="' + six + '" class="CDinput" name="enddate" id="' + _uniqueId + '-itemenddate" type="text">';//I'm overriding the default width for the calendar image
html += '<img style="cursor:pointer;" class="CDdate" id="' + _uniqueId + '-dateselector"src="/images/Calendar_hyperlink.png"></td></tr>';
I can think of 3 reasons:
string connector operands like ' + ' make it harder to read
Indentation is more difficult since it's awkward to indent the field to simulate a properly formatted html snippet.
Display logic is mixed in tightly with business application logic, making diversifying focus difficult.
You have 3 good reasons listed, and are in the top three. Trying to mix the two makes for ugly code, hard to read, hard to maintain, etc.
One other thing, though, that I hadn't thought of until recently, is that some editors, such as Netbeans, will tell you when your HTML is broken. Forgetting to close tags, wrong values, etc. I'm using PHP for my work, and I've gotten into the habit of doing soemthing like this:
<li>
<span class='name'><?php echo _TAG_INDEX ?>:</span>
<span class='value'><?php echo $get_zone_array['DB_ID'] ?></span>
</li>
Using it like this, if I forgot to close a tag, like if I forgot the closing </span> somewhere, it would point it out for me, so I could go in and fix it. However, if I was putting the HTML into a variable, or echoing it directly, like this:
$html = "<li><span class='name'>"._TAG_INDEX.":<span>" // notice missing / in </span>
. "<span class='value'>".$get_zone_array['DB_ID']."</span>"
. "</li>";
echo $html;
then there wouldn't be any HTML-checking from the editor, making finding those nasty little xHTML errors harder to find.
Some of the reasons:
It's butt-ugly!
It's slow. (The += operator in Java is not fast. Sometimes acceptable, but definitely not fast because it has to do a lot of object creation and buffer copying.)
It's too easy to introduce XSS vulnerabilities through strings not being properly quoted.
It's too inflexible; change anything on the layout and you have to change all the code.
Use a templating library instead. So much easier to get right.