For a school project, I'm trying to scrape the content of multiple choices questions (to study for French SATs.
screenshot of the webpage that I want to scrape
My scraper works. However, the page uses javascript to get the first 5 questions then you need to answer each question and click on a next button then you have access to the 5-10 questions.
In the inspector, I compared the two html doc (before and after clicking on the radiobuttons + next button), I put both files at the end of the post (the first html doc has a form of type="get" while the second has a form of type "post")
Thus, I used the gem Mechanize and tried to click on all inputs and then the button.
Sadly, it doesn't work and I seem to have the same html file before and after running my code using Mechanize.
require 'open-uri'
require 'nokogiri'
require 'json'
require 'mechanize'
url = 'https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html'
agent = Mechanize.new
page = agent.get(url)
form = agent.page.form_with(:class => "c-form")
form.radiobuttons.each do |button|
button.check
end
# check if button.checked?
puts "============"
form.radiobuttons.each do |button|
puts button.checked?
end
puts "============"
puts "************"
page = agent.submit(form)
puts page.parser.text
puts "************"
This returns this in the console: meaning that Mechanize clicked on every radiobutton (each question has 3 radiobuttons, thus mechanize clicks on all of them but only the last one remained clicked (for each question), explaining the false - false - true repetition for each question)like here
============
false
false
true
false
false
true
false
false
true
false
false
true
false
false
true
============
************
#<Mechanize::Page:0x00007fb942c50e38>
Test Quiz Bac L/ES/S - Histoire-Géographie - L'Asie du Sud et de l'Est - L'Etudiant
Quiz Bac Quiz Bac L/ES/S - Histoire-Géographie - L'Asie du Sud et de l'Est Étape 1 Étape 2 1) Mumbai est : Veuillez sélectionner une réponse. a) la capitale politique de l’Union indienne. b) la capitale économique et culturelle de l’Union indienne. c) la capitale culturelle de l’Union indienne. 2) Que sont les slums ? Veuillez sélectionner une réponse. a) Le nom des bidonvilles en Inde. b) Le nom des quartiers aisés en Inde. c) Le nom des décharges en Inde. 3) Comment évolue la population de l’agglomération de Mumbai ? Veuillez sélectionner une réponse. a) Une croissance lente. b) Une stagnation. c) Une croissance rapide. 4) Quelle est la part de la population de l’Asie du Sud et de l’Est dans la population mondiale ? Veuillez sélectionner une réponse. a) 2/3. b) 1/4. c) 1/2. 5) Que signifie « PMA » ? Veuillez sélectionner une réponse. a) Pays mal avancés. b) Pays les moins avancés. c) Pays mal adaptés.
##################
Attention ! Veuillez répondre à toutes les questions.
#######################
Étape suivante Articles les plus lus Bac S 2018 : tous les sujets et corrigés Grand oral du nouveau bac : ce qui vous attend On connaît la liste des œuvres au programme du bac de français 2020 Pourquoi prendre latin ou grec en option en terminale ? Complémentaires ou expertes, à quoi ressembleront les options maths en terminale ? Bac STMG 2018 : tous les sujets et corrigés Nouveau bac : vous aurez les résultats des E3C le 15 mars Que se passera-t-il si vous ratez votre bac en 2020 ? Bac 2019 : les citations à (bien) utiliser à l’épreuve de philo E3C : ce que vous risquez si vous les manquez window._taboola = window._taboola || []; _taboola.push({ mode: 'thumbnails-right-rail', container: 'taboola-right-rail-thumbnails', placement: 'Right Rail Thumbnails', target_type: 'mix' });
Quiz Bac L/ES/S - Histoire-Géographie - L'Asie du Sud et de l'Est
************
The sentence "Attention ! Veuillez répondre à toutes les questions." between ###### in the console, means that Mechanize tried to submit the form but had not clicked on every radiobutton Like here when I try to click without having clicked on the radiobuttons
Here is the code (found in the inspector) before clicking on every radiobutton and clicking on the next button:
<form class="c-form has-error" method="post" data-frm="quiz" data-frm-legacy-final-step-action="/test/quiz/validation.html?time=1583184886" data-frm-init="1">
<div data-sln-scrollnav="" data-eng-scrollable="" class="c-scrollnav has-more-on-right">
<nav class="c-simple-nav c-scrollnav__scroller" data-sln-scroller="">
<ul class=" c-simple-nav__list c-simple-nav__list--progress " data-sln-inner="">
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link is-active is-clickable " href="#" data-frm-legacy-multi-step="Etape 1"> Étape 1 </a> </li>
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link " href="#" data-frm-legacy-multi-step="Etape 2"> Étape 2 </a> </li>
</ul>
</nav>
</div>
<ol class="c-quiz__question-list">
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 1) Mumbai est : </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21887" value="66881"> <span class="c-radio-label__label"> a) la capitale politique de l’Union indienne. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21887" value="66883"> <span class="c-radio-label__label"> b) la capitale économique et culturelle de l’Union indienne. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21887" value="66885"> <span class="c-radio-label__label"> c) la capitale culturelle de l’Union indienne. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 2) Que sont les slums ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21889" value="66887"> <span class="c-radio-label__label"> a) Le nom des bidonvilles en Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21889" value="66889"> <span class="c-radio-label__label"> b) Le nom des quartiers aisés en Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21889" value="66891"> <span class="c-radio-label__label"> c) Le nom des décharges en Inde. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 3) Comment évolue la population de l’agglomération de Mumbai ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21891" value="66893"> <span class="c-radio-label__label"> a) Une croissance lente. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21891" value="66895"> <span class="c-radio-label__label"> b) Une stagnation. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21891" value="66897"> <span class="c-radio-label__label"> c) Une croissance rapide. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 4) Quelle est la part de la population de l’Asie du Sud et de l’Est dans la population mondiale ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21893" value="66899"> <span class="c-radio-label__label"> a) 2/3. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21893" value="66901"> <span class="c-radio-label__label"> b) 1/4. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21893" value="66903"> <span class="c-radio-label__label"> c) 1/2. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question has-error" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 5) Que signifie « PMA » ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21895" value="66905"> <span class="c-radio-label__label"> a) Pays mal avancés. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21895" value="66907"> <span class="c-radio-label__label"> b) Pays les moins avancés. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21895" value="66909"> <span class="c-radio-label__label"> c) Pays mal adaptés. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
</ol>
<div class="c-form__errors">
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Attention ! Veuillez répondre à toutes les questions.
</div>
</div>
</div>
<input type="hidden" data-frm-legacy-multi-step-input="" name="step"> <input type="hidden" name="previousStep" value=""> <input type="hidden" name="nextStep" value="2"> <input type="hidden" name="idOrigine" value="1"> <input type="hidden" name="legacyFinalStepAction" value="/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/conclusion.html?time=1583184886" ?="">
<div class="c-quiz__actions">
<button class="c-button c-button--medium c-button--rounded c-button--light-border u-themed is-active u-typo--upper" type="button" data-frm-legacy-multi-step="next">
<span>Étape suivante</span>
<svg class="c-icon-svg">
<use xlink:href="/svg/etu.sprite.svg#icon-chevron-right"></use>
</svg>
</button>
</div>
</form>
Here is the html code that I want to get (found in the inspector after having clicked on every radiobutton and clicking on the next button:
<form class="c-form" method="post" data-frm="quiz" data-frm-legacy-final-step-action="/test/quiz/validation.html?time=1583187387" data-frm-init="1">
<div data-sln-scrollnav="" data-eng-scrollable="" class="c-scrollnav has-more-on-right">
<nav class="c-simple-nav c-scrollnav__scroller" data-sln-scroller="">
<ul class=" c-simple-nav__list c-simple-nav__list--progress " data-sln-inner="">
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link is-clickable " href="#" data-frm-legacy-multi-step="Etape 1"> Étape 1 </a> </li>
<li class="c-simple-nav__item"> <a class=" c-simple-nav__link is-active is-clickable " href="#" data-frm-legacy-multi-step="Etape 2"> Étape 2 </a> </li>
</ul>
</nav>
</div>
<ol class="c-quiz__question-list">
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 6) Parmi ces trois États, quel est celui dont la population croît la plus vite ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21897" value="66911"> <span class="c-radio-label__label"> a) L’Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21897" value="66913"> <span class="c-radio-label__label"> b) Le Japon. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21897" value="66915"> <span class="c-radio-label__label"> c) La Chine. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 7) Lequel de ces États est une démocratie ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21899" value="66917"> <span class="c-radio-label__label"> a) La Chine. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21899" value="66919"> <span class="c-radio-label__label"> b) L’Inde. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21899" value="66921"> <span class="c-radio-label__label"> c) La Corée du Nord. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 8) Les relations économiques entre la Chine et le Japon se caractérisent par : </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21901" value="66923"> <span class="c-radio-label__label"> a) des conflits. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21901" value="66925"> <span class="c-radio-label__label"> b) de la concurrence. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21901" value="66927"> <span class="c-radio-label__label"> c) de la complémentarité. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 9) À quelle instance la Chine refuse-t-elle la candidature du Japon ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21903" value="66929"> <span class="c-radio-label__label"> a) L’ONU. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21903" value="66931"> <span class="c-radio-label__label"> b) L’OMC. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21903" value="66933"> <span class="c-radio-label__label"> c) Le Conseil de sécurité de l’ONU. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
<li class="c-quiz-question" data-frm-validate="[ 'required' ]">
<h5 class="c-quiz-question__title"> 10) Quel État est chargé d’assurer la protection militaire du Japon ? </h5>
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Veuillez sélectionner une réponse.
</div>
</div>
<div class="c-quiz-question__options">
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21905" value="66935"> <span class="c-radio-label__label"> a) Le Royaume-Uni. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21905" value="66937"> <span class="c-radio-label__label"> b) Les États-Unis. </span>
<div class="c-radio__indicator"></div>
</label>
<label class=" c-radio-label u-themed ">
<input type="radio" name="question_21905" value="66939"> <span class="c-radio-label__label"> c) La Chine. </span>
<div class="c-radio__indicator"></div>
</label>
</div>
</li>
</ol>
<div class="c-form__errors">
<div class="c-block-error">
<div class="c-block-error__title">
<div class="c-block-bubble c-block-bubble--error">
<svg class="c-icon-svg" aria-hidden="true">
<use xlink:href="/svg/etu.sprite.svg#icon-exclamation"></use>
</svg>
</div>
Attention ! Veuillez répondre à toutes les questions.
</div>
</div>
</div>
Edit: I added some code and details to be more precise, I hope my problem is easier to understand.
I discovered and used Selenium to act as browser and thus perform the actions I asked it to do. It kind of works, and I managed to have access to the rest of the page:
require "selenium-webdriver"
driver = Selenium::WebDriver.for :chrome
url = "https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html"
driver.navigate.to url
driver.manage.window.maximize
sleep(3)
wait = Selenium::WebDriver::Wait.new(:timeout => 30)
name = wait.until {
container = driver.find_elements(:class, "c-quiz-question")
container.each do |element|
puts element.text
end
puts "=========="
radio_buttons = driver.find_elements(:class, "c-radio-label")
radio_buttons.each do |button|
button.click
end
puts "========="
driver.find_element(:class, "c-button").click
}
These are the results in the console:
1) Mumbai est :
a) la capitale politique de l’Union indienne.
b) la capitale économique et culturelle de l’Union indienne.
c) la capitale culturelle de l’Union indienne.
2) Que sont les slums ?
a) Le nom des bidonvilles en Inde.
b) Le nom des quartiers aisés en Inde.
c) Le nom des décharges en Inde.
3) Comment évolue la population de l’agglomération de Mumbai ?
a) Une croissance lente.
b) Une stagnation.
c) Une croissance rapide.
4) Quelle est la part de la population de l’Asie du Sud et de l’Est dans la population mondiale ?
a) 2/3.
b) 1/4.
c) 1/2.
5) Que signifie « PMA » ?
a) Pays mal avancés.
b) Pays les moins avancés.
c) Pays mal adaptés.
==========
=========
6) Parmi ces trois États, quel est celui dont la population croît la plus vite ?
a) L’Inde.
b) Le Japon.
c) La Chine.
7) Lequel de ces États est une démocratie ?
a) La Chine.
b) L’Inde.
c) La Corée du Nord.
8) Les relations économiques entre la Chine et le Japon se caractérisent par :
a) des conflits.
b) de la concurrence.
c) de la complémentarité.
9) À quelle instance la Chine refuse-t-elle la candidature du Japon ?
a) L’ONU.
b) L’OMC.
c) Le Conseil de sécurité de l’ONU.
10) Quel État est chargé d’assurer la protection militaire du Japon ?
a) Le Royaume-Uni.
b) Les États-Unis.
c) La Chine.
==========
However, to do so I had to manually close a pop-up that appears in the Selenium browser and if I don't close it manually, I have a ElementClickInterceptedError that kills my program.
Is there any way to close this pop up with Ruby inside Selenium?
element click intercepted: Element <label class=" c-radio-label u-themed ">...</label> is not clickable at point (476, 499). Other element would receive the click: <div class="sd-cmp-39-hc" style="color: rgb(51, 51, 51);">...</div> (Selenium::WebDriver::Error::ElementClickInterceptedError)
There are more checkboxes on page 2.
The resulting page source code shows 5 answers and 15 checkboxes, but I visited the page and saw 10 questions with 30 checkboxes in total. That's the reason for the French error message that not all checkboxes are ticked.
Check page 1 using the following code:
agent = Mechanize.new
page = agent.get('https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html')
form = agent.page.form_with(:class => "c-form")
puts form.inspect
There are two different forms on the page as you can see if you loop over page.forms and form.fields:
agent = Mechanize.new
page = agent.get('https://www.letudiant.fr/quiz/bac/histoire-geographie/quiz-bac-histoire-geographie-l-es-s-l-asie-du-sud-et-de-l-est-les-enjeux-de-la-croissance/question.html')
agent.page.forms.each do |form|
pp form
form.fields.each do |field|
pp field
end
end
"Getting Started With Mechanize" will help.
You need to click the button on the bottom and then repeat the same action on page 2 before submitting the form.
There does not seem to be an option as the form changes using JavaScript.
Related
As you can see in the picture below I have a form for adding notes and a form for editing notes on my page. What I want to do is: When I click edit button ("Düzenle" in my page), I want to open the window on the right as a pop-up.
The part codes on the left side of the picture ProjeListPartial.cshtml:
#model List<tbl_Not>
#if (Model.Any())
{
<div class="col-md-12 col-sm-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption caption-md">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase"><a>Proje Notları Toplam: #Model.Count() </a></span>
</div>
</div>
<div class="portlet-body">
<div class="scroller" style="height: 338px;" data-always-visible="1" data-rail-visible1="0" data-handle-color="#D7DCE2">
<div class="general-item-list">
#foreach (var item in Model)
{
<div class="item">
<div class="item-head">
<div class="item-details">
<a class="item-name primary-link">#item.Adi</a>
<br />
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-label">#item.tbl_Kullanici.Adi</span>
}
<span class="item-label">#item.EklenmeTarihi.ToString("dd.MM.yyy")</span>
#if (Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.BirimTamYetki) || Fonksiyonlar.KulYetSvys((int)Sabitler.YtkSeviyesi.TamYetki))
{
<span class="item-status">
<!-- This is my edit code -->
Düzenle
<!-- -->
Sil
</span>
}
</div>
</div>
<div class="item-body"> #item.Icerik </div>
</div>
}
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left: 0px;">
<div class="col-md-12">
<div class="dataTables_paginate paging_bootstrap_number hidden-print" id="sample_3_paginate">
<ul class="pagination" style="visibility: visible;">
#Html.Raw(ViewBag.Sayfalama)
</ul>
</div>
</div>
</div>
}
else
{
<h3>Not Bulunmamaktadır.</h3>
}
The part codes on the right side of the picture Ekle.cshtml:
#model tbl_Not
#{
ViewBag.Title = "Not";
bool IsProjeNotu = Model.ProjeID > 0 ? true : false;
if (IsProjeNotu)
{
Layout = null;
}
}
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-file-o"></i>Not Ekle/Düzenle
</div>
<div class="tools">
</div>
</div>
<div class="portlet-body #(IsProjeNotu?"portlet-collapsed":"")">
<form method="post" role="form" action="#Url.Action("Ekle", "Not", new { ProjeID = Model.ProjeID, BirimID = Model.BirimID, IsProjeNotu = IsProjeNotu })">
<input type="hidden" name="ID" value="#Model.ID" />
<div class="form-body">
#if (!IsProjeNotu)
{
<div class="col-lg-6 formbox pl">
<span>Birim Adı:</span>
<select name="BirimID" id="Birim" class="form-control">
#Html.Raw(ViewBag.Birim)
</select>
</div>
<div class="col-lg-6 pl pr formbox" onchange="return IlGetir();">
<span>Proje Adı:</span>
<select name="ProjeID" id="Projeler" class="form-control"></select>
</div>
}
<div class="col-md-6 pl formbox">
<span>İl/İller:</span>
<select multiple id="Iller" class="form-control">
#foreach (tbl_Il item in ViewBag.Iller)
{
<option value="#item.ID">#item.Adi</option>
}
</select>
<button id="SolaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-plus"></i> Ekle
</button>
</div>
<div class="col-md-6 formbox pr">
<span>İl Çıkar</span>
<select multiple id="SecilenIller" name="IlID" class="form-control">
#foreach (tbl_NotIlIliski item in Model.tbl_NotIlIliski.ToList())
{
<option value="#item.IlID">#item.tbl_Il.Adi</option>
}
</select>
<button id="SagaYolla" type="button" class="btn blue btn-sm" data-style="slide-up" data-spinner-color="#333">
<i class="fa fa-close"></i> Çıkar
</button>
</div>
<div class="col-md-12 formbox pr pl">
<span>Başlık:</span>
<input type="text" maxlength="250" class="form-control" style="width: 230px;" value="#Model.Adi" name="Adi" />
</div>
<div class="col-md-12 formbox pr pl">
<span>İçerik:</span>
<textarea class="mceEditor" style="width: 230px;" name="Icerik">#Model.Icerik</textarea>
</div>
</div>
<div class="col-md-12 formbox pr pl">
<span>Not Durumu:</span>
#foreach (var item in Sabitler.NotDurum)
{
<label class="mt-radio mt-radio-outline" style="margin-left: 15px;">
#item.Adi
<input #( Model.DurumID == 0 ? (item.ID == 1 ? "checked='checked'" : "") : (item.ID == Model.DurumID ? "checked='checked'" : "") ) type="radio" value="#item.ID" name="DurumID" />
<span></span>
</label>
}
</div>
<input type="submit" class="btn blue" id="Kaydet" onclick="$('#SecilenIller option').prop('selected', true);" value="Kaydet" />
</form>
</div>
When I click edit button (Düzenle), this is how a screen comes out:
So I manage to solve the original problem by updating the package but here is what follows, a dark background with dark font color
Below is the codes for the view
<div *ngSwitchCase="'Basic'">
<md-card>
<md-card-content>
<h4>Basic Institution Subscription Page</h4>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Your School or Institution Profile</div>
<div class="panel-body">
<md-card>
<md-card-content>
<div class="row" style="padding-left:10px;padding-bottom:10px;padding-top:20px">
<div class="col-md-6">
<img md-card-md-image [src]="'data:image/jpg;base64,' + institution.Crest" class="crest_image" style="margin-bottom:5px;margin-left:10px" />
<h6>Select Institution Crest</h6>
<input #crest type="file" (change)="crestChangeListner($event)" style="margin-left:20px" />
</div>
<div class="col-md-6">
<img md-card-md-image [src]="'data:image/jpg;base64,' + institution.BackGroundPicture" class="bgpic_image" style="margin-bottom:5px;margin-left:10px" />
<h6 *ngIf="!institution.BackGroundPicture">Select Background Image</h6>
<input #bgpic type="file" (change)="bgpicChangeListner($event)" style="margin-left:20px" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-radio-group [(ngModel)]="institution.OwnershipCategory"
(change)="OwnershipCategorySelected($event.value)" name="ownershipCategory" class="example-margin"
[value]="institution.OwnershipCategory"
[align]="isAlignEnd ? 'end' : 'start'">
<md-radio-button class="icon-align-vertical" name="ownershipCategory" value="Public">
Public
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="ownershipCategory" value="Private">
Private
</md-radio-button>
</md-radio-group>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-select placeholder="Select Country" style="width: 100%"
id="countryID" name="countryID" class="required"
[(ngModel)]="institution.Country"
(ngModelChange)="countrySelected()">
<md-option *ngFor="let country of countries" [value]="country.CountryID">
{{ country.CountryName }}
</md-option>
</md-select>
</div>
<div class="col-md-6">
<md-select placeholder="Select Office" style="width: 100%"
id="officeID" name="officeID" class="required"
[(ngModel)]="institution.OfficeID"
(ngModelChange)="officeSelected()">
<md-option *ngFor="let office of offices" [value]="office.AdministrativeStructureID">
{{ office.AdminStructName }}
</md-option>
</md-select>
</div>
</div>
<div class="row" *ngIf="offices">
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="InstitutionID" placeholder="Enter Institution ID"
[(ngModel)]="institution.InstitutionID" required id="InstitutionID" style="width: 100%"
#InstitutionID="ngModel">
<div [hidden]="InstitutionID.valid || InstitutionID.pristine"
class="alert alert-danger">
Institution ID is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Institution Name"
[(ngModel)]="institution.InstitutionName" name="InstitutionName" id="InstitutionName" required style="width: 100%"
#InstitutionName="ngModel">
<div [hidden]="InstitutionName.valid || InstitutionName.pristine"
class="alert alert-danger">
Institution Name is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="Website" placeholder="Enter Website Address"
[(ngModel)]="institution.Website" required id="Website" style="width: 100%"
#Website="ngModel">
<div [hidden]="Website.valid || Website.pristine"
class="alert alert-danger">
Website is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Email Address"
[(ngModel)]="institution.EmailAddress" name="EmailAddress" id="EmailAddress" required style="width: 100%"
#EmailAddress="ngModel">
<div [hidden]="EmailAddress.valid || EmailAddress.pristine"
class="alert alert-danger">
Email Address is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="PostalAddress" placeholder="Enter Postal Address"
[(ngModel)]="institution.PostalAddress" required id="PostalAddress" style="width: 100%"
#PostalAddress="ngModel">
<div [hidden]="PostalAddress.valid || PostalAddress.pristine"
class="alert alert-danger">
Postal Address is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Residential Address"
[(ngModel)]="institution.ResidentialAddress" name="ResidentialAddress" id="ResidentialAddress" required style="width: 100%"
#ResidentialAddress="ngModel">
<div [hidden]="ResidentialAddress.valid || ResidentialAddress.pristine"
class="alert alert-danger">
Residential Address is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput name="Phone1" placeholder="Enter Phone1"
[(ngModel)]="institution.Phone1" required id="Phone #1" style="width: 100%"
#Phone1="ngModel">
<div [hidden]="Phone1.valid || Phone1.pristine"
class="alert alert-danger">
Phone1 is required
</div>
</md-input-container>
</div>
<div class="col-md-6">
<md-input-container style="width:100%">
<input mdInput placeholder="Enter Phone2"
[(ngModel)]="institution.Phone2" name="Phone2" id="Phone #2" required style="width: 100%"
#Phone2="ngModel">
<div [hidden]="Phone2.valid || Phone2.pristine"
class="alert alert-danger">
Phone2 is required
</div>
</md-input-container>
</div>
</div>
<div class="row">
<div class="col-md-6">
<md2-datepicker
style="width:100%"
class="md-input-element"
placeholder="Select Date Founded"
name="DateFounded"
(ngModel)="institution.DateFounded"
[required]="isRequired"
[disabled]="isDisabled"
[openOnFocus]="isOpenOnFocus"
[isOpen]="isOpen"
[type]="type"
[min]="minDate"
[max]="maxDate">
</md2-datepicker>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-4"><h6>Select Institution Catgory</h6></div>
<div class="col-md-8">
<md-radio-group [(ngModel)]="institution.SchoolCategory"
(change)="SchoolCategorySelected($event.value)" name="schoolCategory" class="example-margin"
[value]="institution.SchoolCategory"
[align]="isAlignEnd ? 'end' : 'start'">
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="A">
A
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="B">
B
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="C">
C
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="D">
D
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="E">
E
</md-radio-button>
<md-radio-button class="icon-align-vertical" name="schoolCategory" value="F">
F
</md-radio-button>
</md-radio-group>
</div>
</div>
</div>
</div>
</md-card-content>
</md-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">Shool Ownership In formation</div>
<div class="panel-body">
<md-card>
<md-card-content>
<div class="row">
<md-select placeholder="Select Owner Type" style="width: 100%"
id="ownershipTye" name="ownershipType" class="required"
[(ngModel)]="ownershipType"
(ngModelChange)="ownershipTypeSelected()">
<md-option *ngFor="let option of ownershipTypes" [value]="option">
{{ option }}
</md-option>
</md-select>
</div>
<div class="row">
<md-input-container style="width:100%">
<input mdInput name="fullName" placeholder="Enter Full Name"
[(ngModel)]="ownership.FullName" required id="fullName" style="width: 100%"
#fullName="ngModel">
<div [hidden]="fullName.valid || fullName.pristine"
class="alert alert-danger">
fullName is required
</div>
</md-input-container>
</div>
<div class="row">
<ul class="list-group">
<li class="list-group-item" *ngFor="let owner of ownerships">
<span class="badge">{{owner.FullName}}</span>
<md-checkbox name="ownerName"
(change)="fullNameSelected(owner)"
[(ngModel)]="owner.Selected">
{{owner.OwnershipTye}}
</md-checkbox>
</li>
</ul>
</div>
</md-card-content>
</md-card>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-6">
<button md-raised-button color="primary" type="button" (click)="AddOwner()">Add Owner</button>
</div>
<div class="col-md-6">
<span class="pull-right">
<button md-raised-button color="primary" type="button" (click)="removeOwner()">Remove Owner</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</md-card-content>
</md-card>
</div>
and this part of the code for the component
isRequired = false;
isDisabled = false;
isOpenOnFocus = false;
isOpen = false;
type: string = 'date';
types: Array<any> = [
{ text: 'Date', value: 'date' },
{ text: 'Time', value: 'time' },
{ text: 'Date Time', value: 'datetime' }];
openDatepicker() {
this.isOpen = true;
setTimeout(() => {
this.isOpen = false;
}, 1000);
}
//startDate: Date = null;
setDate() {
this.institution.DateFounded = new Date();
}
minDate: Date = null;
maxDate: Date = null;
setDateRange() {
this.minDate = new Date();
this.minDate.setMonth(this.minDate.getMonth() - 3);
this.maxDate = new Date();
this.maxDate.setMonth(this.maxDate.getMonth() + 3);
}
I implemented validation "required" in my "checkbox 'and it works, the" set focus "is on the field, but the validation message is not displayed!
<form asp-action="Create">
<div class="form-horizontal">
<h4>Etapa 4 - Termos de Uso</h4>
<h5>Para concluir a sua inscrição basta validar que você não é um robo e concordar com os termos de uso!</h5>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="6LcgsyITAAAAAHiF8A1MGysKGUfQddq-_uzBD8ba"></div>
</div>
<div class="form-group">
<div class="col-md-8 checkbox-inline">
<input asp-for="Aceite" required oninvalid="this.setCustomValidity('Para concluir a inscrição é necessário aceitar os termos de uso')"/>
Li e concordo com os termos de uso e privacidade
</div>
</div>
<div class="form-group">
<div class="col-md-8 checkbox-inline">
<input asp-for="AceitePromocao" />
<label asp-for="AceitePromocao"></label>
</div>
</div>
<div class="form-group">
<div class="col-md-pull-12">
<input type="submit" value="Aceitar e concluir" class="btn btn-success btn-lg" />
</div>
</div>
</form>
This is because a checkbox required validation is not logical. A checkbox can always be true or false. It's true when you're checking it otherwise false.
That means it always have a value.
i want to align cards like below image
But my cards are aligned like this
Here is my html code
<md-content class="md-padding" layout="row" layout-wrap flex>
<div layout="column" ng-repeat="product in vm.result" flex="30">
<md-card >
<md-card-header>
<md-card-header-text>
<span class="md-title">{{ product.Product_Name }}</span>
</md-card-header-text>
</md-card-header>
<img ng-src="{{ product.Image }}" class="md-card-image" alt="Image here">
<md-card-title>
<md-card-title-text>
<span class="md-subhead" style="font-weight: bold;">Brand: </span><span style="margin-left:10px">{{ product.Brand }}</span>
<span class="md-subhead" style="font-weight: bold;">Color: </span><span style="margin-left:10px">{{ product.Color }}</span>
<span class="md-subhead" style="font-weight: bold;">Price: </span><span style="margin-left:10px">{{ product.Price }}</span>
<span class="md-subhead" style="font-weight: bold;">Url: </span><span style="margin-left:10px"><a ng-href="{{ product.Url }}">{{ product.Url }}</a></span>
<span class="md-subhead" style="font-weight: bold;">Category: </span><span style="margin-left:10px">{{ product.Category }}</span>
<span class="md-subhead" style="font-weight: bold;">Description: </span><span style="margin-left:10px">{{ product.Description }}</span>
</md-card-title-text>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button class="send-button md-accent md-raised" ng-click="vm.editDialog($index,product._id)">Edit</md-button>
<md-button name="ProductId" class="send-button md-accent md-raised" ng-click="remove(product._id,'{{$index}}')">Remove</md-button>
</md-card-actions>
</md-card>
</div>
i am trying to do this from yesterday but i am not. somebody please help me
I am working in .NET, VB Razor MVC4 with JQueryMobile.
My issue is in trying to get the #Html.RadioButtonFor to generate properly formatted HTML to get picked up by the JQuery Mobile.
This code:
#For Each fqi In Model.Options
#<label for="#fqi.Id">#fqi.Text</label>
#<input type="radio" name="#fqi.Name" id="#fqi.Id" value="#fqi.Value" checked="#fqi.Checked"/>
Next
Generates:
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-left ui-btn-up-d" for="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Yes</span>
</span>
</label>
<input id="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="Yes" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-right ui-controlgroup-last ui-btn-up-d" for="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">No</span>
</span>
</label>
<input id="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="No" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
But I cant get this code right:
#For Each fqi In Model.Options
#Html.LabelFor(Function(m) m.CurrentValue, fqi.Text)
#Html.RadioButtonFor(Function(m) m.CurrentValue, New with {.value = fqi.Value, .name=fqi.Name, .checked=fqi.Checked})
Next
It is rendering as:
<div class="ui-radio">
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-input-text ui-corner-left ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">
<span class="ui-btn-inner">
</span>
</span>
</label>
<label class="ui-btn ui-radio-off ui-input-text ui-corner-right ui-controlgroup-last ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
</span>
</span>
</label>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = No, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = Yes, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>