I am getting an error on thymeleaf onclick.
<a th:text="${list.id}" th:href="#{/adm/page/testList/{id}(id=${list.id})}"></a>
I want to replace this code with:
<a th:onclick="'window.location.href = \'' + #{/adm/page/testList/{id}(id=${list.id})} + '\''"></ a>
But the #{ gets a red line.
I am wondering how to solve this error.
I hope the following code can help you:
<a th:onclick="window.location.href = '/adm/page/testList/[[${list.id}]]'"></a>
Using data properties, you can do syntax like this (which should be valid).
<a th:text="${list.id}" th:data-url="#{/adm/page/testList/{id}(id=${list.id})}" onclick="window.location.href = this.getAttribute('data-url');"></a>
Related
I am working on a page, where customers can write own descriptions for articles they sell. They can use html tags for this.
The code in the view looks like this:
#Html.Raw("<p class='description short'>" + shopItem.ShortDescription + "</p>")
The problem is, that this is splitted into two p-tags:
<p class="description short"></p>
and below that the content of shopItem.ShortDescription:
<p><em><strong>Title</strong></em></p>
I also tried
<p class="description short">#Html.Raw(shopItem.ShortDescription)</p>
but that leads to the same behavior.
I´m sure I´m missing or not seeing something. So, what is wrong with that code snippet?
I believe the issue here is that you cannot nest p elements. If you try it with just html it still will not work, but for example this works fine
#{
var shopItem = "<em><strong>Title</strong></em>";
}
#Html.Raw("<p class='description short'>" + shopItem + "</p>")
I am new to MVC and Razor engine. Trying to output the below string using #Html.Raw but the expected result is different.
#Html.Raw(" <span class='label label-warning' style='cursor: pointer' onclick=ChangeRPLocStatus(2,1,'1160001','1160001','X','Test 1')>AABBCC</span>")
Output in Html :
<span class="label label-warning" style="cursor: pointer;" onclick="ChangeRPLocStatus(2,1,'1160001','1160001','X','Test" 1')="">AABBCC</span>
The output is different at "Test 1".
I am expecting to get :
ChangeRPLocStatus(2,1,'1160001','1160001','X',Test 1')
but it become :
ChangeRPLocStatus(2,1,'1160001','1160001','X','Test" 1')=""
I am guessing it is because onclick=ChangeRPLocStatus(2,1,'1160001','1160001','X','Test 1') doesn't have quotes around the js method call. Try this?
onclick=\"ChangeRPLocStatus(2,1,'1160001','1160001','X','Test 1')\"
Also, a little tip, did you get the output from the actual source (Ctrl + U in chrome) or via Dev Tools or Firebug, they can be different an cause confusion.
This question is specifically for getOrgChart.js.
I am trying to add Onclick function for the Anchor tag in getOrgChart like below but getting issues
document.getElementsByClassName("get-prev-page").addEventListener('click', myFunction, false);
I try to change anchor tag in OrgChart JS file it self at INNERHTML value ..
<a title="previous page" class="get-prev-page" href="#" onclick="myFunction()">
but again it generates
<a title="previous page" class="get-prev-page" href="javascript:void(0)">
Please let me know what I am missing here. Thanks.
Turning a caption into a link doesn't work in Lightbox 2.51 downloaded from here
Here is the code:
<a href="images/examples/image-1.jpg" rel="lightbox"
title="<a target='_self' href='http://www.google.com'>Google</a>">
<img src="images/examples/thumb-1.jpg" alt="" />
</a>
What should I do?
Thanks :)
I found a solution for this problem in the lightbox.js.
You must edit the if case, adding the else condition that avoid always return false when you click in the div "lightbox" .
$lightbox.hide().on('click', function(e) {
if ($(e.target).attr('id') === 'lightbox') {
_this.end();
return false;
}
else { // HERE
return true;
}
});
I found what I think is a better solution than those listed above using Lightbox 2 version 2.6. On line 252 of lightbox.js (unminified), you'll see this line which adds the caption:
this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
Once the caption is added, you can register the click event and force the browser to follow any link in the caption by adding onto the chain like this:
this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast').find('a').on('click', function() { location.href = $(this).attr('href') });
I've initiated a pull request with this change so you can follow the status and any further discussions there.
Try using javascript in tag
onClick="window.location.href='http://www.google.com'"
Sample
<a href="images/examples/image-1.jpg" rel="lightbox"
title="<a target='_self' onClick="window.location.href='http://www.google.com'" href='http://www.google.com'>Google</a>">
<img src="images/examples/thumb-1.jpg" alt="" />
</a>
I have been unable to get any of the answers here to work for me. However, I have found that Slimbox2 does work and is very straightforward to swap as it uses the same syntax.
How could I correctly use the following?
{ bool submitter = value; }
...
#(submitter ? "" : #"<a href=""" + Url.Action(actionName, "Queue") + #""">")
<div>
...
</div>
#(submitter ? "" : "</a>")
My error is that the anchor tag definition is being outputed like it should be in a HTML code right to the web browser and instead of seeing a link around the <div> I see the <a href="... etc.
Why?
If you don't want that encoded, then you need to use the Raw extension method:
#Html.Raw(submitter ? "" : #"<a href=""" + Url.Action(actionName, "Queue") + #""">")
<div>
...
</div>
#Html.Raw(submitter ? "" : "</a>")
This is because you cannot put block level elements, like div, inside inline elements like a, unless you use HTML5. I guess from your description you aren't.
If you're checking in a browser DOM inspector, you will see your code looks something like this:
<div></div>
<div></div>
<a></a>
The alternative is to change your div to span and set display: block on it in CSS if you require.
Also, that kind of logic would be better placed in a ViewModel.
Solution that I've: found
#(new MvcHtmlString(#"blah blah"))