default value with ajax on jqgrid - php

I'm using phpGrid library based on jqgrid and I have this function:
onSelectRow: function(id){
var grid = $(this);
if(id && id!==lastSel){
grid.restoreRow(lastSel);
lastSel = id;
var rd = jQuery("#php_temp_det_vo").jqGrid("getCell", id, "status");
if(rd == 1){
alert("Data cannot be changed");
$("#'. $this->jq_gridName .'").trigger("reloadGrid");
}
else{
$(function(){ $("#begin_km").val("123"); });
}
}
grid.editRow(id, true,oneditfunc,"","","",aftersavefunc);
}
I need to dynamically give default value to one column called begin_km depends on some function that I will generate later. I wanted to try $(function(){ $("#begin_km").val("123"); }); first without that function I mentioned, but it doesn't work whereas it works on a simple html page:
the ajax
$(function(){ $("#aaa").val("123"); });
the html
<input type="text" id="aaa" />
What is the problem and how can I fix it?
EDITED:
Here's a slice of my jqgrid column model *refering to begin_id as column ID
<script type="text/javascript">
...
colModel:[{"name":"id","id":"id","index":"id","hidden":true},
{"name":"begin_km","id":"begin_km","index":"begin_km","hidden":false,"align":"right"},
...
</script>

You can set the cell values using setCell
onSelectRow: function(id){
var grid = $(this);
if(id && id!==lastSel){
grid.restoreRow(lastSel);
lastSel = id;
var rd = jQuery("#php_temp_det_vo").jqGrid("getCell", id, "status");
if(rd == 1){
alert("Data cannot be changed");
$("#'. $this->jq_gridName .'").trigger("reloadGrid");
}
else{
grid.jqGrid('setCell', id, 'begin_km', "123");
}
}
grid.editRow(id, true,oneditfunc,"","","",aftersavefunc);
}

Related

Select and Delete multiple rows by selecting checkboxes using PHP

Delete multiple rows by selecting checkboxes using PHP
Hi iam working on select and delete multiple rows from database using below code problem is iam having problem with php script
<input class='file' type="checkbox" class="form-control" name="hid" id="<?php $rs["carimgid"]; ?>" placeholder="Please choose your image">
this my ajax script where using this to delete multiple row without refresh
<script type="text/javascript">
$(document).ready(function(){
jQuery('#master').on('click', function(e) {
if($(this).is(':checked',true))
{
$(".sub_chk").prop('checked', true);
}
else
{
$(".sub_chk").prop('checked',false);
}
});
jQuery('.delete_all').on('click', function(e) {
var allVals = [];
$(".sub_chk:checked").each(function() {
allVals.push($(this).attr('data-id'));
});
//alert(allVals.length); return false;
if(allVals.length <=0)
{
alert("Please select row.");
}
else {
//$("#loading").show();
WRN_PROFILE_DELETE = "Are you sure you want to delete this row?";
var check = confirm(WRN_PROFILE_DELETE);
if(check == true){
//for server side
var join_selected_values = allVals.join(",");
$.ajax({
type: "POST",
url: "delete.php",
cache:false,
data: 'ids='+join_selected_values,
success: function(response)
{
$("#loading").hide();
$("#msgdiv").html(response);
//referesh table
}
});
//for client side
$.each(allVals, function( index, value ) {
$('table tr').filter("[data-row-id='" + value + "']").remove();
});
}
}
});
jQuery('.remove-row').on('click', function(e) {
WRN_PROFILE_DELETE = "Are you sure you want to delete this row?";
var check = confirm(WRN_PROFILE_DELETE);
if(check == true){
$('table tr').filter("[data-row-id='" + $(this).attr('data-id') + "']").remove();
}
});
});
</script>
and my php code is
<?php
include("config.php");
if(isset($_POST['ids'])){
$result=mysqli_query($con,"DELETE FROM carimg WHERE carimgid ='$id'");
}
?>
Delete multiple rows by selecting checkboxes using PHP
Hi iam working on select and delete multiple rows from database using below code problem is iam having problem with php script
You haven't got the ids from POST.
Look at the following
$ids = mysqli_real_escape_string($con, $_POST['ids']);
if(!empty($ids)){
$result=mysqli_query($con,"DELETE FROM carimg WHERE carimgid IN ({$ids})");
}

Passing 2 datas from AJAX to PHP

So I'm trying to pass 2 datas from AJAX to PHP so I can insert it in my database but there seems to be something wrong.
My computation of the score is right but it seems that no value is being passed to my php file, that's why it's not inserting anything to my db.
AJAX:
<script type = "text/javascript" language="javascript">
$(document).ready(function() {
$("#finishgs").click(function(){
var scoregs = 0;
var remarkgs = "F";
var radios = document.getElementsByClassName('grammar');
for (var x=0; x<radios.length; x++){
if (radios[x].checked) {
scoregs++;
}
else
scoregs = scoregs;
}
if (scoregs >= 12){
remarkgs = "P";
}
else{
remarkgs = "F";
}
});
});
$(document).ready(function() {
$("#GTScore").click(function(event) {
$.post(
"dbinsert.php",
{ scoregs:scoregs , remarkgs: remarkgs},
function(data){
$('#inputhere').html(data);
}
);
});
});
PHP:
if( $_REQUEST["scoregs"] || $_REQUEST["remarkgs"]) {
$scoregs = $_REQUEST['scoregs'];
$remarkgs = $_REQUEST['remarkgs'];
}
There is an extra closing bracket );, you should remove. Try this:
$(document).ready(function() {
$("#GTScore").click(function(event) {
event.preventDefault();//to prevent default submit
$.ajax({
type:'POST',
url: "dbinsert.php",
{
scoregs:scoregs ,
remarkgs: remarkgs
},
success: function(data){
$('#inputhere').html(data);
}
});
});
And in php, you need to echo the variable or success/fail message after you insert data into the database:
echo $scoregs;
echo $remarkgs;

jQuery Confirm on click of button

I have the following code that works in conjunction with a "value" that is given from data inputted into an input box.
How would I alter this code to just send the data - product_details['id'] without the need for input data?
Example jQuery Code:
$('body').on("click", "#product_change_set_order_btn", function (e) {
e.preventDefault();
var box = $("#product_set_order_box");
var id = box.data("id");
var url = box.data("url");
var data_array = {
id : id,
new_sort : box.val(),
};
if($.trim(box.val()) != "")
{
ajaxCall(url, data_array, null, "product_set_order");
alert("Your Sort Order Has Been Set");
}
});
HTML Button:
Delete <?php echo $product_details['name']; ?>
$('body').on("click", "#product_change_set_order_btn", function (e) {
e.preventDefault();
var box = $("#product_set_order_box");
var id = box.data("id");
var url = box.data("url");
var data_array = {
id : id,
new_sort : box.val(),
};
ajaxCall(url, data_array, null, "product_set_order");
alert("Your Sort Order Has Been Set");
});

Jquery Select list items in loop using keyup and key down

I am trying to make autosuggest in Jquery,ajax and json to search cities when user register to website.
So far I am able to get results from database.And i appended to list.but now i need to select data using up down and enter keys.
Key down event is adding class to first city. But I want to loop through all results using key up and down and add value to city textbox if user hits enter. I limit data by 5 in php so 5 results are coming in list item.
Here is my code:
$('#city').keyup(function (event) {
var input_query = $(this).val();
$.post("get_city.php", {
"query": input_query
}, function (data) {
$('#cityres').html("");
$.each(data, function (i, item) {
$('#cityresults').append("<li>" + item.city + "</li>");
});
}, "json");
//below code is for key event
var key = gtKeycode(event);
if (key == 40) {
// I am not sure i need to do this way
$('li').first().addClass('SelectedCity');
}
});
function gtKeycode(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
return code;
}
i think i have now the solution for your problem hope this will help you..!
I made a php file that echo out json encode just list this:
//PHP "action.php?action=show"
e.g $option[] = array(
'option0'=>".Choose an option",
'option1'=>'somepage1',
'option2'=>'somepage2',
'option3'=>'somepage3');
echo json_encode(array('options'=>$option));
I made up html that will be the handler of the output, then will append
<select class="myoptions">
</select> | <span class="optcap"></span>
JS
function selectedOption()
{
var myoptions = $(".myoptions");
$.ajax({
type:'GET',
url:'action.php?action=show',
dataType:'JSON',
success:function(data){
if(data.s==1){
myoptions.empty();
$.each(data.options, function(x,val){
myoptions.append("<option class='option' value='"+val.option0+"'>"+val.option0+"</option>"
+"<option class='option' value='"+val.option1+"'>"+val.option1+"</option>"
+"<option class='option' value='"+val.option2+"'>"+val.option2+"</option>"
+"<option class='option' value='"+val.option3+"'>"+val.option3+"</option>");
});
}
}
});
}
$(document).ready(function(){
selectedOption();
$(".myoptions").keyup(function(){
var option = [];
$("option.option:selected").each(function(x){
option[x] = $(this).val();
});
$(".optcap").html("["+option+"]");
});
});

Why is jQuery autocomplete updating all elements on my cloned form?

I have a form that uses the jQuery UI autocomplete function on two elements, and also has the ability to clone itself using the SheepIt! plugin.
Both elements are text inputs. Once a a value is selected from the first autocomplete (continents), the values of the second autocomplete (countries) are populated with options dependent on the first selection.
My problem is, when clones are made, if the user selects an option from the first autocomplete (continent), it changes the first input values on all clones. This is not happening for the second input (country).
What am I missing?
Note: the #index# in the form id and name is not CFML. I am using PHP, and the hash tags are part of the SheepIt! clone plugin.
Javascript:
<script src="../../scripts/jquery-1.6.4.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.core.js"></script>
<script src="../../scripts/jquery.ui.widget.js"></script>
<script src="../../scripts/jquery.ui.position.js"></script>
<script src="../../scripts/jquery.ui.autocomplete.js"></script>
<script src="../../scripts/jquery.sheepIt.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function ord(chr) {
return chr.charCodeAt(0);
}
function chr(num) {
return String.fromCharCode(num);
}
function quote(str) {
return '"' + escape(str.replace('"', "'")) + '"';
}
String.prototype.titleCase = function () {
var chars = [" ", "-"];
var ths = String(this).toLowerCase();
for (j in chars){
var car = chars[j];
var str = "";
var words = ths.split(car);
for(i in words){
str += car + words[i].substr(0,1).toUpperCase() + words[i].substr(1);
}
ths = str.substr(1);
}
return ths;
}
function incrementTerm(term) {
for (var i = term.length - 1; i >= 0; i--){
var code = term.charCodeAt(i);
if (code < ord('Z'))
return term.substring(0, i) + chr(code + 1);
}
return '{}'
}
function parseLineSeperated(data){
data = data.split("\n");
data.pop(); // Trim blank element after ending newline
var out = []
for (i in data){
out.push(data[i].titleCase());
}
return out;
}
function loadcontinent(request, response) {
var startTerm = request.term.toUpperCase();
var endTerm = incrementTerm(startTerm);
$.ajax({
url: '/db/continent.php?startkey='+startTerm+'&endkey='+endTerm,
success: function(data) {
var items = parseLineSeperated(data);
response(items);
},
error: function(req, str, exc) {
alert(str);
}
});
}
function loadcountry(request, response) {
var startTerm = request.term.toUpperCase();
var endTerm = incrementTerm(startTerm);
var continent = $('.continent_autocomplete').val().toUpperCase();
$.ajax({
url: '/db/country.php?key=' + continent,
success: function(data) {
var items = parseLineSeperated(data);
response(items);
},
error: function(req, str, exc) {
alert(str);
}
});
}
$('#location_container_add').live('click', function() {
$("input.continent_autocomplete").autocomplete(continent_autocomplete);
$("input.continent_autocomplete").keyup(continent_autocomplete_keyup);
$("input.country_autocomplete").autocomplete(country_autocomplete);
$("input.country_autocomplete").keyup(country_autocomplete_keyup);
$('input.country_autocomplete').focus(country_autocomplete_focus);
});
var location_container = $('#location_container').sheepIt({
separator: '',
allowRemoveLast: true,
allowRemoveCurrent: false,
allowRemoveAll: false,
allowAdd: true,
allowAddN: false,
maxFormsCount: 10,
minFormsCount: 1,
iniFormsCount: 1
});
var continent_autocomplete = {
source: loadcontinent,
select: function(event, ui){
$("input.continent_autocomplete").val(ui.item.value);
}
}
var continent_autocomplete_keyup = function (event){
var code = (event.keyCode ? event.keyCode : event.which);
event.target.value = event.target.value.titleCase();
}
var country_autocomplete = {
source: loadcountry,
}
var country_autocomplete_keyup = function (event){
event.target.value = event.target.value.titleCase();
}
var country_autocomplete_focus = function(){
if ($(this).val().length == 0) {
$(this).autocomplete("search", " ");
}
}
$("input.continent_autocomplete").autocomplete(continent_autocomplete);
$("input.continent_autocomplete").keyup(continent_autocomplete_keyup);
$("input.country_autocomplete").autocomplete(country_autocomplete);
$("input.country_autocomplete").keyup(country_autocomplete_keyup);
$('input.country_autocomplete').focus(country_autocomplete_focus);
});
</script>
HTML:
<div id="location_container">
<div id="location_container_template" class="location_container">
<div id="continent_name">
<label> Continent Name:</label>
<input type="text" id="continent_name_#index#" name="continent_name_#index#" class="continent_autocomplete" />
</div>
<div id="country">
<label> Country:</label>
<input type="text" id="country_autocomplete_#index#" name="country_autocomplete_#index#" class="country_autocomplete" />
</div>
</div>
</div>
select: function(event, ui){
$("input.continent_autocomplete").val(ui.item.value);
}
That code says explicitly to set the value of every <input> with class "continent_autocomplete" to the selected value.
You probably want something like
$(this).val(ui.item.value);
but it depends on how your autocomplete code works.
This line: $("input.continent_autocomplete").val(ui.item.value); is updating all inputs with class continent_autocomplete.
UPDATE:
From jQueryUI Autocomplete Doc:select:
Triggered when an item is selected from the menu; ui.item refers to
the selected item. The default action of select is to replace the text
field's value with the value of the selected item. Canceling this
event prevents the value from being updated, but does not prevent the
menu from closing.
You shouldn't need the select bit at all, it looks like you're simply trying to achieve the default action.

Categories