I have this portion of code:
$('input[type=checkbox]').change(function() {
if(this.checked) {
var row = $(this).closest('tr').html();
$('#two').append('<tr>'+row+'</tr>');
}
});
function clearSel(){
$('input[type=checkbox]').each(function() {
this.checked = false;
});
$("#two").empty();
}
This code works fine on a local folder. When I put it on a web app on xampp, just the clearSel() function works. The table one content is generated from a AJAX request on a php file which return rows. In first stage of accessing the page both tables exists, but are empty. I don't understand why on xampp fails. Some suggestions? Thank you.
[EDIT] The code provided of Super User works fine. I am newbie, i didnt know anything about event delegation(i will study) . Thank you for answer!!!!
You can use event delegation here, check updated code below..
detail reference
$(document).on('change', 'input[type=checkbox]', function() {
if(this.checked) {
var row = $(this).closest('tr').html();
$('#two').append('<tr>'+row+'</tr>');
}
});
function clearSel(){
$('input[type=checkbox]').each(function() {
this.checked = false;
});
$("#two").empty();
}
Related
I am trying to display the database table using php. When the page is loaded I need to show all table data and when I select the dropdown select, I neeed to display only data related to it ie.using where condition. I don't need any sql query or php code for it, I just need jquery.
$(document).ready(function()
{
$('#myHref').change(function()
{
var value = $('#myHref').val();
$.get('get_projectName.php',{id:value},function(data)
{
$('#projectDetail').html(data);
});
});
$('#myHref').on('change',function()
{
$('#projectDetail').fadeIn();
});
});
Here when I select drop down menu id="myHref" execute get_projectName.php, but I need to execute get_projectName.php when page is load before select dropdown so I can display all data
Plz Help!!
bt I need to execute get_projectName.php when page is load before select dropdown so i can display all data
So I see you want to initially load execute get_projectName.php once when page loads and also execute it if there are any changes in the dropdown. So you can do like below
$(document).ready(function() {
//make a call initially on page load
var firstOptionValue = $("#myHref option:eq(1)").val() // take first option value as default
$.get('get_projectName.php',{id:firstOptionValue},function(data)
{
$('#projectDetail').html(data);
});
$('#myHref').change(function(){
var value = $('#myHref').val();
$.get('get_projectName.php',{id:value},function(data)
{
$('#projectDetail').html(data);
});
});
$('#myHref').on('change',function(){
$('#projectDetail').fadeIn();
});
});
Refactoring the code, you can just pull out the common logic into a function and call that function by passing the required value, See below
$(document).ready(function() {
//make a call initially on page load
var firstOptionValue = $("#myHref option:eq(1)").val(); // take first option value as default
GetProjectDetails(firstOptionValue);
$('#myHref').change(function(){
var value = $('#myHref').val();
GetProjectDetails(value);
});
$('#myHref').on('change',function(){
$('#projectDetail').fadeIn();
});
function GetProjectDetails(value){
$.get('get_projectName.php',{id:value},function(data)
{
$('#projectDetail').html(data);
});
}
});
In the above code you are trying to pass the selected id to php file through $.get() when the dropdown is changed. it is fine, if you want to display all the data when page is loaded then you should have another php which returns all the data in db and doesn't take any value. And write the code as below
$(document).ready(function() {
$.get('get_allDataFromDb.php',function(data)
{ $('#projectDetail').html(data);
});
$('#myHref').change(function(){
var value = $('#myHref').val();
$.get('get_projectName.php',{id:value},function(data)
{ $('#projectDetail').html(data);
});
});
$('#myHref').on('change',function(){
$('#projectDetail').fadeIn();
});
});
function getData(value) {
params = {};
if value
params.id = value;
$.get('get_projectName.php', params, function (data) {
$('#projectDetail').html(data);
});
}
// Get Data onLoad
getData($('#myHref').val());
$('#myHref').on('change',function(){
getData($('#myHref').val());
$('#projectDetail').fadeIn();
});
Looks like your element (e.g. #myHref) don't exist at time when your script . And when you want to show all data on load just call function eg.
function getData(){//ajax here}
getData();
running. Are there any errors? or something that can help?
Try like this
$(document).on("change", "#myHref" , function() {
// Your Code Here
});
let me know in case it still dont work.
Ok , here is my another answer that how you can trigger some event after our document get ready .
hope this will be helpful to you .
<script>
$(document).ready(function(){
//Function for AJAX Call
function GetData(){
var value = $('#myHref').val();
$.get('get_projectName.php',{id:value},function(data)
{
$('#projectDetail').html(data);
//
$('#projectDetail').fadeIn();
// Any other code here you want to write.
});
}
$('#myHref').change();
//OR you can use
$("#myHref").trigger("change");
});
$(document).on("change", "#myHref" , function() {
// Call the function as change evvent is triggered
GetData();
});
</script>
I have a page with many checkboxes on it, I wrote a JS code that makes call to PHP page for each page, I want to refresh the page after the call has completed..
Here is my code
$(".matchFrnds").each(function(){ //For each CheckBox
if($(this).is(':checked')){
var sendData= $(this).val();
$.post('Call to PHP Page',{sendData:sendData},function(data){
window.location.reload();
});
}
});
The problem is that the page reloads after completing few checboxes, so if there are 60 checkboxes, the page reloads after making call for 10 checkboxes. I also changed the place for window.location.reload(); but the results are same, I want that once the call for all the checkboxes is completed then it reloads.
You can check how many calls you have finished then reload
var boxes = $(".matchFrnds:checked").length;
var calls = 0;
$(".matchFrnds").each(function(){ //For each CheckBox
if($(this).is(':checked')){
var sendData= $(this).val();
$.post('Call to PHP Page',{sendData:sendData},function(data){
calls++;
if(calls >= boxes) {
window.location.reload();
}
});
}
});
It is really easy.
You just need to set a counter, and call reload() on the last one.
The idea would be to have another variable...
// Save the element to iterate in a variable
var matchFrnds = $(".matchFrnds"),
//and save its length too
length = matchFrnds.length;
//Iterate over it
matchFrnds.each(function() {
// modify the counter
--length;
if ($(this).is(":checked")) {
// do your things
$.post( ... , function(data) {
//do what you need to do with the data...
// ....
// ....
});
}
//and, if it's the last element
if (!length) {
// LAST ITERATION!
window.location.reload();
}
});
And that's it.
You could use the .ajaxStop-Event
http://api.jquery.com/ajaxStop/
you can try with this after complete your request:
location.reload();
When I've added select2 to all selects in my app it worked very nice except when in my select is this property(it works when I don't use select2):
onchange="'refresh()'"
Function refresh:
function refresh()
{
document.forms[0].submit();
}
This is how I run select2
$("select").each(function(){
var this1 = $(this);
if(this1.attr('multiple')!='multiple')
{
this1.select2();
}
});
How to pass this? Or maybe there is some mechanism inside the select2 that deals with that kind of problems? All kinds of suggestions are welcome:D
you need to update this:
$(#Select/Input Element).select2();
$("#select/input element").change(function () {
var valueToSet = $("#select/input element").select2('data').text;
$('#hiddent field to which data to be set').val(valueToSet);
});
Not sure to understand. When one of yours selects changes, you want to call the refresh method? In that case :
$("select").each(function(){
var $this = $(this);
if($this.attr('multiple')!='multiple'){
$this.select2();
$this.change(refresh);
}
});
Remove single quote from onchange="'refresh()'. Try as mentioned below :
<input type="checkbox" onchange="Refresh();"/>
And your script will be defined as below :
<script type="text/javascript">
function Refresh() {
alert('refresh');
}
</script>
This should be quite simple but I'll be darned if I can work it out. Just trying to get a div to display while my ajax is processing and then hide once done (I've put a sleep in there purely to test its working as locally it loads so fast I'm not sure if its working or not)!
The html page has this code in the script: -
$(document).ready(function(){
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
$("#loadingGIF").ajaxStop(function () {
window.setTimeout(partB,5000)
$(this).hide();
});
function partB(){
//just because
}
var scenarioID = ${testScenarioInstance.id}
var myData = ${results as JSON}
populateFormData(myData, scenarioID);
});
There is then a div in my page like so (which I can see in the source of the page just hidden): -
<div id="loadingGIF" ><img src='${application.contextPath}/images/spinner.gif' height="50" width="50"></div>
The ready code then goes off and calls this: -
function populateFormData(results, scenarioID) {
$table = $('#formList')
for(var i in results){
var formIDX = (results[i]["forms_idx"])
var formID = (results[i]["form_id"])
appendSubTable(formIDX, scenarioID, $table, formID);
}
}
Which references this multiple times calling several AJAX posts: -
function appendSubTable(formIDX, scenarioID, $table, formID) {
var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
var url = "**Trust me this bits OK ;) **"
$.post(url, {
formIDX : formIDX, scenarioID : scenarioID, formID :formID
}, function(data) {
$subTable.append(data)
}).fail(function() {
});
}
Any pointers gratefully received...
Interestingly I bunged some alerts into my ajaxstart and stop and neither show up ever so I'm missing something obvious :S When I check the console in firefox I can see that all my POSTs are completing....
You should probably add the Ajaxstart and stop global event handlers to the document node like this
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I realized my problem, I needed to register the ajaxstart and stop to the document not the div!
So instead of this: -
$("#loadingGIF").ajaxStart(function () {
$(this).show();
});
I now have: -
$(document).ajaxStart(function () {
$("#loadingGIF").show();
});
I assume this is because its the document that the ajax is running against not the div although my understanding there may not be 100% accurate at least this works so please tell me if I've misunderstood this! :)
#jbl, thanks for this pointer I did this to also leave the notification on screen for a few more moments just to make sure everything is loaded.
I have the following two functions that work great:
$(function(){
$('.trash_can a.delete').live('click', function(event) {
event.preventDefault();
var link = $(this);
$.post(link.attr('data-href'),
{
promo_id: link.attr('data-promo_id')
},
function(data) {
$('#page').html(data.html);
});
console.log('Clicked Delete');
});
});
$(function(){
$('#add-mod-form').bind('ajax:success', function(evt, data, status, xhr){
data = $.parseJSON(data);
// console.log(data.success);
if (data.success == true) {
$('#page').html(data.html);
$('#page box_bc').html()
}
else {
}
});
});
As data is received for page, I would also like to reload a static html element, $('#page box_bc') - How do I do this simple task with Jquery? Notice, i've tried it above, and that part does not work as planned.
Thanks
Use:
var $dataHtml=$(data.html);
$('#page box_bc').html($('#page box_bc',$dataHtml));
It is not very clear to me what you are trying to achieve. If the element is static what is the point trying to refresh it ? In case its content somehow depends on other elements of page : then it has to be reconstructed.
The code you have written fails because :
$('...').html()
returns the html content of that element. It does not do anything to the content. Probably it would be better if you could elaborate more on the context and purpose of the code.