It's not clear what the proper syntax should be, and i tried some examples already but with no luck, this is my current button code that working and i need it to stay as a button when clicked open the action in new window/ new tab
<input type="button" title="Read" value="#T("Account.DownloadableProducts.Read")" onclick="location.href='#Url.Action("GetDownload", "Download", new { orderItemId = Model.DownloadMappingIds[product.Id].guid })'" />
thanks
you can do this using javascript function
<input type="button" value="MyButton" onclick="myfunction(this)"
data-myurl="#Url.Action("aa", "bb", new { id=#id})" />
<script>
function myfunction(e)
{
var url = $(e).data('myurl');
var popupWindow = window.open(url,title,'scrollbars=1,height=650,width=1050');
}
</script>
I have been struggling with this for a while, the solution was to, instead of target="_blank", you should use formtarget="_blank".
Thanks!
I'm struggling to read your question and code but to open new windows, the following code is used:
target = "_blank"
Is it possible to tidy your question up a bit and then I'll be able to assist you further.
Related
I am trying to use materialize tool tip for the first time using the example shown on its website. However, the tool tip is not showing up. What am I missing? Here is the link to the fiddle : https://jsfiddle.net/L013uvms/5/
<textarea id="causative_micro_organisms" class="materialize-textarea tooltipped" data-position="top" data-tooltip="I am a tooltip" required="" aria-required="true"></textarea>
<label for="causative_micro_organisms">What are the LIKELY causative Micro-organisms?</label>
I have also initialized the tool-tip
$(document).ready(function() {
$('select').formSelect();
$('.tooltipped').tooltip();
})
as docs of materialize website add these before document ready
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, options);
});
related link https://materializecss.com/tooltips.html
I'm experimenting with ZAF V2 and ran into some issues, I'm using the app scaffolding at: https://github.com/zendesk/app_scaffold. I've been looking at documentation and tutorials the last few days with no luck.
I have two files:
form.hdbs
<form id="myForm">
<label for="name" class="sr-only">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
<button class="btn" id="sendBtn">Submit</button>
</form>
Hello {{name}}
and index.js:
import ZAFClient from 'zendesk_app_framework_sdk';
import View from 'view';
var client = ZAFClient.init();
const view = new View();
view.switchTo('form');
$('#sendBtn').on('click', function (e) {
e.preventDefault();
var name = $("#name").val();
view.switchTo('form', {
name: name
});
});
The first time I run the app and type a name / submit, the view reloads and the message shows Hello xxx, the second time I type in a name and hit submit, the app goes blank, no errors in console.
Has anyone run into this issue?
Any insight is greatly appreciated.
Likely what happened is, the click event fired which rendered the page as you would expect but then the form submits to an empty page. You'd need to avoid the form rendering as well.
This is a "fancy hello world" style app. Most probably once you start actually building a useful app you won't build it like this anyway :)
I need to preview an image prior to submitting a form.
I work with Rails 3 and needs something that is browser compatible.
Any ideas how I can achieve that?
So! :) The main idea is to use the FileReader Javascript Class, which is really handy for what you need to do.
You just have to listen to the "change" event on your file input and then call a method that will use the "readAsDataURL()" method of the FileReader class. Then you just have to fill the source of a "preview img tag" with the returned result of the method...
I've wrote you a simple jsFiddle that achieves what you want. You can see my code below:
<!-- HTML Code -->
<div class="upload-preview">
<img />
</div>
<input class="file" name="logo" type="file">
//JS File
$(document).ready(function(){
var preview = $(".upload-preview img");
$(".file").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.attr("src", image_base64);
};
reader.readAsDataURL(file);
});
});
And in the Mozilla Documentation, you have another example (surely more robust). This solution should work with Safari (version 6.0+).
This is the only way I know to preview an image prior to submitting a form, but I think it is quite a common way. Of course it has nothing to do with Ruby On Rails as we only use Javascript here... It would be impossible to do it using Rails only as you would have to upload the image before rendering it. (As Rails is server side, I think you perfectly understand why. :) )
HTML:
<input type="file">
<div id="image_preview"></div>
JS (require jquery):
$(document).ready(function(){
$('input[type="file"]').change(function(){
var image = window.URL.createObjectURL(this.files[0]);
$("#image_preview").css("background-image", "url(" + image + ")");
});
});
I have tried all the options i found on the forum, but could not get it to work.
I even tried click event but that is also not getting called.
I wonder what is wrong with my code.
<script type="text/javascript">`enter code here`
$('#test.role.list').change(function(){
alert("here");
});
<div>
<form:select id="test.role.list" path="name">
<form:option value="none" label="none"/>
<form:option value="my none" label="none"/>
</form:select>
</div>
I have a list of permissions which are keys from the messageresource properties file, so the same thing i am using as id as well. The reason it is not working is correct as mentioned by the Lee. It considers the dots as different properties of the element with id "test" which is first string before dot and the next string as probably class. So i used the onchange event as
var Ele = document.geteElementByID("test.role.list");
ele.onchange = function(){
alert("here");
}
it is working fine now.
Yes the problesms are with dots in id.
You can use it as below,
$('#test\\.role\\.list').change(function(){
alert("here");
});
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.