Develop Reference

Prevent default is not working in my code

Hi I am developing wordpress website using php, I want to do 4 steps for single php file.If the condition is satisfied it will go to the next page.
function checketudesandformations() {
var x = document.getElementById("myTable").rows.length;
if (x < 3) {
alert("Please Select atleast 2 documents'");
document.location.reload(true);
return false;
} else {
//return true;
}
If above the conditions is satisfied then only below the jquery want fire but i am getting button fire the condition is not satisfied. So please help me any one
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#suivantsteps2").click(function(e) {
e.preventDefault();
jQuery("#candidaturetabform2").css("display", "none");
jQuery("#candidaturetabform3").css("page-break-before", "always");
jQuery("#candidaturetabform3").css("display", "block");
jQuery("#step03").addClass("active")
jQuery("#step02").removeClass("active")
return false;
});
});
</script>
Below my HTML code
<form name="etudesandformations" id="etudesandformations" method="post"
enctype="multipart/form-data" action="#" style="margin-top: 40px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<tr>
<td>
<input name="inesv6" type="hidden" value="">
<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="50%" align="right">
<input class="saisie1 input" name="precedent" id="precedent" type="submit" value="Précédent" onClick="" tabindex="5">
</td>
<td align="left">
<input class="saisie1 input" name="suivantsteps" id="suivantsteps2" type="submit" value="Suivant" onClick="checketudesandformations()" tabindex="4">
</td>
</tr>
</td>
</tr>
</table>

I did not understand question properly, but u need to rectify your code first. Use single event handler for onclick event as below. If you need more help please create atleast minimum working fiddle of your code.
<script type="text/javascript">
function checketudesandformations() {
var x = document.getElementById("myTable").rows.length;
if (x < 3) {
alert("Please Select atleast 2 documents'");
document.location.reload(true);
} else {
jQuery("#candidaturetabform2").css("display", "none");
jQuery("#candidaturetabform3").css("page-break-before", "always");
jQuery("#candidaturetabform3").css("display", "block");
jQuery("#step03").addClass("active")
jQuery("#step02").removeClass("active")
}
</script>

docent display pop up with table id

When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});

How to expand/collapse html table with partial view?

I am trying to expand/collapse a table row when a button is clicked. For the moment I can only expand the row.
I want to be able to collapse it aswell.
I am using a partial view.
I have tried this: expand/collapse table rows with JQuery but can't get it to work since I am loading data from a sql-database in a foreach loop.
To clarify: This expands the table, but I'm missing the collapse-part of my javascript code. Thanks in advance.
PartialView
<div class="table" id="logtable">
<div class="row">
<div class="cell" id="tableth">
message
</div>
</div>
#foreach (var item in Model.Logs)
{
<div class="row">
<div class="cell" id="tabletd">
<input type="button" name="answer" value="Show Div" onclick="showDiv(#item.id.ToString())" />
#Html.DisplayFor(modelItem => item.message)
</div>
</div>
<div class="row">
<div id="#item.id.ToString()" style="display:none;" class="answer_list">
<strong>Uri:</strong> #item.Uri <br/>
<strong>Method:</strong> #item.Method <br />
<strong>HttpStatus:</strong> #item.HttpStatus <br />
</div>
</div>
Javascript (in my HTML-view)
<script type="text/javascript">
function showDiv(message) {
document.getElementById(message).style.display = "block";
}
</script>

Do you want a toggle function? Check the status of the element and then chose whether to show or hide:
<script type="text/javascript">
function showDiv(message) {
if(document.getElementById(message).style.display == 'block'){
document.getElementById(message).style.display = "none";
}
else{
document.getElementById(message).style.display = "block";
}
}
</script>
Strictly speaking, this is pure javascript and not jQuery. If you really are using jQuery, you can make it even simpler:
function showDiv(message) {
$('#'+message).toggle();
}
You can even even go for a beautiful animation:
function showDiv(message) {
$('#'+message).slideToggle();
}

<style>
#dvExpoByBatchDate .expandExpo {
background-image: url("../Images/Expand.gif");
background-repeat: no-repeat;
background-position: center,center;
}
#dvExpoByBatchDate .expandExpoDisabled {
background-image: url("../Images/ExpandDisabled.gif");
background-repeat: no-repeat;
background-position: center,center;
}
#dvExpoByBatchDate .collapseExpo {
background-image: url("../Images/Collapse.gif");
background-repeat: no-repeat;
background-position: center,center;
}
</style>
//This is WrapperModel which contains all models for different level.
public class WrapperModel
{
public List<Employee> ListEmployee;
public List<Manger> Listmanger;
public List<Programmer> ListProgrammer;
}
#model Model.WrapperModel
<script>
//Default set to collapse Parent Header
$("#dtExposure .relationshipExposure").attr('colspan', 1);
//Hide child columns
$(".subRelationshipExposure").hide();
</script>
<style>
#dtExposure tr th {
cursor: default !important;
}
</style>
<table id="dtExposure" class="dbExposure display">
#if (Model != null)
{
if (Model.ListEmployee!= null) -- Parent Row View
{
#Html.Partial("Exposure/_ParentPartial", Model)
}
if (Model.Listmanger!= null) -- child Row View
{
#Html.Partial("Exposure/_ChildPartial", Model)
}
}
</table>
// Parent Partial View
#model Model.WrapperModel
<thead id="groupHead">
<tr>
<th rowspan="2" style="background-color: #003675"></th>
<th rowspan="2" style="background-color: #003675">ID</th>
<th class="relationshipExposure sorting_disabled" colspan="4" style="background-color: #003675">
FullName <span>&#9658</span>
</tr>
<tr>
#*HiddenSubChildColumn*#
<th style="background-color: #003675">FullName</th>
<th class="subRelationshipExposure" style="background-color: #003675">First Name</th>
<th class="subRelationshipExposure" style="background-color: #003675">Last Name</th>
<th class="subRelationshipExposure" style="background-color: #003675">Phone</th>
</tr>
</thead>
<tbody id="groupBody">
#foreach (var item in Model.ListEmployee)
{
<tr>
<td id="toggleExposureRelationship" class="expandExpo emptyTd" style="background-color:white;border:none"></td>
<td>#item.CDL</td>
<td>
<span id="relationshipExpo" style="color: #0000ff; cursor: pointer">#item.FullName</span>
</td>
<td class="subRelationshipExposure">#item.FirstName</td>
<td class="subRelationshipExposure">#item.LastName</td>
<td class="subRelationshipExposure">#item.Phone</td>
</tr>
}
</tbody>
//Child Partial View
#model Model.WrapperModel
<thead id="customHead">
<tr class="SubExposureCustomer" style="display: none">
<th class="emptyTd"></th>
<th style="background-color: #003675">ID#</th>
<th style="background-color: #003675">Full Name</th>
<th style="background-color: #003675" class="subRelationshipExposure">First Nmae</th>
<th style="background-color: #003675" class="subRelationshipExposure">Last Namen</th>
<th style="background-color: #003675" class="subRelationshipExposure">Phone</th>
</tr>
<tbody id="customBody">
#*Customer Level*#
#foreach (var item in Model.Listmanger)
{
var currCustomerMasterId = item.CUSTOMERMASTERID;
<tr class="SubExposureCustomer" data-currcustomermasterid="#currCustomerMasterId" style="display: none">
<td class="ExpoCustomerIcon expandExpo emptyTd" style="background-color:white;border:none"></td>
<td>#item.ID</td>
<td>#item.FULLNAME</td>
<td class="subRelationshipExposure">#item.FIRSTNAME</td>
<td class="subRelationshipExposure">#item.LASTNAME</td>
<td class="subRelationshipExposure">#item.PHONE</td>
</tr>
//For Pure MVC Grid Collapse
function ToggleExposure(“relationshipExposure”, “subRelationshipExposure”, 4) {
$(document).on("click", "." + className, function (e) {
var selfExposre = $("." + className);
var subSelfExposre = $("." + subclassName);
if (selfExposre.attr('colspan') == colspan) {
subSelfExposre.toggle();
selfExposre.attr('colspan', 1);
isCollpase = false;
}
else {
subSelfExposre.toggle();
selfExposre.attr('colspan', colspan);
isCollpase = true;
}
var varId = selfExposre.find("span");
varId.empty();
isCollpase ? varId.html("&#9668") : varId.html("&#9658");
});
}

How to hide a table row which have TD containing certain values

I am working on a SharePoint web site , and I need using CSS (Preferred) or JavaScript, to hide a table row that have two main TDs:-
TD with a text named Item Number.
TD with an input titled Item number.
Here is how the mark-up is constructed:-
Can anyone advice on this please?
i tried the following script , but did not hide the Item Number or the customer initial , baring in mind that all the TR are inside a table which have .ms-formtable class:-
<script>
$(function() {
$('.ms-formtable tr').each(function() {
var frstVal = $(this).find('td').eq(0).text();
if (frstVal.match(/Item Number|customer Initials/i)) {
$(frstVal).remove()
}
});
});
</script>
here is the related markup :-
<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">
<nobr>Item Number</nobr>
</h3></td>
<td width="350" class="ms-formbody" valign="top">
<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>
<span class="ms-metadata">Do not customize at the list level</span>
</td></tr>
EDIT
now i tried this script :-
<script>
$(function () {
$('.ms-formtable table').each(function () {
$(this).find('tr').each(function () {
$(this).find('td').text() = 'Item Number';
$(this).remove();
}
});
});
</script>
but did not hide the Item Number field...

Hope this is what you are looking for .
$('tr').each(function(){
var count=0;
$(this).find('td').each(function(){
if($(this).text()=='Item Number'){count=count+1;}
if($(this).find('input[title="Item Number"]')){count=count+1;}
});
if(count==2){$(this).hide();}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
</head>
<body>
<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">
<nobr>Item Number</nobr>
</h3></td>
<td width="350" class="ms-formbody" valign="top">
<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>
<span class="ms-metadata">Do not customize at the list level</span>
</td>
</tr>
</table>
</body>
</html>
Code snippet output will be an empty page,as in example table is having only one row which has 2 td's as mentioned,so am hiding the row,based on the creteria.

Your script and HTML has a few issues.
In your html there is no text inside any of the td's and you have the following query :
var frstVal = $(this).find('td').eq(0).text(); // how is this query going to retrive anything at all ?
The issue with your script is you're iterating over all the tr's but you're caching only the text() of the first td inside every tr, so change the script to the following :
$(function() {
$('.ms-formtable tr').each(function() {
$(this).find('td').each(function(){
var str_text = $(this).text();
if (str_text.match(/Item Number|customer Initials/i)) {
$(this).text(' ');
}
});
});
});
Fiddle here
Edit
You're selecting the wrong element, the below query is wrong :
var str_text = $(this).text();
$(this) is pointing to tr , you need to go inside tr and find nobr and then perform your action.
$('.ms-formtable table').each(function () {
$(this).find('tr').each(function () {
var str_text = $(this).find('td nobr').text();
// console.log(str_text);
if (str_text.match(/Item Number/i)) {
$(this).find('input').remove(); // add this to remove input
$(this).text(' ');
}
}
});
});

how to disable in another select box when the other selection box is selected in the same row using jquery

I want to do disable in another select box when the other selection box is selected (option value = 3) in the same row.
There are many rows in a table. In each row, there has three select box in each column. If I selected the select box in first column and the option value of selected box is 3, I want to make disable the second select box in the same row.
I wrote the code as the followings.
my code is not working when the new row added in the table after I click Add Row button. I need some guideline.
javascript :
<!-- add new row -->
<script>
$(document).ready(function() {
var id = 0;
// Add button functionality
$("#addrow").click(function() {
id++;
/*var master = $(this).parents("table.fancyTable");*/
var master = $(this).parents("table.stdform");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "");
/*prot.find(".id").attr("value", id);*/
master.find(".fancyTable tbody").append(prot);
$(".fancyTable tbody tr:nth-child(odd)").addClass("odd");
$(".fancyTable tbody tr:nth-child(even)").addClass("even");
});
});
</script>
<!-- change select box -->
<script>
$(document).ready(function() {
$('.processing_code').bind('change', function(){
var data = $(this).val();
alert(data);
if(data == 3){
$(this).parent('td').siblings().find(".parameter1").attr("disabled", "true");
}
});
});
</script>
css :
<style>
.fancyTable .prototype {
display:none;
}
.odd{
background-color: #ddd;
}
.even{
background-color: #eee;
}
</style>
jsp :
<input type="button"
name="btn_JobTempReg_addrow" class="mediumbutton"
value="Add Row" id="addrow" />
<div class="container_12 ">
<div class="grid_job_mod height400">
<table class="fancyTable" id="sortable-table"
cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th>header one</th>
<th>header two</th>
<th>header three</th>
</tr>
</thead>
<tbody id="job-tbody">
<tr class="prototype">
<td>
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</td>
<td>
<s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
</td>
<td>
<s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
</td>
</tr>
<s:iterator value="p_jobTmpEnt" var="temEnt" status="status">
<tr>
<td>
<s:if test="#temEnt.processing_code == 1">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
<s:if test="#temEnt.processing_code == 2">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="2" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
<s:if test="#temEnt.processing_code == 3">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="3" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
</td>
<td>
<s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
</td>
<td>
<s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
</div>
Thanks in advance.

$('.processing_code').change(function() {
if($(this).val() ==3)
$(this).next('select').attr("disabled", "true");
else
$(this).next('select').attr("disabled", "false");
});

try this..
<script>
$(document).ready(function() {
$('.processing_code').bind('change', function(){
var data = $(this).val();
if(data == 3){
$(this).parent('td').siblings()
.find(".parameter1")
.attr("disabled", "disabled");
}
});
});
</script>