I am using CodeIgniter and DHTMLX to build my system. When my site first loads it show the DHTMLXGrid with all the data from the DB. And when I click on a record and press edit button, it will show the Formlayout.
In my form first field is description and then a checkbox which will enable few other select boxes. If i didn't change the checkbox status data won't get save in the DB. I have no idea what is wrong in my code. I am new to this. Any help would be highly appreciated.
workbench.js
if(buttonid=='save') {
eval(formSaveCallback);
myFormbar.validate();
if (defFrmSaveHandling) {
dhxLayout.cells('b').collapse();
search.grid.updateFromXML(search.grid.xmlLoader.filePath,true,true);
}
}
datalibrary.js
function Save(){
addForm.send(layoutBench.formDataUrl+'add/', "post", function(loader, response){
if (debug) console.log('Save return code is :-',response);
if(response==1) {
$('#info').fadeIn();
$('#info').html('Data is saved successfully');
$('#info').fadeOut(3000);
}
});
}
My controller and model works fine. I think the issue is because of the blur is not fired when I do not click on any other controls after adding the description may be if I can give a delay and enable the save buton it will work. But I don't no how to do that.
Any help regarding the matter?
Thanx.
I come up withe the answer to this.
It is that I have to call the blur function at the beginning of the save function.
function Save(){
addForm.getInput("description").blur();
//rest of the code
}
Related
I have a form which you can upload text data to a database and an image in the same form. Everything works well. I use jQuery AJAX with PHP to submit the form.
It submits well with the image if attached but the problem is that when I show the loader while uploading, the user still has the ability to refresh the page from the browser which sometimes uploads only the text and not the attached image which shows the post without an image. How can I prevent this from happening?
I did not share any codes for now because I did not know which way to go asking this question
You can show warning to user by using below method:
function enableBeforeUnload() {
window.onbeforeunload = function (e) {
return true;
};
}
function disableBeforeUnload() {
window.onbeforeunload = null;
}
if(processing)
enableBeforeUnload();
else
disableBeforeUnload();
Note: This will just take user's confirmation before leaving which will let user think what he is going to do! You can't prevent him doing that.
I'm creating an inline editable table using jQuery and the editable plug-in.
It works well so far but will only submit and save to the database upon pressing ENTER. I found a thread on here which helped me to tab between boxes but it doesn't submit the data when TAB is pressed.
My code that allows me to switch between boxes is as follows:
$('.editScheduleRow').bind('keydown', function(evt) {
if (evt.keyCode==9) {
var nextBox='';
var currentBoxIndex=$(".editScheduleRow").index(this);
if (currentBoxIndex == ($(".editScheduleRow").length-1)) {
nextBox=$(".editScheduleRow:first"); //last box, go to first
} else {
nextBox=$(".editScheduleRow").eq(currentBoxIndex+1); //Next box in line
}
$(this).find("input").blur();
$(nextBox).click(); //Go to assigned next box
return false; //Suppress normal tab
};
});
To submit using ENTER I use this:
$(".editScheduleRow").editable("../../includes/ajax/save-schedule-row.php", {
"submitdata": function ( value, settings ) {
return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id') };
},
});
I also found a thread with a suggestion but it didn't work for me: jEditable submit on TAB as well as ENTER
Please let me know if you need any more information.
My original answer was based on reading the documentation of jQuery Editable, which is a jQuery extension that is similarly named, but not the same as jEditable from the question. Let's try again with the correct library.
The problem is that you are moving the focus away from the input box when pressing tab, but when the focus is moved away from it, it doesn't save the contents. To illustrate this, try this: click one of the fields and edit it, then click elsewhere on the document. You'll see that the value in the table - and this is what you where simulating using the blur() jQuery function on the element.
There are (again) two ways to solve this problem. First, we can modify what the program does when a field loses focus:
[..]
"submitdata": function ( value, settings ) {
return { fieldname: this.getAttribute('fieldname'), rowID: this.getAttribute('id')
};
"onblur": "submit";
},
[..]
This has the effect that when doing the experiment I described above to help you understand why it wasn't working, you'll now also see that it gets saved. This may not be what you want. In that case, you can instead make sure that you trigger a submit instead of a blur:
replace this line:
$(this).find("input").blur();
by this one:
$(this).find("form").submit();
Now the experiment will no longer cause the value to be changed, but it's no longer an accurate simulation of what we're doing and when pressing tab the value will be changed.
I try to create an ecommerce website with codeignitier. i'm using ajax to load the picture into div and jquery-ajaxy to show the url, it works well for backward and forward button, but
i got a problem when i refreshed the page, the data can't be show in the div.
is there anyone know why this happen??
controller
function tesa() {
$this->load->view("apricots.html");
}
function tesb() {
$this->load->view("bananas.html");
}
function tesc() {
$this->load->view("coconuts.html");
}
view
a href="./index.php/index_con/gambar/Kategori/Sarung/Apple/K001" class="ajaxy ajaxy-page"
Learn about Apricots
i forget to replace the state on Page Controller's "Matches" in the script ..
problem solved :D
thanks
How to get an array of all checkboxes selected on the page, and then passing it to the next page (in this case php, so it can be picked up by php _POST function). I have come up with this :
<script type="text/javascript">
var selected = new Array();
$(document).ready(function() {
$("input:checkbox:checked").each(function() {
selected.push($(this).val());
});
$('#od').submit(function() {
alert(this.selected); // *See note below
$.post('receiver.php', {'registration': selected});
return false;
});
});
</script>
But is does not seem to work :( It returns null, as if no checkboxes would have been added to the array, or maybe the post function is wrong. Can you point me in the right direction here?
I've found the following of issues:
You read the checked items on page load, thus ignoring all changes made by the user. Move that code to the submit() handler.
Your debugging code (alert(this.selected)) tries to display the value of the selected property for the form node. It isn't a reference to your JavaScript global variable selected. I suggest you use a proper debugging tool such as Firebug; alerts are highly unsuitable.
You sucessfully send the values of checked items. You just ignore the field name and rename everything to registration. That looks intended, otherwise report back:
{'registration': selected}
I suppose you can make jQuery serialize the values for you but fixing these little details in your code should do the trick anyway.
I think $("input:checkbox:checked") should be `$("input[type="checkbox"]:checked")
Or simply: $('input:checked', '#form-container');
$('#od').submit(function() {
var selected = $('input[type="checkbox"]:checked').toArray();
$.post('receiver.php', {'registration': selected});
return false;
});
The Data being posted might need to be split up.....
This code is to work in combination with a form showing the results of the selections made on the right hand side of the page by loading the URL of the chosen option in a specified DIV that corresponds to the ID of the product.
function product_analysis(productid, address) {
if (this.checked = 'checked') {
$(productid).load(address);
}
else {
$(productid).load('http://www.divethegap.com/update/blank.html');
}
};
Problem is that the query to check if the box is checked or not does not work. If you check or uncheck the box it loads the address of the onclick event.
Any help would be appreciated but please keep in mind that the products are data driven so we cannot have specific IDs but rather IDs built of the Post ID.
Also when the page loads there will need to be some sort of global function which will work out what is 'checked' and load those URLs (products) in their specific DIVs.
Many Thanks,
Beware that you used = instead of == in the if() condition.
Also, have you tried with the :checked selector?
$("#id:checked")
JQuery documentation
function product_analysis(productid, address, box) {
if (box.checked) {
$(#productid).load(address);
}
else {
$(#productid).load('http://www.divethegap.com/update/blank.html');
}
};
and code for the box
onclick="product_analysis('#product_1231', 'http://www.divethegap.com/update/products/2010/11/padi-open-water/', this)"