I'm trying to apply a jQuery etalage in my Rails 5 app.
I copied all the assets file to 'app/assets' folder. I removed the CSS and JavaScripts links from html header file and my 'css' working just fine but JavaScripts not working. JavaScripts only works if I add the link in the body section of my 'html.erb' file.
My 'html.erb' file is below: `
<!DOCTYPE html>
<html>
<head>
<title>Pedal House | Single :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<!--webfont-->
<!-- dropdown -->
<!--js-->
</head>
<body>
<!--banner-->
<script>
$(function () {
$("#slider").responsiveSlides({
auto: false,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
<div class="banner-bg banner-sec">
<div class="container">
<div class="header">
<div class="logo">
<img src="assets/logo.png" alt=""/>
</div>
<div class="top-nav">
<label class="mobile_menu" for="mobile_menu">
<span>Menu</span>
</label>
<input id="mobile_menu" type="checkbox">
<ul class="nav">
<li class="dropdown1"><a>BIKES</a>
<ul class="dropdown2">
<li>NEW BIKES</li>
<li>VELOCE</li>
<li>TREK</li>
<li>PHOENIX</li>
<li>GIANT</li>
<li>GHOST</li>
<li>BINACHI</li>
<li>CORE</li>
<li>MUSTANG</li>
<li>OTHERS</li>
</ul>
</li>
<li class="dropdown1">KIDS ITEM
</li>
<li class="dropdown1">PARTS
</li>
<li class="dropdown1">ACCESSORIES
</li>
<li class="dropdown1">ABOUT US
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--/banner-->
<div class="product">
<div class="container">
<div class="ctnt-bar cntnt">
<div class="content-bar">
<div class="single-page">
<!--Include the Etalage files-->
<script src="assets/jquery.etalage.min.js"></script>
<script>
jQuery(document).ready(function($){
$('#etalage').etalage({
thumb_image_width: 400,
thumb_image_height: 400,
source_image_width: 800,
source_image_height: 1000,
show_hint: true,
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
});
</script>
<!--//details-product-slider-->
<div class="details-left-slider">
<div class="grid images_3_of_2">
<ul id="etalage">
<li>
<a href="optionallink.html">
<img class="etalage_thumb_image" src="assets/m1.jpg" class="img-responsive" />
<img class="etalage_source_image" src="assets/m1.jpg" class="img-responsive" title="" />
</a>
</li>
</ul>
</div>
</div>
<div class="details-left-info">
<h3>SCOTT SPARK</h3>
<h4></h4>
<p><label>$</label> 300 </p>
<h5>Description ::</h5>
<p class="desc">The first mechanically-propelled, two-wheeled vehicle may have been built by Kirkpatrick MacMillan, a Scottish blacksmith, in 1839, although the claim is often disputed. He is also associated with the first recorded instance of a cycling traffic offense, when a Glasgow newspaper in 1842 reported an accident in which an anonymous "gentleman from Dumfries-shire... bestride a velocipede... of ingenious design" knocked over a little girl in Glasgow and was fined five
The word bicycle first appeared in English print in The Daily News in 1868, to describe "Bysicles and trysicles" on the "Champs Elysées and Bois de Boulogne.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<!---->
<div class="footer">
<div class="container wrap">
<div class="logo2">
<p class="copyright">2017 | Developed By Hussain & Zaman</p>
</div>
<div class="ftr-menu">
<ul>
<li>BIKES</li>
<li>KIDS ITEM</li>
<li>PARTS</li>
<li>ACCESSORIES</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<!---->
</body>
</html>
My 'application.js' file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require jquery.easydropdown
//= require jquery.etalage.min
//= require jquery.min
//= require responsiveslides.min
//= require rails-ujs
//= require turbolinks
//= require_tree .
`
I'm new with rails and I spent a lot of time to fix this problem. I tried so many ways but none worked. Some expert user please help me to fix this issue. Thanks in advance.
Have you added gem 'jquery-rails', '~> 4.3', '>= 4.3.1' to your Gemfile? In Rails 5 jquery does not come by default.
Related
I am using scrapy shell just to make sure my selectors for my spider are correct. I am able to get all other sections I need except this one p tag that contains the cross ref part numbers. I am scraping from this particular page here
When I try response.css('div.col-1-2-2' > div.rpr-help m-chm > div > p::text').extract() it returns blank
When I try response.css('div > p::text').extract() the results have the section I am looking for plus a bunch of data I do not want.
I have a feeling this is going to be a super easy answer, but I have no idea what I am missing here
This is a snippet of the html section of the page I am trying to scrape, the last 'p' tag starting with Part Number
<div class="col-1-2-2">
<div id="img-detail" style="text-align:center;">
<div id="img-detail-main">
<a id="ctl00_cphMain_imgenlarge" rel="nofollow" href="/detail-img.aspx?id=3094537&i=" class="cboxElement"><img id="ctl00_cphMain_iMain" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_01_l.jpg" style="border-width:0px;outline:none;">
<div class="img-overlay" style="display:none;"><img src="/images/play.png" style="height:107px;"></div>
<div id="main-text-overlay" style="display:none;"></div>
</a>
</div>
<div class="img-help">Click image to open expanded view</div>
<div id="img-detail-thumb">
<div class="a-button a-active">
<img id="ctl00_cphMain_rImgTh_ctl01_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_01_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl02_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_02_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl03_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_03_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl04_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_04_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl05_imgTh" src="https://cdn.appliancepartspros.com/images/product/cache/whirlpool-clutch-assembly-285785-ap3094537_05_tt.jpg" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl06_imgTh" class="diagram" data-dcmt="Clutch assembly AP3094537 is number 5 on this diagram. This is to give you an idea of the appearance and the location of the part. Your appliance model may be slightly different." src="https://483cda5f439700fab03b-6195bc77e724f6265ff507b1dc015ddb.ssl.cf1.rackcdn.com/0029384112_4.gif" style="border-width:0px;">
</div>
<div class="a-button">
<img id="ctl00_cphMain_rImgTh_ctl07_imgTh" class="video" src="https://img.youtube.com/vi/7RS1l6t8efc/hqdefault.jpg" style="border-width:0px;">
<div class="img-overlay"><img src="/images/play.png"></div>
</div>
</div>
</div>
<div class="rpr-help m-chm">
<div class="header">
<h2 class="h6">Repair Help</h2>
</div><!-- /end .header -->
<div class="inner m-bsc">
<ul>
<li>Repair Video</li>
<li>Repair Q&A</li>
</ul>
</div>
<div>
<br>
<span class="h4">Cross Reference Information</span><br>
<p>Part Number 285785 (AP3094537) replaces 2670, 285331, 285380, 285422, 285540, 285761, 285785VP, 3350015, 3350114, 3350115, 3351342, 3351343, 387888, 388948, 388949, 3946794, 3946847, 3951311, 3951312, 62699, 63174, 63765, 64176, AH334641, EA334641, J27-662, LP326, PS334641.
<br>
</p>
</div>
</div>
</div>
Hope this works
response.xpath('//div[#class="col-1-2-2"]//p/text()').extract_first()
You can try this also, response.xpath('(//div[#class="rpr-help m-chm"]//p//text())[1]').get()
I am working on a very basic weather app to learn MVC architecture. However, I am having an issue with my page reloading once I submit the form and then data from that submission not coming over into the next newly rendered page.
Most of my logic for my page is in my controller.js file. In my view I have a form where the user fills in a city, and then my getWeather function makes an API call where it gets the city's temperature. From there my controller.js should re-render the index page, but pass in the string It is currently ${temp} °F in ${city}.
At least, that's how its supposed to work. Unfortunately when the page reloads the weather const is null and I then have my function catch the error and give me the message "that city is not available".
I have tested my API to make sure that it is correctly retrieving the data, by console.logging the res object, and I am getting that perfectly.
Also, I should note I bring in Weather function from my model. The only thing it does is test to see if the user inputted anything into the form and if they didn't it creates the error "Please enter the name of the city." I don't think it is the source of my issue or the fix for it.
I guess what I'm looking for is a way to prevent my page from reloading when I submit the form, or a way to not lose the data in my function when the page reloads. Any help would be greatly appreciated!
const axios = require('axios')
const API_KEY= "8d130a4fe5369b01d1fe629bccbe0926";
const Weather = require("../model/Weather")
exports.renderHomePAge = (req, res) => {
res.render("index")
}
exports.getWeather = (req, res, ) => {
const city = req.body.city
const url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=imperial`
const weather = new Weather(city)
weather.validateUserInput()
if(weather.errors.length){
res.render("index", {error: weather.errors.toString()})
} else {
axios.get(url)
.then((response)=>{
// console.log(response)
const {temp} = response.data.main
const {city} = response.data.city
res.render("index", {
weather: `It is currently ${temp} °F in ${city}.`
})
})
.catch((err) =>{
console.log(err)
res.render("index", {
weather: `That city is not avaible`
})
})
}
}
exports.renderAboutPAge = (req, res) => {
res.render("About")
}
I don't think its neccessary for this issue, but just incase here is my index.hbs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Weather | Home</title>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
</ul>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center main">
<div>
<h1 class="mt-5">MVC Weather Finder</h1>
<p class="lead">Enter the name of the city and press search!</p>
</div>
<div>
<form action="/" method="post">
<input name="city" type="text">
<button>Go!</button>
</form>
<div class="mt-3">
{{weather}}
{{error}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It turns out I was pulling data from my response object incorrectly and that was causing the issue.
I am looking to integrate ckeditor-full 4.14 into a razor page. I have downloaded the NuGet package into my project in Visual Studio. I cannot find any documentation on how to implement it into a .razor page. Can anyone help?
Error Message
In razor page,we add scripts in #section Scripts,you can add the script liking this:
<div>
<textarea id="textarea111"></textarea>
</div>
#section Scripts {
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script type="text/javascript">
var ckeditor;
$(function () {
ckeditor = CKEDITOR.replace("textarea111");
});
</script>
}
And this is my result of the code.
Update:
In blazor pages:
Firstly, You can install from NuGet using the following command:
Install-Package Blazored.TextEditor
Next,in Pages/_Host.cshtml :
Add the following CSS in the head tag
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
Then add the JS script at the bottom of the page using the following script tag.
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script>
<script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script>
And this is my page：
#inherits LayoutComponentBase
#using Blazored.TextEditor
<div>
<BlazoredTextEditor>
<ToolbarContent>
<select class="ql-header">
<option selected=""></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</ToolbarContent>
<EditorContent>
<br />
<h4>You can edit the text.</h4>
</EditorContent>
</BlazoredTextEditor>
</div>
When opening a dialog, it is shown more than once
Tried to prevent double opening by checking if a dialog is already open
if (!this.dialogService.hasOpenDialog) {
return this.dialogService
.open({ viewModel: AssignTeam })
.whenClosed((response) => {
if (!response.wasCancelled) {
return this.protectionService.assignTeam(devices, response.output);
}
this.selectedDevices.splice(0);
});
}
Expected: One dialog should be shown. When the user clicks ok it should be gone
Actual: The dialog is opened more than once. When the user clicks ok, he is presented by the same dialog and has to cancel it
Here is the html when opening the dialog:
<body class="ux-dialog-open">
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted -->
</ai-dialog-header>
<ai-dialog-body>
<!-- ommited-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- ommitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<ux-dialog-overlay style="z-index: 1000;" class="active"></ux-dialog-overlay>
<ux-dialog-container style="z-index: 1000;" class="active">
<div style="margin-top: 84.5px; margin-bottom: 84.5px;">
<div>
<div class="popup">
<div class="black-bg1">
<ai-dialog class="modalpopup-container padd35 dis-block">
<ai-dialog-header>
<!-- omitted-->
</ai-dialog-header>
<ai-dialog-body>
<!-- omitted-->
</ai-dialog-body>
<ai-dialog-footer class="text-center">
<!-- omitted-->
</ai-dialog-footer>
</ai-dialog>
</div>
</div>
</div>
</div>
</ux-dialog-container>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.3'><\/script>".replace("HOST",
location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.js?v=2.26.3"></script>
<div aurelia-app="main" class="page_container">
<!-- omitted-->
</div>
<script src="scripts/vendor-bundle.js"></script>
<script>
requirejs.config({
skipDataMain: true
});
// Configure Bluebird Promises.
Promise.config({
longStackTraces: false,
warnings: false,
cancellation: true
});
require(['aurelia-bootstrapper']);
</script>
<div></div>
<div></div>
</body>
Also tried to investigate more, using this code:
if (!this.dialogService.hasActiveDialog) {
console.log(this.dialogService);
return this.dialogService
.open({ viewModel: AssignTeam })
.then((openDialogResult: DialogOpenResult) => {
console.log(openDialogResult);
return openDialogResult.closeResult;
});
DialogService debug
It seems like two controllers are allocated
priceSpecification schema is returning error, how to resolve it? Website has classified listings for used cars posted by users.
Here are schema tags (screenshots attached), unable to paste schema tags code.
<div class="pos-rel" itemprop="itemOffered" itemscope itemtype="http://schema.org/Car" >
<h3 itemprop="name">Toyota Vitz F 1.0 for Sale</h3>
<div class="price-details generic-dark-grey mb5 mt10" itemprop="priceSpecification" itemscope itemtype="http://schema.org/UnitPriceSpecification">
<meta itemprop="priceCurrency" content="PKR">
<meta itemprop="price" content="1585000">
<span class='pkr'>PKR</span> 15.9 <span>lacs</span>
</div>
Read the docs, http://schema.org/Car. Go to bottom of page, click on microdata tag of example. Notice http://schema.org/Offer is part of the person schema. You could do it in two sections like their example or use something like this
<!-- Car Details -->
<div id="product" itemprop="itemOffered" itemscope itemtype="http://schema.org/Car">
<h3 itemprop="name">Toyota Vitz F 1.0 for Sale</h3>
<!-- Seller Details -->
<div itemscope itemtype="http://schema.org/Person">
<strong>Contact Name: </strong> <span itemprop="name givenName">Brent</span>
<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer" itemref="product">
<span itemprop="priceCurrency" content="PKR">PKR</span>
<span itemprop="price" content="1585000">15.9</span>
</div>
</div>
</div>
Notice code will validate here: https://search.google.com/structured-data/testing-tool