So I have this gridview:
<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'symptoms-grid',
'selectableRows'=>1, //ability to select one symptom at a time
'dataProvider'=>$model->search(),
'htmlOptions'=>array('id'=>'symptomsSearchgrid'),
'columns'=>array(
'symptomCode',
'title',
'inclusions',
'exclusions',
'symptomCategory',
),
)); ?>
And this javascript....script:
Yii::app()->clientScript->registerScript('search', "
$( document ).ready(function() {
$('#symptomSelectDiv').hide();
$('#categorySelectDropDown').change(function(){
$('#symptomSelectDiv').show();
$('#symptoms-grid').yiiGridView('update', {
data: $(this).serialize()
});
return false;
});
$('#symptomsSearchgrid table tbody tr').on('click', function() {
var firstColVal = $(this).find('td:first-child').html();
$('#symptomToBeSearched').val(firstColVal);
});
});
");
My problem is that I can only either get the
$('#symptoms-grid').yiiGridView('update', {
data: $(this).serialize()
});
function to work or the:
$('#symptomsSearchgrid table tbody tr').on('click', function() {
var firstColVal = $(this).find('td:first-child').html();
$('#symptomToBeSearched').val(firstColVal);
});
one, and it seems quite random too. Basically in order to get the other function to "start working" I have to change the id (either the grid id or the DOM id) of one function to something different for the other function to work (while the other doesn't).
So let's say at first the update function works and the click function doesn't. Then I change the ID of update to something wrong and click works. Then I change the id of update back to the correct one, but it still doesn't work, yet click works. THen I change click to a wrong id and update starts working correctly. But again, if I change click to the correct id it doesn't work.....
Any ideas what I'm doing wrong?
I think your issue is that your are giving your grid two id's one when creating it and one in htmloption.
Related
Okay, so this little bit of code either posts and then updates #arrival, or it removes it and replaces it with standard text. One click posts, one click resets. The problem I'm having, and cannot figure out, is that the code as is requires two clicks to do the initial posting, and then one click to remove and one click to post again ad infinitum. But it first requires two clicks to get to working.
Any help would be appreciated.
$(document).ready(function(){
$("#change").click(function(e) {
e.preventDefault();
var data = {};
$.each($('input[name^="u\\["]').serializeArray(), function() {
var vv = this.name.replace(/u/, '' ).replace(/(\[[]\])$/,'');
data[vv] = this.value;
});
var clicks = $(this).data('clicks');
if (clicks) {
// odd clicks
$.ajax({
type : "POST",
cache : false,
url : "napad.php?n=<?=$_GET['n']?>&o=<?=$_GET['o']?>&arrival",
data : {'X': data},
success: function(data) {
$("#arrival").html(data);
}
});
} else {
// even clicks
$('#arrival').contents().remove();
$('#arrival').append('Arrival Time: Normal');
}
$(this).data("clicks", !clicks);
});
});
If you saying you doesnt want it firing 2 times but you want it trigger the event one time clicking.
try to add this on you jquery function.
$("#change").unbind("click").click(function() {
// Your code
});
Let me know if it works. Thanks. :)
I have a Jquery DataTable with multiselect ability. Moreover there is a button and a div element:
<script>
$(document).ready(function() {
var tablemovChAf = $('#movChAf').DataTable({
//multiselect
$('#movChAf tbody').on('click', 'tr', function () {
$(this).toggleClass('selected');
} );
})
</script>
<button name="sbmsimulate" class="button-input btn btn-info" id="sbmsimulate" style="info" type="button" >
<div id="divAccMovement"></div>
What I want is to send all the selected rows to "accMovement.jsp" by clicking on the button.
$('#sbmsimulate').click( function () {
$('#divAccMovement').load('accMovement.jsp',{
mode:"2",
arrayData:tablemovChAf.rows('.selected').data()
});
} );
my jsp accMovement.jsp looks like this;
<%
String str_mode=request.getParameter("mode").toString();
String[] arrayData=null;
if (str_mode.equals("2")) {
arrayData=request.getParameterValues("arrayData[]");
}
%>
I tried the solution of : Passing javascript array to servlet (In fact, that is what I have done) but it didnt work for me. Nothing happens when I click the button.
I was debugging, and it seems the problem is with:
arrayData:tablemovChAf.rows('.selected').data()
because, if it is commented (and the "if" statement in the jsp is commented also) it is working. However what I need is to send the selected rows to the jsp page.
What is the correct way to send the array from the client and receive the array on the server?
Thanks in advance.
I found a solution not so smart for my case (following this jQuery DataTables Getting selected row values), it does not exactly what I need, but I can add some statements later in order to achive my goal
$('#sbmsimulate').click( function () {
var ids = $.map(tablemovChAf.rows('.selected').data(), function (item) {
return item[11]
});
$('#divAccMovement').load('accMovement.jsp',{
mode:"2",
arrayData:ids
});
} );
The column of index 11 is the id of my dataTable, so in the server side I can get all the information about every row.
However I would like to avoid that step:
var ids = $.map(tablemovChAf.rows('.selected').data(), function (item) {
return item[11]
});
and specify everything in the parameter, something like this :
arrayData:tablemovChAf.rows('.selected').data()
This is homework, just declaring it now.
I have to load a 'quiz' via XML (completed successfully), and generate td cells (done) to display said questions (not done, test data instead).
Here is my source code for the javascript
var selected;
var $cell;
var $cell2;
$(document).ready(function() {
$("#getTitle").click(function() {
selected = $("#quizname>option:selected").text();
$("#quiztitle").html(selected+" Quiz");
$("#quiz2").html(selected+" Quiz");
murl = "quizdata.xml";
$.ajax({type:"GET",
url:murl,
success:loaddata,
cache:false,
dataType:"xml",
data:selected,
error:ajaxerror
});
});
});
var $xml;
function loaddata(respobj,status,xhr) {
//to do:
//dynamic td creation for each xml question
$("#questions").empty();
$xml = $(respobj).find("quiz:contains("+selected+")");
for (var i=0;i<$xml.attr("qnum");i++) {
$('<tr>').attr("id","questions"+(i+1)).appendTo("#questions");
$("<td>").attr("id","question"+(i+1)).appendTo("#questions"+(i+1));
$("#question"+(i+1)).html((i+1)+". "+$xml.find("question[num='"+(i+1)+"']").text());
$("#question"+(i+1)).addClass("th.thirty");
$("<td>").attr("id","blank_question"+(i+1)).appendTo("#questions"+(i+1));
$("#blank_question"+(i+1)).addClass("question");
$("#blank_question"+(i+1)).html("Put Answer Here");
$("<td>").attr("id","answer"+(i+1)).appendTo("#questions"+(i+1));
$("#answer"+(i+1)).addClass("question");
$("#answer"+(i+1)).html((i+1)+". "+$xml.find("answer[num='"+(i+1)+"']").text());
$("#answer"+(i+1)).click(selectCell);
}
}
function selectCell() {
$cell = $(this);
$cell.css("background-color","red");
for (i=0;i<$xml.attr("qnum");i++) {
$("#blank_question"+(i+1)).click(function() {
$cell2 = $(this);
$cell.css("background-color","lightgray");
temp_text = $cell.text();
temp_id = $cell.attr("id");
$cell.attr("id",$cell2.attr("id"));
$cell.text($cell2.attr('id'));
$cell2.attr("id",temp_id);
$cell2.text(temp_id);
$("#answer"+(i+1)).unbind("click");
$("#answer"+(i+1)).bind("click", function() {
selectCell();
});
});
}
}
function swapCell() {
$cell.css("background-color","lightgray");
alert($(this).attr("id"));
}
function ajaxerror(xhr,status,error) {
$("td#desc").attr("class","");
$("td#desc").html("xhr="+xhr);
$("td#desc").append("<br /><br />status="+status)
$("td#desc").append("<br /><br />error="+error);
}
My issue is (try it here: HomeWork Link) that the first time you click the first cell, swap it with the second, it works. However, it only works every OTHER click and swap, which makes me think that there are some binding issues or focus issues because I need it to swap seamlessly. Is there an obvious error in the code or am I missing a specific focus/bind event?
Thanks!
Edit: the values being displayed AFTER swapping are the cells ID attribute
After googling "jquery recursive .click binding" I found that instead of .click() I changed it to .live() and that works perfectly.
I'm trying to sort out this problem but have yet to get results. I tried to get the exact id values of the row which I edit in order to perform an update.
I can get get my current cell value but I can't get the corresponding id values of the cell. I iterate over the table id value which in turn get's all the id values of the table.
I'm using this jquery code for iteration:
$('#table').ready(function() {
$(this).find('.filename').each( function() {
alert($(this).html());
})
})
Then I tried this simple JavaScript:
var fid= document.getElementById("filename").textContent;
It gets only the first id value of the table.
For example, if I edit the first row the id value is 53.
If I edit the second row the id value should be 52 but it gets only 53.
See this link, I have posted this question previously.
getElementById gets the element and not the id. The id is what you are providing as parameter.
You could simply do:
$('#table').ready(function() {
$(this).find('.filename').each( function() {
alert(this.id);
}) ;
});
Instead of cluttering the DOM with id's (which should always be unique) you could always use the data-attributes of elements:
<tr data-identifier="53"><td></td></tr>
$('#table').ready(function() {
$(this).find('.filename').each( function() {
// if this is the row
alert($(this).data('identifier'));
}) ;
});
I am not quite sure that i understand your question but this will give you ids of all cells within a table:
$("#table > td").each(function(){
alert($(this).attr("id"));
});
hi thanks for ur response ,i tried a different script and it was working as i thought
here is the code
function doubleclick(table,id1)
{
table.innerHTML="<input type=text name=tab onBlur=\"javascript:submitNewName(this,'"+id1+ "');\" value=\""+table.innerHTML+"\">";
table.firstChild.focus();
// alert(id1);
}
function submitNewName(text,id2)
{
text.parentNode.innerHTML=text.value;
$.ajax({
url: 'update',
data:{text1:text.value,fileid1:id2},
type:"POST",
dataType:"json",
error:function(data){
//alert('error')
},
success: function(data) {
//alert('updated!')
}
});
}
html:
//when double clicked it will pass both ${item.filedesc},${item.id}
<td ondblclick="javascript:doubleclick(this,${item.id});" >${item.filedesc}</td>
In my html page, I have a select with some options.
When selecting an option, an ajax call is fired passing the option's value to a php script, which returns an html fragment (another select) with a certain id that is appended to the page.
When the user selects another option from the first select, the event is fired again, the ajax call is executed and another html fragment (with the same id) gets appended to the page.
I want that, if the event is fired a second time, the appended element is removed form the page before appending the new one.
At the moment I'm using this code:
$(document).ready(function() {
$("#id_serie").change(function() { //#id_serie is the if of the first select
if ($("#id_subserie_label")) { //#id_subserie_label is the id of the html element returned by the ajax call
console.log("Removing");
$("#id_subserie_label").empty().remove();
}
var url = 'myscript.php';
var id_s = $(this).val();
$.post(url, {id_serie: id_s}, function(data) {
$("#id_serie").parent().after(data);
});
});
});
This is not working though, the html element returned by the second ajax call is appended after the element returned from the first call (because the element with id #id_subserie_label is not in the page when the script is loaded?).
How can I achieve what I need?
You're very close.
Just change if ($("#id_subserie_label")) to if ($("#id_subserie_label").length):
$(document).ready(function() {
$("#id_serie").change(function() {
if ($("#id_subserie_label").length) { // <=== change this line
console.log("Removing");
$("#id_subserie_label").empty().remove();
}
var url = 'myscript.php';
var id_s = $(this).val();
$.post(url, {id_serie: id_s}, function(data) {
$("#id_serie").parent().after(data);
});
});
});
See The jQuery FAQ: How do I test whether an element exists?.
This is because, as Ivo points out:
$("#id_subserie_label") is an object, and objects always evaluate to true.
As per Andy E's comment, you can simplify your code to this, if you don't need the console.log() call:
$(document).ready(function() {
$("#id_serie").change(function() {
$("#id_subserie_label").empty().remove();
var url = 'myscript.php';
var id_s = $(this).val();
$.post(url, {id_serie: id_s}, function(data) {
$("#id_serie").parent().after(data);
});
});
});