#jquery #html #css #internet-explorer
#jquery #HTML #css #интернет-проводник #internet-explorer
Вопрос:
При загрузке jQuery я пытаюсь скрыть / показать определенные разделы в зависимости от условий. Все работает за пределами IE7. Я разбил его и обнаружил, что следующий селектор классов будет работать:
$('.medication_div').hide();
Но селектор идентификаторов, который мне нужен, не работает (Примечание: я пробовал использовать значения harding code, которые также не сработали.
//Get the name of the medication selected
var medication_selected = $("ul#medication_classes li:last-child p").text();
//Show the div associated with the selected medication card
$("#" medication_selected).show();
Вот HTML-код, сгенерированный после запуска:
<ul id="medication_classes">
<li>
<p>Celexa</p>
<input id="Meds_0" name="Meds[0]" type="hidden" value="Celexa" />
</li>
<li>
<p>Lisinopril</p>
<input id="Meds_1" name="Meds[1]" type="hidden" value="Lisinopril" />
</li>
</ul>
<div id="results_detail" class="grid_12 alpha">
<ul>
<li>
<div class="medication_div" id="Celexa">
<p id="class_trigger">Protocol Set Triggering: General<input id="Celexa_ProtocolSetID" name="Celexa[ProtocolSetID]" type="hidden" value="1" /></p><br>
<p class="left_input">Does the patient still have active refills for Celexa?</p>
<div class="right_input">No:<input id="Celexa_ActiveRefills_No" name="Celexa[ActiveRefills]" type="radio" value="No" /> Yes:<input id="Celexa_ActiveRefills_Yes" name="Celexa[ActiveRefills]" type="radio" value="Yes" /></div><br/>
<div class="clear"></div>
<div id="Celexa_notActive">
<p>Approve the Celexa refill as indicated in the patient record.</p>
</div>
<div id="Celexa_active">
<p class="left_input" id="dose_change">When was the dosage for this medication last changed?</p> <div class="right_input"><input class="date" id="Celexa_MedicationChangeDate" name="Celexa[MedicationChangeDate]" type="text" /></div><br/>
<div class="clear"></div>
<div class="table_header med_info">
<h5>Fill in the following as much possible in order to find the most relevant protocol.</h5>
</div>
<table width="846">
<tr id="labels">
<th width="33%">Name</th>
<th width="33%">Value</th>
<th width="33%">Result Date</th>
</tr>
<tr>
<td width="33%">Medication Start<input id="Celexa_TestResult_0_Name" name="Celexa[TestResult][0][Name]" type="hidden" value="Medication Start" />
</td>
<td width="33%">
<p>N/A</p>
</td>
<td width="33%">
<input class="date" id="Celexa_TestResult_0_Date" name="Celexa[TestResult][0][Date]" type="text" />
</td>
</tr>
</table>
<label>Note to physician about refill request:</label><textarea class="md_note" id="Celexa_Note" name="Celexa[Note]"></textarea>
</div>
</div>
</li>
<li>
<div class="medication_div" id="Lisinopril">
<p id="class_trigger">Protocol Set Triggering: Hypertension Medications<input id="Lisinopril_ProtocolSetID" name="Lisinopril[ProtocolSetID]" type="hidden" value="4" /></p><br>
<p class="left_input">Does the patient still have active refills for Lisinopril?</p>
<div class="right_input">No:<input id="Lisinopril_ActiveRefills_No" name="Lisinopril[ActiveRefills]" type="radio" value="No" /> Yes:<input id="Lisinopril_ActiveRefills_Yes" name="Lisinopril[ActiveRefills]" type="radio" value="Yes" /></div><br/>
<div class="clear"></div>
<div id="Lisinopril_notActive">
<p>Approve the Lisinopril refill as indicated in the patient record.</p>
</div>
<div id="Lisinopril_active">
<p class="left_input" id="dose_change">When was the dosage for this medication last changed?</p> <div class="right_input"><input class="date" id="Lisinopril_MedicationChangeDate" name="Lisinopril[MedicationChangeDate]" type="text" /></div><br/>
<div class="clear"></div>
<div class="table_header med_info">
<h5>Fill in the following as much possible in order to find the most relevant protocol.</h5>
</div>
<table width="846">
<tr id="labels">
<th width="33%">Name</th>
<th width="33%">Value</th>
<th width="33%">Result Date</th>
</tr>
<tr>
<td width="33%">Medication Start<input id="Lisinopril_TestResult_0_Name" name="Lisinopril[TestResult][0][Name]" type="hidden" value="Medication Start" />
</td>
<td width="33%">
<p>N/A</p>
</td>
<td width="33%">
<input class="date" id="Lisinopril_TestResult_0_Date" name="Lisinopril[TestResult][0][Date]" type="text" />
</td>
</tr>
<tr>
<td width="33%">Creatinine<input id="Lisinopril_TestResult_1_Name" name="Lisinopril[TestResult][1][Name]" type="hidden" value="Creatinine" />
</td>
<td width="33%">
<input id="Lisinopril_TestResult_1_Value" name="Lisinopril[TestResult][1][Value]" type="text" />
</td>
<td width="33%">
<input class="date" id="Lisinopril_TestResult_1_Date" name="Lisinopril[TestResult][1][Date]" type="text" />
</td>
</tr>
</table>
<label>Note to physician about refill request:</label><textarea class="md_note" id="Lisinopril_Note" name="Lisinopril[Note]"></textarea>
</div>
</div>
</li>
</ul>
</div>
При жестком кодировании для приведенного выше примера я жестко запрограммировал безрезультатно:
$("#Celexa").show();
Есть какие-нибудь идеи?
Ответ №1:
Оказывается, код Rails генерировал дополнительный символ, который интерпретировался только в IE7. На данный момент я все еще не уверен, что это за символ (возможно, не в юникоде), но я исправил проблему, используя селектор подстановочных знаков jQuery:
$("div[id^=" medication_selected "]").show();
Ответ №2:
отлично работал на моем ie7. проверьте свой css / стиль в firefox.
кстати — попробуйте использовать json, шаблоны и данные jquery для получения лучших результатов. например:
HTML:
<p>select one:</p>
<ul id="medication_classes">
</ul>
<div id="medication_detail">
<p>Protocol Set Triggering: <span class="data-protocol">General</span></p>
<p>Does the patient still have active refills for <span class="data-name">Celexa</span>?</p>
<p>No:<input type="radio" value="No" /> Yes:<input type="radio" value="Yes" /></p>
<p>Approve the <span class="data-name">Celexa</span> refill as indicated in the patient record.</p>
<p>When was the dosage for this medication last changed?</p>
<p><input class="date" /></p>
<p>Fill in the following as much possible in order to find the most relevant protocol.</p>
JS:
$(function () {
var medications = [
{ name: 'Celexa', protocol: 'General' },
{ name: 'Lisinopril ', protocol: 'Hypertension Medications' }
];
for (var medicationID in medications) {
var medication = medications[medicationID];
$('<li>')
.data('medicineData', medication)
.text(medication.name)
.appendTo('#medication_classes')
.click(function () {
var medicineData = $(this).data('medicineData');
$('.data-name').text(medicineData.name);
$('.data-protocol').text(medicineData.protocol);
});
}
});
возможно, используйте pure — который является хорошим движком для создания шаблонов.
Комментарии:
1. Хм… Можете ли вы взглянуть на действующий сайт refillwizarddemo.heroku.com/refill/create в вашей версии IE? На первом экране введите два лекарства «Лизиноприл» и «Целекса». На следующей странице средний div под карточками будет показан в Firefox, но не в IE7 (по крайней мере, в моем). Также были бы высоко оценены любые советы по <li> ошибкам на первом экране 🙂
2. в ie (второй этап процесса) все лекарства помечены как «Готовые к публикации»