HTML Different styles - javascript

Can anyone tell me what is the difference between the two styles of html code written below.
return '<div id='suggestionId' class="autocomplete-suggestion">No Message Found</div>';
Vs
var autoCompleteSuggestion;
autoCompleteSuggestion = $('<div/>').attr({id: 'suggestionId'}).addClass('suggestion').html('No Message Found');
return autoCompleteSuggestion;
Results are same, the below mentioned script what kind of scripting is it called. Would like to know more

The first one is hard-coded vanilla javascript. The second one uses the jQuery api to build the string.
Also, your first one uses quotes incorrectly. But it looks like that's not intentional.

First of all your first script wont work because you use
return '<div id='suggestionId' class="autocomplete-suggestion">No Message Found</div>'; //you should use id="suggestionId".
The first code is a javascript code returns a string which contains tags and attributes of a div.
the second code is written in JQuery and returns a string built by JQuery functions.
The result (if there is no syntax error) will be the same.

Neither one of them is just straight HTML.
The first one is vanilla javascript. But should be written like this
return '<div id=' + suggestionId + ' class="autocomplete-suggestion">No Message Found</div>';
Otherwise suggestionId will throw an error and not render the id.
The second one is written using jQuery, but can be modified to be just
return $('<div/>').attr({id: 'suggestionId'}).addClass('suggestion').html('No Message Found');
Both will render the same to the browser.

Related

Adding JavaScript Function with arguments to an element from code behind

Hi Guys I've been dealing with an estrange thing while trying to pass string parameters to a JavaScript function from code behind, this is what I have actually in code behind which is wrong:
thumbnail = "<a href = 'javascript:RemovePirctureDetail(" + field1 + ",'" + tempname + "');' class='label label-default' rel='tooltip'>Remove</a>";
So this is the bad result I'm getting in the browser:
Remove
Meas that for some reason when I try to pass the string parameter, the html comes out bad formatted. The result should looks like this:
Remove
I tried already send the quotation marks like this /' from code behind, it did not work neither. How can I achieve this?
Thanks.
string thumbnail = "Remove";`
You need to use \ to escape the quotes inside, not /..
With javascript attribute I wouldn't use single quote, because it could be messy
Try to change in this way:
thumbnail = "Remove";
PS: Actually, I would NEVER use single quotes with attributes, it will cause an HTML validation error, HTML is not well formed with single quotes for attributes (although with inspection tools you see double quotes.. because inspection tools have the need to work with a well formed HTML, so if you want to see the real HTML of your page, view the source code (generally the option is on right-click on the page)

VB.net Geckofx 45 executing jquery.hide() has no effect

I tried the following articles about executing javascript.
But the if-else statement seems not obtaining the capability of jquery.
Dim jQuery As JQueryExecutor
jQuery = New JQueryExecutor(GeckoWebBrowser1.Window)
If (jQuery.ExecuteJQuery("typeof jQuery == 'undefined'").ToBoolean) Then
MsgBox("no jquery here")
else
jQuery.ExecuteJQuery("$(#" + aName + ").hide();")
end if
Is that something i forgotten?
The error is this one
I'm not entirely sure if this is what is triggering the error, but it looks as if your jQuery syntax is faulty; you are selecting by an ID, which jQuery takes as a string parameter, but your .ExecuteJQuery() line does not include the # as a string.
jQuery.ExecuteJQuery(jQuery.ExecuteJQuery("$('#" + aName + "').hide();")
I know quotes can get a bit confusing, and perhaps this might be the issue?

console.log how to echo strange characters/html entities

Is it possible to print out the value of a field without being rendered?
In other words, if I have an html like this:
<input value="&apos;" />
And I do:
console.log( $('input').first().val() );
The result will be:
'
While, what I would like is the result to be:
&apos;
is it possible?
Please note this is for debugging proposes only.
The HTML entity is converted to the real character when the HTML is parsed and the DOM is created.
Your JavaScript runs much, much, later than that.
To get the original HTML you would need to make a new HTTP request to fetch the source code of the HTML document, and then write a custom parser (which didn't handle entities) to find the part of the HTML that interested you.

Error : "identifier starts immediately after numeric literal javascript"

$(obj).replaceWith('<a class="fd-tool-li" onclick="javascript:Like(this, #Model.User.HOCODE.ToString(), #Model.CommentHOCODE.ToString());">' +
'<i class="icon-thumbs-up"></i><span> ' +UserCount+ ' Like this</span>'+
'<a name="Unlike"class="fd-tool-li" onclick="javascript:Unlike(this, #Model.User.HOCODE.ToString(), #Model.CommentHOCODE.ToString());">(Unlike?)</a>' +
'</a>');
Why am I getting this error ?
Simplify your code to avoid quote problems (and improve readibility). Extract the onclick javascript from you replace call :
$(obj).html('<a class=fd-tool-li onclick="javascript:Like(this, #Model.User.HOCODE.ToString(), #Model.CommentHOCODE.ToString());">' +
'<i class="icon-thumbs-up"></i><span> ' +1+ ' Like this</span>'+
'<a name=Unlike class=fd-tool-li>(Unlike?)</a>' +
'</a>'
);
$(obj).click(function() {
// things
});
That's supposing the #Model is defined by a precompiler of some sort and isn't present in the code.
If that's really what your code looks like when it reaches the browser (as opposed to parts of it being handled on the server and something different going to the browser), then you have a syntax error where you have #Model.CommentHOCODE.ToString(). You'll need to fix that. Identifiers can't start with a #.
If instead that's processed server-side and replaced with a series of characters, you probably need to put quotes around it, if it's really a string.
Similarly, do you have a client-side variable called UserCount? Because if not, and if that isn't being processed server-side, that could be an issue as well.
Fundamentally you need to look at that code and establish what happens server-side and what the result is that gets sent to the client browser, then ensure that what gets sent to the client browser is valid.
in my case, I was using an UUID in order to set a complex variable (something + UUID) and an easy solution I did was:
Replace "-" by "", the uniqueness for the identifier keeps alive.
If you are using Razor (ASP.net) instead of doing this: #Model.User.HOCODE.ToString() try with: #(Model.User.HOCODE.ToString())
Regards.

Trying to call a function in javascript

This is my code all I need to do is call a function which will write the contents to a dynamic div
<script language='javascript' type='text/javascript'>
function getComments(id)
{
alert(id);
}
var resultSet="";
function CreateDiv()
{
resultSet+="<br/><div id='"+rows.data[i].id+"'></div><script language='javascript' type='text/javascript'> getComments("+rows.data[i].id+"); <\/script>";
}
window.onload=CreateDiv;
</script>
The function getComments is not being called at all
What's that I am missing here
There are a few problems there.
You're referencing rows without defining it anywhere, which will cause an exception.
Assuming you define rows somewhere you haven't shown, the code's just creating a string containing a script tag and putting that string in resultSet. To cause the code inside the script tag to run, you'd have to assign resultSet to innerHTML on some element.
There's an extra ) in your call to getComments within the generated script.
Separately: Your id values would appear to be numbers (this is based on your passing them into getComments with no quotes around them). Note that using id values starting with a digit is allowed in HTML5, but not in earlier versions of HTML and not in CSS, so it's probably best avoided.
There's almost certainly a better way to do what you're actually trying to do, you may consider a separate question outlining the goal, how you've approached it so far, and asking for alternatives.
I would suggest that you break the code down into steps while you debug it. Specifically where you populate resultSet. Break it down at each plus sign. Then you can step through it and see how it is being populated.
resultSet+="<br/><div id='";
resultSet+=rows.data[i].id;
and so on.
Secondly, have a look in View Source to see what this looks like on the page when you run it. Does the HTML look properly formed?
Also, I am questioning whether that final <\/script> in resultSet is correct.
Try replacing the createDiv function with this:
function CreateDiv(){
resultSet += "<br/><div id='"+rows.data[i].id+"'></div>" + getComments(rows.data[i].id);
}
It should work flawlessly.

Categories

Resources