I am trying build a custom dojo 1.9 widget with template support. I need to pass text value and image (stored in POJO) into the widget when I do Instantiation.
I found some example from:
http://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html#quickstart-writingwidgets
there are some templates with text field and button that accept value by using data-dojo-attach-point. But I never find a template example accept image. Does any one have one full example meet my requirement?
<div class="${baseClass}" data-dojo-attach-point="focusNode"
data-dojo-attach-event="ondijitclick:_onClick"
role="menuitem" tabIndex="-1">
<div data-dojo-type="dijit/form/Button"
data-dojo-attach-point="buttonWidget">
My Button
</div>
<span data-dojo-attach-point="containerNode"></span>
</div>
Please help!!
The issue was fixed by myself.
Dojo Dialog and html5 configure tag was used. This way is a work around to support title and image caption, eventually have to wait for dojo LightBoxNano widget (probably 2.0 or newer version) to support image caption.
Dojo snippet code:
var theconfigure = "<figure><img src=\"data:"+returnData.fileType+";base64,"+returnData.fileData+"\" width=\"400\" height=\"300\">"+
"<figcaption>"+returnData.fileDesc+"</figcaption></figure>";
var myDialog = new dijit.Dialog({
title: returnData.relatedLocation,
content: theconfigure,
style: "width: 410px"
});
myDialog.show();
The result looks like:
Related
I am opening an MVC view in magnific
I need to show a title (caption) below the modal
But caption is only for image type but I am using Ajax type.
I have set the title attribute on both the hyperlink that I click to open the modal and the root element of the view.
But it never shows up.
How do I do display the title (fixed or dynamic from a grid)? I wonder why author forgot to add this feature?
hyperlink:
<a class="edit-list" title="Edit List!" href="/manage/editlist/100">Edit</a>
Root element of the target page:
<form id="ListEditForm" class="white-popup" title="Edit List" action="/manage/EditList/100">
..fields go here
</form>
I followed this post, but he has markup, I don't:
http://codepen.io/dimsemenov/pen/zjtbr
Initialization:
$('.edit-list').magnificPopup({
type: 'ajax',
midClick: true,
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title');
}
}
});
This has been solved. I need to put the right container in the right place to render the title. The plugin won't drop any element to show the title.
Searching from many forums i got the code to hover the mouse over an element
.I want to hover the mouse over a thumbnail image.
i put html element ".thumbnail" as class inside find_element method .I dont know which parameter should i place inside find_element method?
My html element is given below.
<a class="thumbnail">
<span class="badgeFeatured">featured</span>
<img alt="" src="https://do3dm75n3e02m.cloudfront.net/arts/preview_3ds/14/original/open-uri20121128-5897-wh90rf_1354148717.png20121128-5897-194vld7-0?1354148717">
<p>Flourish Happy Birthday</p>
</a>
el = driver.find_element(:class => "thumbnail")
driver.move_to.(el).perform
Due to this problem it does not move mouse over the thumbnail image.
In Webdriver(java), we can perform mouse over action like this:
Actions actions = new Actions(driver);
WebElement imageSpan = driver.findElement(By.className("badgeFeatured"));
actions.moveToElement(imageSpan);
I want to create in ASP.NET MVC 3 a link (in Ajax) with an image as background and no text. I'm using this method that creates an ajax link manually:
<div class="icon icon_like"></div>
The div tag calls the class "icon icon_like" of CSS that will import an image.
My question, is the following:
There is no other way (maybe a helper) to being able to do this easily?
UPDATE:
gdoron redirected me to a good link but it was not quite what I wanted (no Ajax support). For me, the first torm's answer is better, I only made some few changes to make it universal:
First in the helper it supports now a routeValues and changing the section that is to be updated
#helper AjaxImageLink(string action, Object routeValues, string icon_name, string sectionToUpdate = "#result"){
<div class="icon #icon_name"></div>
}
About the use of that helper I'm using for the example in question:
#AjaxImageLink("Like", new { controller = "Article", like = 1, id = Model.Item1.ID }, "icon_like")
And it works as it should.
To be compliant with DRY principle you can easily wrap your link structure in an inline helper like :
#helper AjaxLink(string action, string controller, string icon_name){
<div class="icon #icon_name"></div>
}
other way would be to take ajax portion to unobtrusive reusable jquery binding :
</div>
$('.ajaxLink').click(function (e) {
e.preventDefault();
$("#result").load($(this).attr("href");
});
You can see this question.
There are many others examples for it in the internet just google "asp.net mvc image action link"
use ajax.actionlink inside html.Raw and replace ajax.actionlink text with image tag.
simple one line code.
#Html.Raw(#Ajax.ActionLink("[replacetext]", "Action", "Controller", new AjaxOptions { HttpMethod="Post"}).ToHtmlString().Replace("[replacetext]", ""))
Is there a JQuery plugin that allows me to 'unhide' a form by after clicking a link? Like I have an invite link that can take me to a one text field form for an email address but I want this form to just drop down (pushing the rest of the content down also) and shows the form to submit the email. If you guys can think of a JQuery plugin that lets me do this, please let me know
Edit:
So I did this
<div class='add-link'>
<div id='invite_link'><a href=''>Invite User</a></div>
<div id='invitation_form'>
<form>
<input type='text'/>
</form>
</div>
</div>
and my jquery looks like
<script type="text/javascript">
$(function()
{
$("table").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
$('#invitation_form').hide();
}
);
$('#invite_link').click(function() {
$('#invitation_form').slideDown();
});
Do you guys see any error that causes the form not to slide down. It hides the form when the page loads but when I click the link it is not sliding down.
$('a.mylink').click(function() {
$('#MyForm').slideDown();
});
I don't think you need a jQuery plugin for this. The base jQuery library should be sufficient.
$('#showFormLink').click(function () {
$('#form').slideDown();
});
If you're looking for animation, that's possible as well by passing in a duration argument to slideDown.
Take a look at the jQuery show documentation.
I have a complex form that has a static section and one that can have from 0 to many divs that containing radio buttons, textfields and textareas.
I'm wondering what's the best way to add elements to the section that has a variable amount of form inputs. I have a working solution, but it's probably not the best:
I use javascript to add a chunk of html code and append it to the div containing the variable amount of input fields. In the code sample below, my javascript code would do something like
Javascript
document.getElementId('dynamic_form_stuff').innerHTML += "<div id='element3'>Form stuff</div>";
HTML
<form>
<div id="static_form_stuff">
form fields
</div>
<div id="dynamic_form_stuff">
<div id="element1">
Radio buttons stuff
Text field stuff
Text area stuff
</div>
<div id="element2">
Radio buttons stuff
Text field stuff
Text area stuff
</div>
</div>
</form>
I think this largely depends on what you are doing elsewhere, and how many items you are adding, as well as how you want to add event handlers.
I tend to find it easier to use the DOM methods if I need to add event handlers, but if you are just adding to a form with a submit button, then using innerHTML is faster, as shown here: http://www.quirksmode.org/dom/innerhtml.html.
I would personally do something like:
var elem = document.getElementId('dynamic_form_stuff');
var div = document.createElement('div'); // create element
div.setAttribute('class', 'myclass'); // define attributes
elem.appendChild(div);
// and/or more code.....
This gives me more control in adding attributes and style there.