I am working on an application which is developed in ruby and haml, now I need to show tooltip on elements and tooltip will contain image as well so this tooltip will be an HTML.
my html sctructure for tooltip is like
<li><a href="www.example.com" class='empty-space-tooltip' title='<img src="images/info.png" width="300" height="150" alt="Info" />'>
<img src="images/info.png" width="16" height="16" alt="Info" /></a>
<a href="www.example.com" class="main-link" title='<img src="images/info.png" width="300" height="150" alt="Info" />'><span>Title</span></a></li>
How to write in in HAML
I am trying following code
%li
%a{:href => "#/", :title => '%img{alt: "", height: "150", src: "images/info.png", width: "300"}/'} Send
%a{:href => "#/", :title => '%img{alt: "", height: "150", src: "images/info.png", width: "300"}/'} Title
Using htmltohaml.com and removing all backslashes:
%li
%a.empty-space-tooltip{:href => "www.example.com", :title => "<img src="images/info.png" width="300" height="150" alt="Info" />"}
%img{:alt => "Info", :height => "16", :src => "images/info.png", :width => "16"}/
%a.main-link{:href => "www.example.com", :title => "<img src="images/info.png" width="300" height="150" alt="Info" />"}
%span Title
Related
I am working on rails 3 and using ajax to load a form, there is a country drop down that has values thats not loading properly. Its loading html entities of the "<" and ">" sign like "<" & ">".
This is how i am rendering the partial that has the countries list
$j('#insert_to').append("<%= escape_javascript(render :partial => 'verified_address', :locals => { :item => #item, :original_item => nil, :update_alert => false }).html_safe %>");
The output i am getting is
<span id=\"ship_to_country_container\">\n
<select id
=\"item_ship_to_country\" name=\"item[ship_to_country]\"><option value=\"\">-- Select --<\/option>\n
<option value="" disabled="disabled">-------------</option>\n<option
value="Afghanistan">Afghanistan</option>\n<option value="Aland Islands"
;>Aland Islands</option>\n<option value="Albania">Albania</option>\n<
;option value="Algeria">Algeria</option>\n<option value="American Samoa"
;>American Samoa</option>\n<option value="Andorra">Andorra</option>\n
<option value="Angola">Angola</option>\n<option value="Anguilla">
;Anguilla</option>\n<option value="Antarctica">Antarctica</option>\n<option
value="Antigua And Barbuda">Antigua And Barbuda</option>\n<option value="
;Argentina">Argentina</option>\n<option value="Armenia">Armenia</option
>\n<option value="Aruba">Aruba</option>\n<option value="Australia"
;>Australia</option>\n<option value="Austria">Austria</option>\n<option
value="Azerbaijan">Azerbaijan</option>\n<option value="Bahamas">Bahamas
</option>\n<option value="Bahrain">Bahrain</option>\n<option value="
;Bangladesh">Bangladesh</option>\n<option value="Barbados">Barbados<
;/option>\n<option value="Belarus">Belarus</option>\n<option value="
;Belgium">Belgium</option>\n<option value="Belize">Belize</option>
;\n<option value="Benin">Benin</option>\n<
html entities are getting rendered and not the actual tags
1st call: $j.ajax({
url: "/items/validate_address",
type: 'POST',
beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $j('meta[name="csrf-token"]').attr('content'))},
data: data_address,
dataType: 'script'
});
this call the validate_address
<div id="verified_address" style="display:none">
<div id="verified_address_form" style="display:none;">
<%= form_for(item, :remote => true) do |f| %>
<%= render :partial => 'shipments/ship_to_address_form', :locals => {:f => f, :item => item}%>
<input type="hidden" name="update_alert" id="update_alert" value="<%= update_alert %>" />
<p><%= f.submit "Save", :style => 'width: 60px;' %> <%= link_to_function "Cancel", "$('verified_address_view','verified_address_form').invoke('toggle');$('order_address_id').style.position = '';$('order_address_id').style.zIndex = '';" %></p>
<% end %>
</div></div>
3rd Step: shipments/ship_to_address_form has the country dropdwon
<tr>
<td><label for="item_ship_to_country">Country</label></td>
<td>
<span id="ship_to_country_container">
<%= f.country_select :ship_to_country, {},{:selected => item.ship_to_country, :include_blank => '-- Select --'} %>
</span>
I figured out that the issue was the country_select call, i installed the gem country_select and the issue was resolved. Thanks for all your suggestions and help.
I want to add an image to a data grid column, I am using telerik grid for this, however I get the following error, its on Line 51:
Compiler Error Message: CS1525: Invalid expression term ')'
Source Error:
Line 49: column.Bound(o => o.HoursWorked).Title("Hours");
Line 50: column.Template(o =>
Line 51: {%>
Line 52: <img src="/Content/img/delete.png" alt="Delete" title="Delete"/>
Line 53: <%
Here is how I am trying to add an image to the column:
<div>
<%=Html.CustomGridFor("Hours", "WorkHours", "HoursWorked", GridOptions.EnableSelecting, Model).Columns(column =>
{
column.Bound(o => o.DateWorked).Title("Date").Width("65px");
column.Bound(o => o.Description).Title("Description").Width("120px");
column.Bound(o => o.HoursWorked).Title("Hours");
column.Template(o =>
{%>
<img src="/Content/img/delete.png" alt="Delete" title="Delete" onclick="javascript:deleteHours();" />
<%
}).Title("").ClientTemplate(
"<img src=\"/Content/img/delete.png\" alt=\"Delete\" title=\"Delete\"/>"
).Width(15);
}).HtmlAttributes(new { style = "width: 270px;" });
%>
</div>
Tried this too:
<div>
<%=Html.CustomGridFor("Hours", "WorkHours", "HoursWorked", GridOptions.EnableSelecting, Model).Columns(column =>
{
column.Bound(o => o.DateWorked).Title("Date").Width("65px");
column.Bound(o => o.Description).Title("Description").Width("120px");
column.Bound(o => o.HoursWorked).Title("Hours");
column.Template(o =>
{
%>
<img
alt="Delete"
src="/Content/img/delete.png"
/>
<%
});
</div>
Try to use this:
<div>
<%=Html.CustomGridFor("Hours", "WorkHours", "HoursWorked", GridOptions.EnableSelecting, Model).Columns(column =>
{
column.Bound(o => o.DateWorked).Title("Date").Width("65px");
column.Bound(o => o.Description).Title("Description").Width("120px");
column.Bound(o => o.HoursWorked).Title("Hours");
column.Template(o => string.Empty).Title("")
.ClientTemplate(
"<img src=\"/Content/img/delete.png\" alt=\"Delete\" title=\"Delete\"/>")
.Width(15);
}).HtmlAttributes(new { style = "width: 270px;" });
%>
</div>
Here i m passing only single param from telerik to javascript function. i need to pass another param also
<a href="javascript:void(0);" onclick="AddOdometer(<%: b.VehicleRepositoryId %>)"
title="ADDTrip" id="A1">Add Distance</a>
whole code for reference
<% Html.Telerik().Grid(Model.VehicleList)
.Name("VehiclesRepositoryGrid")
.Columns(colums =>
{
colums.Bound(b => b.TruckNumber).Title("Vehicle Number")
.FooterTemplate(() =>
{%>
Total:
<%})
.Width(100);
colums.Bound(b => b.Month);
colums.Bound(b => b.FuelType).Title("Fuel Type");
colums.Bound(b => b.TotalDistance).Title("Distance")
.FooterTemplate(() =>
{%>
<%= Model.VehicleList.Sum(v=>v.TotalDistance)%>
<%})
.Width(100);
colums.Bound(b => b.TotalFuel).Title("Fuel")
.FooterTemplate(() =>
{%>
<%= Model.VehicleList.Sum(v => v.TotalFuel)%>
<%})
.Width(100);
colums.Bound(b => b.Mileage);
colums.Template(b =>
{
%>
<% if (b.TotalDistance == 0)
{%>
<a href="javascript:void(0);" onclick="AddOdometer(<%: b.VehicleRepositoryId %>)"
title="ADDTrip" id="A1">Add Distance</a>
<%}
else
{ %>
<a href="javascript:void(0);" onclick="EditOdometer(<%: b.VehicleRepositoryId %>)"
title="Edit">
<img src="<%= ResolveUrl("~/Content/Images/Edit.gif")%>" alt="Edit" title="Edit"
class="vaM" /></a> | <a href="javascript:void(0);" onclick="DeleteOdometer(<%: b.VehicleRepositoryId %>)"
id="DeleteVehicle">
<img src="<%= ResolveUrl("~/Content/Images/Delete.gif")%>" alt="Delete" title="Delete"
class="vaM" /></a>
<% } %>
<%
}).Title("Actions")
.Width(100).HtmlAttributes(new { #class = "taC" });
})
.Groupable(settings => settings.Groups(groups =>
{
groups.Add(o => o.TruckNumber);
if (ViewData["Grouping"] != null)
{
groups.Add(o => o.Month);
}
}))
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable(sorting => sorting.Enabled(true))
.Pageable(paging => paging.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
.Footer(true)
.Render();
%>
Not sure what your question is, is this what you want to achieve?
<a href="javascript:void(0);"
onclick="AddOdometer(<%: b.VehicleRepositoryId %>, <%: b.SecondParam %>)"
title="ADDTrip" id="A1">Add Distance</a>
I am trying to pre-populate data to a token input field.
But nothing gets pre-populated in my edit view.
I have followed this railscast: http://railscasts.com/episodes/258-token-fields
My controller:
class Admin::TagsController < Admin::AdminController
layout 'admin'
def index
#title = 'asdsadas'
#kategoris = Tag.where("name like ?", "%#{params[:q]}%")
respond_to do |format|
format.html
format.json { render :json => #kategoris.map(&:attributes) }
end
end
end
My application.js:
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(function() {
$("#konkurrancer_tag_tokens").tokenInput("http://localhost:3000/admin/tags.json", {
crossDomain: false,
prePopulate: $("#konkurrancer_tag_tokens").data("pre"),
theme: "facebook"
});
});
My edit view:
<h1>Editing kategori</h1>
<%= simple_form_for(#konkurrancer, :url => {:action => 'update', :id => #konkurrancer.id }) do |f| %>
<%= f.input :tag_tokens, :label => 'Tags', "data-pre" => #konkurrancer.tags.map(&:attributes).to_json %>
<%= f.button :submit, :value => 'Edit konkurrence' %>
<% end %>
Token field output:
<div class="input string optional">
<label for="konkurrancer_tag_tokens" class="string optional"> Tags</label>
<ul class="token-input-list-facebook"><li class="token-input-input-token-facebook">
<input type="text" autocomplete="off" style="outline: medium none; width: 30px;">
<tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 13.3333px; font-family: MS Shell Dlg; font-weight: 400; letter-spacing: normal; white-space: nowrap;"></tester></li></ul>
<input type="text" size="50" name="konkurrancer[tag_tokens]" id="konkurrancer_tag_tokens" class="string optional" style="display: none;"></div>
Try wrapping your data-pre with input_html in your edit view:
:input_html => {"data-pre" => #konkurrancer.tags.map(&:attributes).to_json }
* You're using simple_form while the railscasts isn't.
I have an application where user can see a list of cells. For each cell the user can see two images of the cell as popup menu. The problem is that all images are downloaded when a list is selected and that makes my page very slow.
I would like that the image is downloaded only if mouse is rolled-over the link.
For information: I’m using DOM popup kit link text
Here the main page and link to popup menu
<div id="span_div">
<span id="cell_link_<%= #cell.cellid %>" class="popup_link" Popup.modal = true><%= #cell.cellname%>
<%= render :partial => 'cell_popup' %>
<%= javascript_tag "new Popup('cell_popup_#{#cell.cellid}','cell_link_#{#cell.cellid}')" %>
</span>
</div>
Here a partial for cell images
<div id="cell_popup_<%= #cell.cellid %>" class="popup popup_draghandle" style="display:none">
<table width="418" border="0">
<tr>
<td width="201" align="center" valign="top">Raw</td>
<td width="201" align="center" valign="top">Repaired</td>
</tr>
<tr>
<td align="center" valign="top">
<% if #full_report == true then%>
<%raw_morph = #raw_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
<%end%>
</td>
<td align="center" valign="top">
<%if #repaired == true then%>
<%repaired_morph = #repaired_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>
</td>
</tr>
<%end%>
</table>
Anyone have any idea to do that?
Essentially the idea is to create an on mouseover action for your span that loads the images with an AJAX request. We'll use a cache variable to ensure that you aren't making the same request multiple times in a for one page load.
The following assumes Prototype. I haven't time to test it, so don't expect a flawless example.
Most of the work is done by adding an on mouseover attribute to the span.
<span id="cell_link_<%= #cell.cellid %>" class="popup_link" Popup.modal = true
onmouseover="<%=remote_function(:update => "cell_popup_#{#cell.cellid}",
:url =>
popup_cell_url(#cell, :full_report => #full_report, :repaired => #repared),
:success => "cell_#{#cell.cellid}_loaded = true",
:conditions => "cell_#{#cell.cellid}_loaded == false") %>"
><%= #cell.cellname%>
Now to clean things up:
Move everything in the partial but the div to a view called cell. Fill the void with a generic Fetching images message.
So your partial now looks like:
<div id="cell_popup_<%= #cell.cellid %>" class="popup popup_draghandle" style="display:none">
Fetching images. Please stand by.
</div>
And your new view called popup looks like:
<table width="418" border="0">
<tr>
<td width="201" align="center" valign="top">Raw</td>
<td width="201" align="center" valign="top">Repaired</td>
</tr>
<tr>
<td align="center" valign="top">
<% if #full_report == true then%>
<%raw_morph = #raw_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer',:morph_id => raw_morph.morphologyid)%>" alt="" width="200" height="200"/>
<%end%>
</td>
<td align="center" valign="top">
<%if #repaired == true then%>
<%repaired_morph = #repaired_morph.last%>
<img src="<%= url_for(:action => 'jpegfile', :controller => 'neuronviewer', :morph_id => repaired_morph.morphologyid)%>" alt="" width="200" height="200"/>
<%end%>
</td>
</tr>
</table>
Now all that's left is to connect the controller to the new view and prepare it for AJAX.
Add a popup route responding to get for the cell controller.
map.resources :cells, :member => {:popup => :post}
Add the action to the CellsController
def popup
# sets #cell, #repaired, #full_report, #raw_morph,
# #repaired_morph and anything else needed by the popup view.
end