SOLVED
I have duplicated element ID on the page.
My update table does not work. I have dialog form that selects the data from jqGrid row,
and this is the code.
function editDialog() {
//cek baris terpilih
var selr = jQuery('#list1').jqGrid('getGridParam','selrow');
if(!selr){
alert("Harap pilih baris yang ingin di edit")
return}
var namapelanggan = jQuery('#list1').jqGrid('getCell', selr, 'namapelanggan');
var alamatpelanggan = jQuery('#list1').jqGrid('getCell', selr, 'alamat');
var telppelanggan = jQuery('#list1').jqGrid('getCell', selr, 'telepon');
$("input#namapelanggan").val(namapelanggan);
$("input#alamatpelanggan").val(alamatpelanggan);
$("input#telppelanggan").val(telppelanggan);
$( "#editDialog" ).dialog("open");
}
and below is the jquery code
$(document).ready(function () {
$dialog = $("#editDialog")
.dialog({
autoOpen: false,
position: 'center',
hide: 'explode',
modal: true,
width: 'auto',
height: 'auto',
closeOnEscape: true,
buttons: [{ text: "Simpan", click: function (){
var
xnama = $("input#namapelanggan").val();
xalamat = $("input#alamatpelanggan").val();
xtelp = $("input#telppelanggan").val();
$.ajax({
type: "POST",
url: "/sis/modul/mod_pelanggan/upelanggan.php",
data: {"nama":xnama,
"alamat":xalamat,
"telp":xtelp,
success: function(result){
jQuery("#list1").trigger("reloadGrid");
},
error: function(xhr, ajaxOptions, thrownError){
alert('Terjadi kesalahan, Error Kode: ' + xhr.status);}
}
);
$( this ).dialog( "close" );
}},
{ text: "Batal", click: function () { $(this).dialog("close"); } }]
});
});
here is the upelanggan.php for query update the table.
<?PHP
include "../../../config/koneksi.php";
if ($_SERVER['REQUEST_METHOD'] == 'POST') { //halaman ini harus dipanggil melalui post
$nama = $_POST["nama"];
$alamat = $_POST["alamat"];
$telp = $_POST["telp"];
$sql="UPDATE tpelanggan SET namapelanggan='".$nama."' ,alamat='".$alamat."',telepon='".$telp."' WHERE idpelanggan=1 ";
$q = mysql_query($sql);
}
?>
User clicks edit from selected row then the dialog form is opened. User changes the input value id namapelanggan and clicks the button 'Simpan' to save changed. But it doesn't work, the table not updated.
In first check that POST request is running.
You can make it by FireBug on tab "Console" or "Net"
Also you can check it by access log on your web server.
Also in your code I found errors in $.ajax run:
Strange "nopolisi":xnopolisi because varaible xnopolisi not defined.
Not exists closed brackes } for data field.
Check Javascript console for errors and fix it.
Related
I'm new to HTML and ajax. I'm trying to insert a ip list from flask , to the ajax and trigger the js function to blink.
but somehow I can't find a way to insert the ip variable (response[i]) into the function value column in a right way.
it is to trigger the blink on the required ip tab in html.
function ajaxForm(){
// var form= new FormData(document.getElementById("myform2"));
var data = {"name":"John Doe"}
$.ajax({
url:"{{ url_for('Submit_form') }}",
type:"post",
contentType:'application/json',
data:JSON.stringify(data),
dataType: "json",
processData:false,
// async: false
success:function(response){
// alert(response)
if (response == "success")
{alert("Success !!!" );}
else {
for(i in response)
{
BLINK(response[i]);
}
}
},
// #time out 也进入 error
error:function(e){
// alert(e.)
alert("Failed submit form trigger!!!!");
}
})
}
<script type="text/javascript">
function BLINK(){
var t = null;
function blink() {
var obj = $('input[id="IP"][value=response[i]]') . <---- here
obj.addClass("blink-class");
t = setTimeout(function () {
obj.removeClass("blink-class");
t = setTimeout(function () {
blink(IP);
}, 550);
}, 550);
}
blink(IP);
t = setTimeout(function () {
clearTimeout(t);
}, 5000);
}
At first, you shoul always provide the HTML code too :) because now we dont know if the issue is there.
So let's try to solve the problem blindly :)
if i see this correctly, you just go wrong on the element and make it even more complicated than it is since you're using jquery, because if u have an ID on your elem, check this out:
// change this:
var obj = $('input[id="IP"][value=response[i]]') . <---- here // .. is your problem :)
obj.addClass("blink-class");
// with the dot you add this obj, which is it self, on it self :) that cant work :)
// you can try:
var obj = $('input[value="' + response[i] + '"]') // with NO dot and no fixed ID!
obj.addClass("blink-class");
// or try this
var obj = $('#' + response[i]);
obj.addClass("blink-class");
// and put the IP into the ID attraktion of your input element.
Second Problem is you are using an undefined variable "ID":
blink(IP); // in your timeout function
but you didnt declare this var, so if i understand your code right then your response[i] should be the IP?
Your function should look like this:
function BLINK(IP) { // <-- here you need the ip as parameter for your: BLINK(response[i]) from ajax
var t = null;
function blink() {
var obj = $('#' + IP) // and put IP in the id from input
obj.addClass("blink-class")
t = setTimeout(function () {
obj.removeClass("blink-class");
t = setTimeout(function () {
blink(IP);
}, 550);
}, 550);
}
blink(IP);
t = setTimeout(function () {
clearTimeout(t);
}, 5000);
}
try this, if its doesnt work please provide complete html and your css code too, also we could need an eventually error message from console, you can see that by pressing F12 in FireFox or Chrome and then switch to the console tab, press F5 then to reload the page and see errors, post it too please.
Or try out my jsfiddle for you:
https://jsfiddle.net/AIQIA/tjg659sr/17/
You have to remove dots from your IP and put it as id in your elem you wants get to blink, further you need to remove the dots from the response[i] or in your php code before, easy use $ip = preg_replace('/\./','',$ip);
Or use this to use only the complete IP in your input value, then you dont need to remove dots:
https://jsfiddle.net/AIQIA/tjg659sr/21/
greetz Toxi
Maybe I'm not used to using functions, but I'm having trouble getting bootstrap popovers to return a string derived from a function. Can anyone help please?
$(".person").popover({
title: 'Default title value',
trigger: 'hover',
html: true,
content: function(){
var thisID = $(this).attr('id');
$.ajax({
type: 'GET',
url: "people.xml",
dataType: "xml",
success: function(xml) {
var xmlID = $(xml).find("id");
$(xmlID).each(function(id, item) {
if ($(item).text() == thisID) {
console.log($(item).parent().find('name').text()); //this is the correct name
return $(item).parent().find('name').text(); //but nothing appears in the popover content
}
});
}
});
}
});
I abandoned the idea of using xml and just used arrays instead:
$(".person").popover({
title: function(){
var thisID = $(this).attr('id');console.log(thisID);
thisID = thisID.replace("num","");console.log(thisID);
return arrNames[thisID];
},
trigger: 'hover',
html: true,
content: function(){
var thisID = $(this).attr('id');
thisID = thisID.replace("num","");
return arrTitles[thisID];
}
});
I'm using Firefox and working on a page when I notice that & turns into &.
Usually I can fix this by using html_entitiy_decode() - but in this case it's not working.
Then I discovered this. The alert is fired once the page is loaded.
Before
After
The data is loaded using PHP / Yii - not through JS / Ajax. I am however adding / removing brands using JS Knockout.
<ul data-bind="template: { name: 'brand-item-template', data: $root.brands}">
<li>
<span id="<?= $brand->id?>" data-bind="text: brand_name, attr: {'id': brand_id}"><?= $brand->name; ?></span>
</li>
</ul>
Update
I've discovered that this JS Knockout code is what makes the change. But this code should not be triggered until I add a brand. So why is this affecting my &s?
It's the self.addBrand = function() that makes the change. If I remove this function and leave the rest as it is, everything is fine. Can it be a Knockout bug?
$('#store.manage-special-offers').exists(function(){
Store.mangeSpecialOffers();
});
function manageBrandListModel() {
var self = this;
var store_id = $('.data-item-id').val();
var exiting_list = $('.brand-list ul').clone();
// Data
self.brands = ko.observableArray(create_list(exiting_list));
self.brand_name = ko.observable();
self.brand_id = ko.observable();
self.store_id = ko.observable(store_id);
// This is the function that makes the chage
self.addBrand = function() {
if (self.brand_name() != "") {
// Update DB
$('#store.manage-brands').exists(function(){
$.ajax({
url: site_url + '/associatebrand',
type: "POST",
dataType: 'json',
data: {
Brand: {
brandId : self.brand_id(),
storeId : self.store_id(),
add : true
}
},
success: function (data) {
// Add brand to GUI list
self.brands.push(new brand(self.brand_id(), self.brand_name()));
self.brand_name("");
}
});
});
}
}.bind(self);
(...)
function create_list(exiting_list){
var arr_list = [];
$(exiting_list).find('li').each(function(e,li){
var id = $(li).find('span').prop('id');
var name = $(li).find('span').html(); // <--- This is the problem. Must be .text()
arr_list.push(new brand(id,name));
});
return arr_list;
}
Can anyone explain why this is happening?
The credit should really go to both JeremyCook and Quentin for pointing me in the right direction.
$(exiting_list).find('li').each(function(e,li){
var id = $(li).find('span').prop('id');
var name = $(li).find('span').html(); // <--- This is the problem. Must be .text()
arr_list.push(new brand(id,name));
});
What I did wrong was that I used .html() and the text was returned in HTML format. Changing this to .text() solved my problem.
I have the following JQuery/AJAX code:
$("button#submit").click(function () {
var form = $('#pick-status-form');
var selectedStatusID = form.find('input[name=statusesList]:checked').val();
//Get the last checked value of the Radio Button
$.ajax({
type: "GET",
url: "updateStatusID.php",
data: { 'refID': lastRefId,
'statusID': selectedStatusID
},
success: function (msg) {
var selectedText = $.trim($('input:radio:checked').parent('label').text());
alert(selectedText);
//Get the text next to the radio button
$("button.btn.btn-default,button.btn.btn-primary").removeClass("disabled");
},
error: function () {
alert("Error");
}
});
});
$("input:radio").removeAttr("checked");
});
The following code:
var selectedText = $.trim($('input:radio:checked').parent('label').text());
alert(selectedText);
Works great in the following function :
$('.statuses-list').change(function () {
var selectedText = $.trim($('input:radio:checked').parent('label').text());
alert(selectedText);
});
But when I put it in the AJAX function it doesn't work (get a null alert).
My question is how can I fix it?
data: {
'refID': lastRefId,
'statusID': selectedStatusID
},
What is lastRefId ? Open your console in browser , I think you will get the js error
I am using JQuery UI remote autocomplete with Categories.
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
cat = currentCategory;
self._renderItem( ul, item );
});
}
});
$(function() {
$( "#birds" ).catcomplete({
delay:0,
source: "/search.html?term="+ $("#birds").val(),
minLength: 2,
select: function( event, ui ){
alert(ui.item.value);
}
});
});
The following is the result I get from the source:
[{"value":"Just a Product","id":"1","category":"Category Name"}]
The problem is that I can't get the alert(ui.item.value) to work and display the selected item.
Any help please?
Thanks.
This is not how you deal with the source.
see this.. http://api.jqueryui.com/autocomplete/#option-source
you can use
array
string
callback function
if you want to receive data from a page in json format, use jquery's $.ajax()
see this for ajax http://api.jquery.com/jQuery.ajax/
you can do something like
$.ajax({url: 'search.php?term='+$("#birds").val(),
dataType: 'json',
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Accept","application/json");
},
async: false,
success: function(data){
bArray=new Array;
bJson=data;
bArray.push(bJson[0].value);
bArray.push(bJson[0].id);
bArray.push(bJson[0].category);// for multiple records put these 3 lines in loop and replace 0 with a counter
}
});
$( "#birds" ).autocomplete({
source: bArray,
select:function(event,ui)
{alert(ui.item.value);}
});
dont forget to declare bArray, bJson
BUT i would still say you are doing it wrong. Instead of using value,id,category together you use use only one of them as autocomplete. can you tell what are you exactly showing in autocomplete