how to pass variable inside html href in the view in mvc - javascript

i want to pass dynamic imei number , instead of static imei. i want to pass
obj[i].DeviceImei
inside the href tag at the place of 1009 for the google map marker info window view more option.
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
"</div>" +
'<div id="bodyContent">' +
"<p><b>Location: " + obj[i].location + "<br>"
+ "\n" +"IMEI: " + obj[i].DeviceImei +"<br>"
+ "\n" + "PRV Trip: " + obj[i].PRV_T + "<br>"
+'<a href="http://hostname/1009">' +
"View More" +
"</p>" +
"</div>" +
"</div>";

You can scape quotes with \", so in your case it would be:
+'<a href=\"http://hostname/' + obj[i].PRV_T + '\">' +

Related

Search for text inside all child of a div and hide the ones that doesn't contain it

I would like to hide all the divs that doesn't contain the text i'm writing inside a .
i've tried with something like this:
var $searchBox = $('#search-weeazer');
$searchBox.on('input', function() {
var scope = this;
var $userDivs = $('.information ');
if (!scope.value || scope.value === '') {
$userDivs.show();
return;
}
$userDivs.each(function(i, div) {
$('div:contains(scope.value)').hide();
})
});
but doesn't work (i know i will hide the div that contains the text, was for testing purpose ^^)
The divs are created dynamically after an Ajax Call, and the structure of the div is this:
"<div class=\"row information text-white shadow-lg p-2 mb-2\">" +
"<div class=\"col-3 profilePicture\">" +
"<img src=\"../../img/bg-masthead.jpg\" alt=\"Immagine profilo\" class=\"profileImage rounded-circle\">" +
"<div class=\"results\">" +
"<div class=\"results-content\">" +
"<span class=\"stars\">3</span>" +
"</div>" +
"</div>" +
"</div>" +
"<div class=\"col-9 infos\">" +
"<div class=\"row\">" +
"<div class=\"col-4 nome\"><b>Nome: </b>" + nome + "</div>" +
"<div class=\"col-4 regione\"><b>Regione: </b>" + regione + "</div>" +
"<div class=\"col-4 citta\"><b>Città: </b>" + citta + "</div>" +
"</div>" +
"<div class=\"row\">" +
"<div class=\"col-4 dataNascita\"><b>Data di nascita: </b>" + eta + "</div>" +
"<div class=\"col-4 coaching\"><b>Coaching online: </b>" + (coaching === "T" ? "Sì" : "No") + "</div>" +
"<div class=\"col-4 sesso\"><b>Sesso: </b>" + (sesso === "F" ? "Femmina" : "Maschio") + "</div>" +
"</div>" +
"<div class=\"row border-bottom\">" +
"<div class=\"col-6 blurry-text cellulare\"><b>Cellulare: </b>" + cellulare + "</div>" +
"<div class=\"col-6 blurry-text email\"><b>Email: </b>" + email + "</div>" +
"</div>" +
"<div class=\"row descriptionText \">" +
"<div class='col-10 descrizione'>" + descrizione + "</div>" +
"<div class='col-2 align-items-center'><button type='button' class='btn btn-primary btn-large profileButton' data-id='" + id + "'>Profilo</button></div>" +
"</div>" +
"</div>" +
"</div>"
But the script just does nothing for now. Any suggestion?
Currently, you're searching for elements that contain the literal string (scope.value). Use concatenation like so:
$("div:contains('" + scope.value + "')");
Or use a template literal:
$(`div:contains('${scope.value}')`);
$('div:contains(scope.value)')
Should be...
$('div:contains("'+ scope.value +'")')
So the value is appended to the string. Keep in mind if the value can contain double quotes you would have to escape them.

loading image into view after ajax call

Here is the problem I ran into just now. I have a chat function part of my laravel application that loads respective users images as they type in the conversation. What I cannot figure out is when I append the url for the profile picture into the view, it will not actually display the picture, it just shows a "placeholder" of where the picture should be.
I know the code works for a fact because I can see in the console log the correct path for the picture inside the assets folder.
So my question is how would I display a picture after retrieving info from an ajax call.
$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img scr=" + data.profilePicture + " class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
Thank you for the help in advance!
$('.chat-wrapper').append(
"<div class='message " + sent + "'>" +
"<div class='media-left'>" +
"<a href=''><img src='" + data.profilePicture + "' class='img-circle img-50x50' title=''></a>" +
"</div>" +
"<div class='media-body'>" +
"<small class='small-gray p-l-10 pull-right'>" + data.time + "</small>"+
"<div class='heading'>" +
"<span>"+data.authorUserName+"</span>" +
"</div>" +
"<p>" + messageText + "</p>" +
"</div>" +
"</div>"
);
src isn't spelt correctly, then notice the quotes after the src and the end of src also, try this out.
This is usually caused when you're in a route that does not represent the base URL properly.
You can use the asset() helper function to build the URL to your asset folder relative to the public directory on your server.
https://laravel.com/docs/5.3/helpers#method-asset

Javascript method argument escape

The below span tag containing an onclick event is not working
var test="<span onClick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />"
the above escaped string has some problems with the method call.
How can I fix it?
If you're creating this in JavaScript to create an element, then the first single-quote needs to be escaped.
function gotoNode(name, xaxis, yaxis, detail, status) {
alert("name = " + name + "\r\nxaxis = " + xaxis + "\r\nyaxis = " + yaxis + "\r\ndetail = " + detail + "\r\nstatus = " + status);
}
var result = { name: "name", xaxis: "xaxis", yaxis: "yaxis", detail: "detail", status: "status" };
var htmlText = '<input value="Button" type="button" onclick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />';
$("#lonely").append(htmlText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lonely"></div>
Generally speaking, whatever quote type you begin with (out of ' or "), you need to escape the same type that you want to use within the string and not escape the same type to terminate the string. You can leave the other type without escapes.
For your edited version, this should work if you want those result variables to be replaced with their values.
var test = "<span onclick=\"gotoNode('" + result.name + "','" + result.xaxis + "','" + result.yaxis + "','" + result.detail + "','" + result.status + "')\" />";
Do you use php to generate the output?
Then you should try
echo "<input type=\"button\" onClick=\"gotoNode(\" + result.name + \",\" +
result.xaxis + \",\" + result.yaxis + \",\" + result.detail + \",\" +
result.status + \")\" />";

How to use Static Resources for infowindow setContent?

I am getting Image at google map when using image at marker, but when i am using same image for infowindow then it shows only url.
Code:
var content = '<div class="map-content"><h3>' + "Account Name: " + "{!acc.Name} " +
'</h3>' + '<b>' +"Location: " + "{!acc.BillingCity}" + '</b>' + '</br>' +
"Direction : " + '<a href="http://maps.google.com/?daddr=' + "{!acc.BillingCity}" +
'" target="_blank">Get Directions</a>' + "{!$Resource.Image_GoogleMap}" +'</div>';
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
infowindow.setContent(content);
});
How to use "{!$Resource.Image_GoogleMap}" to showing image at infowindow for google map.
can any one help me?
If {!$Resource.Image_GoogleMap} is the URL of an image, and you want to display it in an InfoWindow, use normal HTML:
<img src="{!$Resource.Image_GoogleMap}" alt="image description">
(be careful to match the ' and " correctly)
var content = '<div class="map-content"><h3>' + "Account Name: " + "{!acc.Name} " +
'</h3>' + '<b>' +"Location: " + "{!acc.BillingCity}" + '</b>' + '</br>' +
"Direction : " + '<a href="http://maps.google.com/?daddr=' + "{!acc.BillingCity}" +
'" target="_blank">Get Directions</a>' + '<img src="{!$Resource.Image_GoogleMap}" alt="image description">' +'</div>';

Slimming down javascript code....Dynamic header on a static page with javascript

This element loads last and with delay on the page...
I've created a dynamic header with an external javascript file for my static html page.
I need help slimming down the code.
Also, to call the function, I call the body onLoad method. Any suggestions on how to call this EXTERNAL function before ALL the contents of the page loads?
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML;
var addHTML =
"<span>" + emptyHTML + "<a href='/broadcast_webcast/' class='catnav'>" + "Live Broadcasts & Webcasts" + "</a>" + "</span>"
+ "<span>" + "<a href='/business/' class='catnav'>" + "Business" + "</a>" + "</span>"
+ "<span>" + "<a href='/celebrities/' class='catnav'>" + "Celebrities" + "</a>" + "</span>"
+ "<span>" + "<a href='/culture/' class='catnav'>" + "Culture" + "</a>" + "</span>"
+ "<span>" + "<a href='/education/' class='catnav'>" + "Education" + "</a>" + "</span>"
+ "<span>" + "<a href='/energy/' class='catnav'>" + "Energy" + "</a>" + "</span>"
+ "<span>" + "<a href='/entertainment/' class='catnav'>" + "Entertainment" + "</a>" + "</span>"
+ "<span>" + "<a href='/environment/' class='catnav'>" + "Environment" + "</a>" + "</span>"
+ "<span>" + "<a href='/fashion/' class='catnav'>" + "Fashion" + "</a>" + "</span>"
+ "<br>"
+ "<span>" + "<a href='/health/' class='catnav'>" + "Health & Fitness" + "</a>" + "</span>"
+ "<span>" + "<a href='/humanitarian/' class='catnav'>" + "Humanitarian" + "</a>" + "</span>"
+ "<span>" + "<a href='/movies/' class='catnav'>" + "Movies" + "</a>" + "</span>"
+ "<span>" + "<a href='/music/' class='catnav'>" + "Music" + "</a>" + "</span>"
+ "<span>" + "<a href='/hollywood/' class='catnav'>" + "Hollywood" + "</a>" + "</span>"
+ "<span>" + "<a href='/newyork/' class='catnav'>" + "New York City" + "</a>" + "</span>"
+ "<span>" + "<a href='/scienceandtech/' class='catnav'>" + "Science & Technology" + "</a>" + "</span>"
+ "<span>" + "<a href='/sports/' class='catnav'>" + "Sports" + "</a>" + "</span>"
+ "<span>" + "<a href='/videogames/' class='catnav'>"+ "Video Games" + "</a>" + "</span>"
document.getElementById("category_header").innerHTML = addHTML;
var getNav = document.getElementById("navtop").innerHTML;
var createNav =
"<span class='navtop'>" + getNav + "<a href='../' class='navtop'>" + "Home" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/contact-us' class='navtop'>" + "Contact Us" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/our-expertise' class='navtop'>" + "Our Expertise" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/worldwide-studios-offices/' class='navtop'>" + "Bader TV Worldwide Studios & Offices" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/careers' class='navtop'>" + "Careers" + "</a>" + "</span>"
+ "<span class='navtop'>" + "<a href='/urgent-video-requests' class='navtop'>" + "Urgent video Requests" + "</a>" + "</span>"
document.getElementById("navtop").innerHTML = createNav;
}
ref: [badertv.com]
Step 1: Reduce Duplication (make a function which makes the span and a tags give a url and text.
Step 2: Use an array and loop for url and text.
function makeLink(url, text){
return "<span><a href='"+url+"' class='catnav'>"+text+"</a></span>";
}
var url = ['/business/','/celebrities/',...];
var text = ['Business','Celebrities',...];
var out = '';
for(var i = 0; i < url.length; i++){
out += makeLink(url[i],text[i]);
}
add any special cases and you're all set.
In both addHTML and createNav you have only one dynamic variable. Why the concatenation?
Addition:
You can just put the whole thing in a function and call it at after you close the parent tag for the element that will hold the content (you can set two function if the two strings are not for the same container).
The slimming down I guess could go like this, it will spare you a few bytes but I wonder if it is worth the effort. For the loading part: calling this in body onload is safe because it probably guarantees that the getElementbyId will work. If you put a script tag near the end of the </body> tag it might work also but on different browser the behavior might be different (aka broken).
function link(linkText) {
return "<span><a href='/" + linkText[0] + "/' class='catnav'>" + linkText[1] + "</a></span>";
}
function addHeaders(){
var emptyHTML = document.getElementById("category_header").innerHTML,
linkTexts = [
["broadcast_webcast", "Live Broadcasts & Webcasts"],
["business", "Business"]
// etc
],
addHtml;
addHtml = new [];
for (i=0;i<linkTexts.length;i += 1) {
addHtml.push(link(linkTexts[i]));
}
document.getElementById("category_header").innerHTML = addHtml.join("");
// rest of the code
}

Categories