I'm loading data from mysql to php with ajax. I want to create edit function for my website. This edit will be on modal.
Select input with options (subcategories) is loading by ajax after radio input categories is loaded with previous ajax.
I've tried several jquery events to change select option, but no one worked.
This is script code in my modal file.
<script>
$(document).ajaxComplete(function() {
$("#editexp'.$poz.'").on("shown.bs.modal", function(){
$("input[name=payment'.$poz.'][value='.$method.']").prop("checked", true);
$("input[name=kategoria'.$poz.'][value='.$catid.']").prop("checked", true);
var category = '.$catid.';
var poz = '.$poz.';
$.ajax({
url:"expense_subcategory_change.php",
method:"POST",
data:{category:category,
poz:poz
},
success:function(data){
$("#subcategory'.$poz.'").html(data);
}
});
$("input[type=radio][name=kategoria'.$poz.']").change(function(){
var category = $(this).val();
var poz = '.$poz.';
$.ajax({
url:"expense_subcategory_change.php",
method:"POST",
data:{category:category,
poz:poz
},
success:function(data){
$("#subcategory'.$poz.'").html(data);
}
});
});
});
});
$("#subcategory'.$poz.'").ajaxComplete(function() {
$("#subcategory'.$poz.' ").find("option").each( function() {
var $this = $(this);
if ($this.val() == '.$subcatid.') {
$this.prop("selected","selected");
return false;
}
});
});
</script>
I've also tried this:
$("#subcategory'.$poz.'").ajaxComplete(function() {
$("#subcategory'.$poz.' option[value='.$subcatid.']").prop("selected","selected");
});
also these two functions without ajaxComplete for #subcategory or with second ajaxComplete for document
Input with options is loading but first option is always selected.
This is main part of my expense_subcategory_change code:
$result = mysqli_query($connection,"$sql_query");
$output .= '<select class="mb-3 w-50-100 " name="subcategory'.$poz.'">';
while($row = mysqli_fetch_array($result))
{
$output .= '<option value="'.$row['id'].'" >'.$row['sub'].'</option>';
}
$output .= '</select>';
echo $output;
The issue is in your selector. You are using 'name' in the select element but using '#' (id) to search the dom for the element. Change your PHP code to:
$output .= '<select class="mb-3 w-50-100 " id="subcategory'.$poz.'">';
And I tested with the second method you provided as it seemed cleaner
$("#subcategory'.$poz.' option[value='.$subcatid.']").prop("selected","selected");
See the solution (simplified code) working here https://jsfiddle.net/79kugn60/
If you are using any event. Try Bind that event in your function. So that everytime event gets binded. After firing.
Related
I am using the jQuery DataTables plugin, it has one event, that on click of button we can add new row in table.
The jQuery code is as below:
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter,
'<select id="k'+counter+'" name="itemname'+counter+'" ><option>-------</option></select>' ,
'<input id="itemrate" name="itemqty'+counter+'" placeholder="Quantity" type="text">',
'<input id="itemrate" name="itemrate'+counter+'" placeholder="Rate" type="text">',
'<input id="totalamt" name="totalamt'+counter+'" placeholder="Total Amount" type="text">'
] ).draw();
counter++;
});
});
I want to fill data fetched from a MySQL database using jQuery .ajax(), and my code is as follows:
jQuery(document).ready(function(){
jQuery('#k'+counter).click(function(){
jQuery.ajax({
url: 'getData.php',
type:'POST',
data:'form_data='+val,
success:function(results){
jQuery('#k'+counter).html(results);
}
});
});
});
The code for getdata.php is as follows:
<?php
mysql_connect('localhost','root','');
mysql_select_db('eroyalsum');
$sql = "SELECT ITEMCODE,ITEMNAME FROM itemmaster1";
$result = mysql_query($sql);
while($row = mysql_fetch_row($result))
{
echo '<option value="'.$row[0].'" >'.$row[1].'</option>';
}
?>
Finally, my problem is when I write it as separate function, it just works only once. When I add other row it does not work, and when i write jQuery's .ajax() in one function it does not work...
try changing you selector from:
jQuery('#k'+counter).click(function(){
…
to
jQuery(document).on("change", "select[id^='k']", function(){
...
The issue is the event binding.
When you bind the event to the #k elements, the new item doesn't automatically get the event bound to it.
You can use stuff like :
$('body').on('click','.new_elements',function(){ //dostuff});
you can read more about it here
Event binding on dynamically created elements?
I have a button in my page:
if($posts = $q->fetchAll()) {
foreach ($posts as $post) {
$username = $post[0];
$post_id = $post[2];
$status = $post[1];
echo $username . " " . $status . "<br/>";
echo "<button value = '$post_id' id = 'like' class='like' type='submit'>Like</button>";
}
}
Let's assume I have ten result from the query, I will definitely have 10 LIKE button with the same ID.
Now my jQuery is coming this way:
$("#like").click(function() {
var menuId = $(this).val();
var request = $.ajax({
url: "likes.php",
type: "POST",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$(".likecount").html( msg );
});
});
Every click on a single button applies to all 10 buttons. How do I differentiate them and have the database affected accordingly?
First off, you're adding like elements via ajax, but you're binding the event handler to whichever like element is already part of the dom at any given moment:
$(document).ready(function()
{
//when dom is loaded, #like is selected, and event is bound
$('#like').click(function(){});
});
inside the click handler, you perform an ajax call that may add another like element to the page, but you never bind an event handler to that new element.
You have 2 options: add an event handler for each element that is added to the page dynamically (not so good, bad for performance). OR delegate the event. As an added bonus, you don't need the ID's of the like buttons anymore. You can use the like class to delegate!
$(document).ready(function()
{
$('body').on('click', '.like', function()
{
//handle click on like button here
});
});
This adds an event listener to the body tag, that will call the callback function whenever a click is registered on an element that has the like class.
I'll edit this response, to give you a, purely hypothetical way to ensure unique like id's
Using a closure, you can easily get unique ID's, by exploiting the fact that closure vars can outlive the closure function. But as you can see, just from the verbosity and added complexity of the code below, this approach is not to be recommended. Simply use the class, and leave the ID out. delegation all the way!
$('body').on('click', '.like', (function(count)
{//closure, pass like buttons currently on page
var idNum = 0;
count.each(function()
{
$(this).attr('id', $(this).attr('id') + idNum);
++idNum;//increment
});
return function()
{//this is the actual callback
request.done(function( msg )
{
var chunk = $(msg);//parse HTML response
chunk.find('.like').each(function()
{
$(this).attr('id', ($(this).attr('id') || 'like') + idNum);
++idNum;
});
});
};
}($('.like'))));
Or, if for some reason you don't want to delegate the event:
$('.like').on(function handler()
{//callback should be named, you'll see why
request.done(function( msg )
{
$('.like').off('click', handler);//remove handler
//add msg to DOM
$('.like').on('click', handler);//add handler, now including new DOM elements
});
});
You could (and IMO should) optimize this further, by storing the $.each callback in a closure reference, too:
$('body').on('click', '.like', (function(count)
{//closure, pass like buttons currently on page
var idNum = 0, eachCallback = function()
{
$(this).attr('id', ($(this).attr('id') || 'like') + idNum);
++idNum;//increment
};
count.each(eachCallback);
return function()
{//this is the actual callback
request.done(function( msg )
{
var chunk = $(msg);//parse HTML response
chunk.find('.like').each(eachCallback);
});
};
}($('.like'))));
This way, you avoid creating a callback function object on each click event... but read up on closures to fully understand why this is a better approach, performance wise.
Why not change your PHP to:
if($posts = $q->fetchAll()){
foreach ($posts as $post){
$username = $post[0];
$post_id = $post[2];
$status = $post[1];
echo $username . " " . $status . "<br/>";
echo "<button value = '$post_id' id = 'like_$post_id' class='like' type='submit'>Like</button>";
}
As each item relates to a post with a (I hope) unique ID, why not just append that value to the id property?
ID values MUST BE UNIQUE
Then you'll need to change your jQuery selector, how about:
$("button.like").click(function()
Don't use ID as selectors in your jquery, use class selector if your buttons are going to use the same class.
For example:
if($posts = $q->fetchAll()){
foreach ($posts as $post){
$username = $post[0];
$post_id = $post[2];
$status = $post[1];
echo $username . " " . $status . "<br/>";
// Removing Id like, because Id should be unique in DOM.
echo "<button value = '. $post_id. ' class='like' type='submit'>Like</button>";
}
}
Your jQuery will look like:
// class selector is a dot (.), if you use an id selector (hashtag #) and you
// you have more than 1 element with that Id, jQuery will only select the first one.
$('body').on('click', '.like', function(){
var menuId = $(this).val();
var request = $.ajax({
url: "likes.php",
type: "POST",
data: { id : menuId },
dataType: "html"
});
request.done(function( msg ) {
$(".likecount").html( msg );
});
});
So I got a select menu and when an user select an option, it calls a post function via ajax that generates some table rows via PHP and then it returns the html coding for it. In it, there is an Add button.
What I am trying to do is that when the user clicks the add button, a form shows up.
But for some reason, it is not working...
Here is the code:
$(document).ready(function () {
$(".add_form").hide();
$("#console").change(function () {
var id = $(this).val();
var dataString = 'console_id=' + id;
$.ajax({
type: "POST",
url: "generate-games-list",
data: dataString,
cache: false,
success: function (html) {
$("#games_table_body").html(html);
}
});
});
$(".add_button").click(function () {
alert("HELLO");
var id = this.id;
$.post('manage_games', 'game_id=' + id, function (response) {
alert(response);
});
$("#game_id").val(id);
$(".add_form").show();
});
});
Here is the PHP code that returns the table rows:
$console = Console::find(Input::get('console_id'));
$type = GameType::find(Input::get('type_id'));
if(!Input::has('console_id'))
return "Error";
else{
foreach($console->games()->get() as $console_game){
$available_consoles_string = "";
$game_types_string = "";
//Get all the consoles the game can be played on
foreach($console_game->consoles()->orderBy('name', 'asc')->get() as $available_consoles){
$available_consoles_string = $available_consoles_string . " " .$available_consoles->name .", ";
}
//Get all the types that the game falls in
foreach($console_game->types()->orderBy('type', 'asc')->get() as $game_types){
$game_types_string = $game_types_string . " " .$game_types->type .", ";
}
return "<tr><td>" .$console_game->name. "</td><td>". $available_consoles_string. "</td><td>" .$game_types_string. "</td><td><input type='button' id='" .$console_game->id. "' class='add_button' value='Add'/> / View</td></tr>";
}
}
Any idea why it is not working? When I mean not working, I mean the alert is not showing up but I am not getting any error on the Chrome Console...
Thanks,
Ara
Simply use .on():
$(document).on("click", ".add_button", function(){
// your event code
});
When your js runs a click event is attached to all current elements with the .add_button class. However, you're adding extra buttons via ajax and these won't have trigger the same click event.
To fix this use the code above. It attaches the event to the document so even if you add buttons once the page has loaded the click event will be triggered by them.
I am dynamically adding list items to a list in jQuery through an ajax call that is called every second.
Below is the code for the ajax call.
$.ajax({
url: 'php/update_group_list.php',
data: '',
dataType: 'json',
success: function(data) {
var id = data.instructor_id;
group_cnt = data.group_cnt,
group_name = data.group_name,
group_code = data.group_code;
for (i = current_row; i < group_cnt; i++)
{
//setInterval(function() { $('#group-list-div').load('php/group_list.php'); }, 5000);
$('#group-list').append("<li><a href='#' data-role='button' class='view-group-btns' id='"+group_code[i]+"' value='"+id+"' text='"+group_name[i]+"'>"+group_name[i]+"</a></li>");
$('#delete-group-list').append("<fieldset data-role='controlgroup data-iconpos='right'>" +
"<input id='"+group_code[i]+i+"' value='"+group_code[i]+"' type='checkbox' name='groups[]'>" +
"<label for='"+group_code[i]+i+"'>"+group_name[i]+"</label>" +
"</fieldset>");
}
current_row = i;
$('#group-list').listview('refresh');
$('#delete-group-list').trigger('create');
}
});
Now I am having two problems
FIRST PROBLEM:
When I try to run the code below (it should show an alert box if any of the list items created in this line $('#group-list').blah...blah in the code above), nothing happens.
$(".view-group-btns").click(function()
{
alert("check");
});
SECOND PROBLEM:
Also when I try to send the form data for the checkboxes (referencing line $('#delete-group-list').blah...blah in the ajax call code above) the post returns the error unexpected token <
What am I doing wrong? I think the two problems are related as I am creating the list items that are used dynamically.
Here is extra code relating to the SECOND problem
HTML:
<form id='delete-group-form' action='php/delete_groups.php' method='post'>
<h3 style='text-align: center;'>Check the Box Beside the Groups you Would Like to Delete </h3>
<div style='margin-top: 20px;'></div>
<div id='delete-group-list'>
</div>
<div style='margin-top: 20px;'></div>
<input type='submit' id='delete-groups-btn' data-theme='b' value='Delete Groups(s)'>
</form>
JS Code
$('#delete-group-form').submit(function(e)
{
e.preventDefault();
alert($('#delete-group-form').serialize());
if ($('#delete-group-form').serialize() == "")
{
alert('No groups selected to be deleted.')
return false;
}
else
if ($('#delete-groups-form').serialize() == null)
{
alert('No groups selected to be deleted.')
return false;
}
else
{
$.post('php/delete_groups.php',$('#delete-groups-form').serialize()).done(function(data)
{
obj = jQuery.parseJSON(data);
var group_codes = obj.group_list;
alert(group_codes);
alert("The selected groups have been deleted");
window.setTimeout(2000);
return false;
});
}
return false;
});
delete_groups.php
<?php
$group_codes = $_POST['groups'];
$items = array('group_list'=>$group_codes); //creating an array of data to be sent back to js file
echo json_encode($items); //sending data back through json encoding
?>
I think the root of the SECOND problem is the line $group_codes = $_POST['groups']; specfically the $_POST['groups'] because when I replace it with $group_codes = 'test'; (just for debugging purposes) , the code works as expected.
You need to use event delegation to make your newly-created elements function properly:
$("#group-list").on("click", ".view-group-btns", function() {
alert("check");
});
I noticed you have 3 single quotes on this line... missed one after controlgroup
$('#delete-group-list')."<fieldset data-role='controlgroup data-iconpos='right'>"
That would explain the unexpected token <
You have to use the jquery on event.
$(".view-group-btns").on("click", function(event)
{
alert("check");
});
Why?
Because you can only use the regular "click" on elements that are created BEFORE the DOM is updated.
When you are dynamically creating new elements into the dom tree, then you can't use .click anymore.
on (and in the past, .live(), which is deprecated now) can listen to modifications in the DOM tree and can use the later-on created elements.
You have to bind the click function after you get the element from ajax call. Binding on pageLoad event will only bind with those elements that are already in the dom. So do something like this.
$.ajax({
success : function(res){
//bind your click function after you update your html dom.
}
})
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+"]");
});
});