We are currently trying to implement a slider into the e-commerce software Volusion.
We would like to be able to port in several products including their name, price and picture dynamically as we want the information to change if a price changes.
I was on Volusion help chat with several Reps and one told me to use a CSV file, which does us no good due to having to download it every time a product changes. I did some digging of my own and found that Volusion allows us to use a URL to get some XML information back.
If anybody would be able to help being able to parse the information so I can get it setup in the slider I'd be grateful. I have provided the code below.
Thanks!
URL Example:
http://www.companyname.com/net/WebService.aspx?Login=usr#companyname.com&EncryptedPassword=xxxx&EDI_Name=Generic\Products&SELECT_Columns=p.ProductName,pe.ProductPrice
XML Output Example:
<xmldata>
<Products>
<ProductName>ABC Widget</ProductName>
<ProductPrice>4445545</ProductPrice>
</Products>
<Products>
<ProductName>XYZ Widget</ProductName>
<ProductPrice>99494</ProductPrice>
</Products>
</xmldata>
HTML:
<img class="arrow" src="vspfiles/templates/default/images/arrow-left.png">
<div class="product">
<img src="vspfiles/templates/default/images/product-1.jpg">
<h4>Product Title and description</h4>
<h5>$00.00</h5>
</div>
<div class="product">
<img src="vspfiles/templates/default/images/product-1.jpg">
<h4>Product Title and description</h4>
<h5>$00.00</h5>
</div>
<div class="product">
<img src="vspfiles/templates/default/images/product-1.jpg">
<h4>Product Title and description</h4>
<h5>$00.00</h5>
</div>
<div class="product">
<img src="vspfiles/templates/default/images/product-1.jpg">
<h4>Product Title and description</h4>
<h5>$00.00</h5>
</div>
<img class="arrow" src="vspfiles/templates/default/images/arrow-right.png">
Javascript:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "Insert URL",
dataType: "xml",
success: function (xml) {
$(xml).find('Products').each(function(){
var $p = $(this);
var pId = $p.find('ProductId').text();
var html = 'Testing: ' + pId + '<br />';
$('#output').append($(html));
});
}
});
});
Related
I have the following code which loops through a list of countries and creates a href links
<div class="container" th:each="country: ${countryList}">
<a th:href="${country.countryAbbr}"><div clss="row" th:text="${country.country}"></div></a>
</div>
The current page url is "localhost:8080/directory", and the generated url is showing as
"localhost:8080/us"
How can I make the url show as "localhost:8080/directory/us"
I want "us" to be added to the current url of the page.
Try create the following code in your Controller class.
#RequestMapping(value="/", method=RequestMethod.GET)
public String rootGet() {
return "redirect:/directory";
}
You can use ServletUriComponentsBuilder:
<div th:with="urlBuilder=${T(org.springframework.web.servlet.support.ServletUriComponentsBuilder)}"
class="container" th:each="country: ${countryList}">
<a th:href="${urlBuilder.fromCurrentRequest().path(${country.countryAbbr}).toUriString()}">
<div clss="row" th:text="${country.country}"></div>
</a>
</div>
Give a try to this one
<div class="container" th:each="country: ${countryList}">
<a th:href="#{${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>
Using # usually resolves the default context but I am not aware of your environment.
For example, if you had Tomcat .war file, and your application would be hosted at localhost:8080/myApp, you would want result /myApp/us rather then /us. # would do that trick.
If above is not relevant for you, use this one:
<div class="container" th:each="country: ${countryList}">
<a th:href="#{'/directory/' + ${country.countryAbbr}}"><div clss="row" th:text="${country.country}"></div></a>
</div>
<div>
<div class="col-md-4">
<h3 class="textStrong">Latest Tweets</h3>
<a class="twitter-timeline" href="https://twitter.com/RFUK">Tweets by RFUK </a></div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<h2>News Feeds</h2>
#{
var news = new List<Piranha.Entities.Post>();
using (var db = new Piranha.DataContext()) {
news = db.Posts
.Include(p => p.CreatedBy)
.Where(p => p.Template.Name == "News Post Types")
.OrderByDescending(p => p.Published)
.Take(4).ToList();
}
}
#foreach (var post in news) {
<div class="post">
<h2>#post.Title</h2>
<p class="meta">Published #post.Published.Value.ToString("yyyy-MM-dd") by #post.CreatedBy.Firstname</p>
<p>#post.Excerpt</p>
<img src="#post.Attachments">
</div>
I working with posts. I have this code to work with.... Works really well I might add.. However the attached image I wish to display with the post. How can I do that?
<img src="#post.Attachments">
It doesn't appear to work any suggestions
on how I sort what I need to do?
Like #andreasnico pointed out Attachments is a collection of referenced media asset id's. If you want to display the first attachment (assuming you know it's an image) you'd probably do like this.
#foreach (var post in news) {
<div class="post">
<h2>#post.Title</h2>
<p class="meta">Published #post.Published.Value.ToString("yyyy-MM-dd") by #post.CreatedBy.Firstname</p>
<p>#post.Excerpt</p>
#if (post.Attachments.Count > 0) {
<img src="#UI.Content(post.Attachments[0])">
}
</div>
}
This would get the content URL for the first attachment and use it as the source to the image. Note that you can also scale & crop images for use in lists like this with:
<img src="#UI.Content(post.Attachments[0], 300, 100)">
This would scale & crop the image to be 300px wide & 100px high. You can read more about this here: http://piranhacms.org/docs/api-reference/ui-helper
Also if the page displaying the post list is controlled by the CMS and has a page type I'd suggest you look into adding either a PostRegion or PostModelRegion to that page. These region automatically loads a collection of post into the page model, you can specify the amount, sort order & some other stuff. This will simplify you reusing the page type but for example changing which type of post to display for different page instances.
Regards
Håkan
<%= f.radio_button :newCustomer, "Male",:value=>'NewCustomer',:checked=>true%>
`<%= f.radio_button :customer, "Female",:value=>'Customer'%>`
<div id="first"></div>
<div id="second"></div>
I am new in rails.I have two radiobuttons and two div.When i click NewCustomer i want to hide first div and when i click on the Customer show the hidden div.I want to do this in only Ruby code.Is there any radiobutton click event like in .net
You can achieve it by Javascript / JQuery / Ajax in rails:
Example:
HTML
<input type="radio" name='thing' value='valuable' data-id="female" />
<input type="radio" name='thing' value='valuable' data-id="male" />
<hr />
<div id="female" class="none">Div for Male</div>
<div id="male" class="none">Div for Female</div>
CSS:
.none {display:none;}
JQuery
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
Working Fiddle
Pipeline
To further Gagan's answer, you'll want to include your Javascript in the asset_pipeline:
#app/assets/javascripts/application.js
$(document).on("change", ".radio", function(){
// gagan's code here
});
--
Turbolinks
Something to note is the importance of the javascript "delegation" - when you use Rails applications with Turbolinks.
Because of the way in which Turbolinks will just update the <body> tag of your page, many JS event bindings will actually become invalid, preventing your application from loading correctly.
To fix this, you need to be able to either delegate your DOM events from a "container" element (typically document), or by encapsulating your code in Turbolinks events like so:
#app/assets/javascripts/application.js
var change = function() {
$(".radio").on("change", function(){
//Stuff here
});
};
$(document).on("page:load ready", change);
I got an URL. There is a form in that URL and I know it's name and the form action.
E.g:
url:
www.abc.com/123.html
form:
<form action="POST.php" method="post" name="form">
<input id="id" name="name" type="text">
</form>
My question is how do I post this form and get the response? It seems some functions in PHP like fget and fputs have a security violation and i don't want to use them. I have tried several answers but they didn't work well. Any programming language is fine.
POST is, to the contrary GET, the more secure way to get data to the Server. If you want the "answer" from the server displayed in the same page you go with AJAX.
http://www.w3schools.com/jquery/ajax_ajax.asp
Here is a possible jQuery solution:
HTML:
<form action="POST.php" method="post" name="form">
<input id="id" name="name" type="text">
<button id="submit">submit</button>
</form>
<div id="serverresponse"></div>
PHP:
<?php
echo("Name is: " . $_POST['name']);
?>
jQuery:
$("#submit").click(function(){
$.ajax({
type: "POST",
url: "POST.php",
data: $('#id').serialize(),
async: false,
success: function(response){
$("#serverresponse").html(response);
},
error: function(text){
$("#serverresponse").html(response);
}
});
return false;
});
This sends the content of the "name" input to the POST.php witch is just returning it and the response is displayed in the "serverresponse" div.
But you have to make sure jQuery is loaded.
I am trying to do the following:
The object I give to the Viewpage has a list, I do a foreach in the HTML and I create a number of components. Now, I want the IDs of those components to somehow be linked to the object from the List.
(The reason I am trying to do this is because I want to show a button, when they press that button the shown content will change and they should see something else, I will use javascript to achieve this)
Therefor I am trying to make the id of those components dynamic, by for example stating
id="button <%= item.id%>" however this does not seem to work. I have searched alot on google but I haven't found a solution yet which is why I turn to you guys.
I'll link my code as well, I deleted some of the parts that were unnecessary (but added the javascript):
<script type="text/javascript">
function AlterPanel(thePanel) {
var panel = document.getElementById("region"+thePanel);
panel.style.display = 'block';
var button = document.getElementById("button"+thePanel);
button.style.display = 'none';}
</script>
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a id="button<%= team.Number %>" onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div Visible="false" id='region<%= team.Number %>' runat="server">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I eagerly await a reply and thank you in advance.
I guess your Queastion is:
-you have some "button DropDownList" pair, button is visiable, DropDownList is invisible, now if user click the button then DropDownList will showup.
OK, now your View maybe :
<%foreach (TeamDTO team in Model.List.Teams)
{ %>
<a onclick="AlterPanel(<% team.Number%>)">
Add member</a>
<div id="region<%= team.Number %>" style="display:none">
Please select one:
<%: Html.DropDownListFor(V => V.memberID, new SelectList(Model.members, "ID","Name")) %>
</div>
<% } %>
I use JQuery in javascript part like this:
<script type="text/javascript">
function AlterPanel(thePanel) {
$("#region" + thePanel.toString()).css("display", "block");
}
</script>
Don't forget include the following file in View():
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script>
if the answer is not what you want, let mt know and I can help you~ :)