I have a set of records in a database and list them out in rows.
Each row has to be a unique element id so i achieved this as follows and this is inside the main loop.
#right<?php echo $row['Id']; ?> {
display: inline-block;
width:250px;
float:left;
text-align: left;
height:auto;
font-family:Arial;
font-size: 12px;
text-decoration: none;
}
Each record therefore has its own css as above.
I have a submit form button on each row whihc also uses unique <?php echo $row['Id']; ?> so each form has its own name as well.
I submit form and use ajax to make the current div reload so it changes color as row status changes.
The problem I have is once i have submitted this form once, it will then no longer submit a second time without loading the entire page , I assume this is something to do with the element id ?
here is the ajax
<script>
$(document).ready(function() {
$("#submit<?php echo $row['Id']; ?>").submit(function() {
var frm = $('#submit<?php echo $row['Id']; ?>');
$.ajax({
type: frm.attr('method'),
url: 'Update.php',
data: frm.serialize(),
success: function (data) {
$('#right<?php echo $row['Id']?>').load(' #right<?php echo $row['Id']?> ',function(){
$("#image<?php echo $row['Id']; ?>").show(); }
) ;
}, error: function(jqXHR, textStatus, errorThrown){
console.log(" The following error occured: "+ textStatus, errorThrown );
} });
return false;
});
});
</script>
This seems to work completely fine the first time i submite the div reloads and does as intended , its when you click it a second time.
Am i doing this completely the wrong way ?
I know i can do the submit button outside of the reloaded divs and then it keeps working but wanted to reload the entire div so i can change the buttons to other options etc.
Any help would be appreciated.
Here is the html/php
<div id="right<?php echo $row['Id']; ?>">
<form id="submit<?php echo $row['Id']; ?>" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>
the code that you wrote is not gonna hide the #loading element after process.
i need to see your html code at first if its possible and if its impossible so you need to hide your #loading element when your process done and after that you will able to show it again.
How your code is work well at first time when loading is not hiding and its just showing?
if its'll be delete after load so you'll need to load #loading element too as well.
Put a class on every row and remove the id. Take advantage of the ability to get all elements which match a class, and hook the event to every element matching the class. Then use $(this).parent() in the function to get the row, and from there navigate to the children.
This is just a strategy to improve your code rather than a concrete answer, but if you follow this, it might be easier to reason about where your error is.
$(document).ready(function() {
$(".js-action").submit(function() {
var row = $(this).parent('.row');
$.ajax({
type: $(this).attr('method'),
url: 'Update.php',
data: $(this).serialize(),
success: function (data) {
row.find('.response-image').show();
},
error: function(jqXHR, textStatus, errorThrown){
console.log("The following error occured: "+textStatus,errorThrown);
}
});
});
<!-- this gets repeated a bunch of times. No need for ids -->
<div class="row">
<form class="response" method="post" autocomplete="off">
<input type="hidden" value="<?php echo $row['Id']?>" name="id">
<input class="input-2" type="text" name="returnid" value="<?php echo $row['returnID']; ?>">
<input type="submit" name="submit-form" class="buttonSubmitHide" />
</form>
</div>
Related
image table
Currently, I'm doing a system where is manager can assign the job to workers. I have a table listing. In this table listing, when I click at Job Order Number, there will be a popup modal. What I'm having right now is, if the job status is pending, I want to show a different popup modal . Do you guys have any idea how can I achieve that ?
Currently, I'm doing like this where I declare the modal popus using php class.
<td id="testing" data-id="<?php echo $row['jobregister_id'];?>" class = "<?php echo $row["job_status"]; ?>" data-target="doubleClick-info" onClick="document.getElementById('doubleClick-info').style.display='block'"><?php echo $row["job_order_number"]; ?></td>
<td><?php echo $row["job_priority"]; ?></td>
<td"><?php echo $row["job_status"]; ?></td>
and here is my ajax for job status pending
<div id="doubleClick-info" class="modal">
<div class="tabInfo">
<input type="radio" name="tabDoingInfo" id="tabDoingInfo1" checked="checked">
<label for="tabDoingInfo1" class="tabHeadingInfo"> Job Info </label>
<div class="tab" id="JobInfoTab">
<div class="contentJobInfo">
<div class="techClose" data-dismiss="modal" onclick="document.getElementById('doubleClick-info').style.display='none'">×</div>
<form action="homeindex.php" method="post">
<div class="info-details">
</div></form></div></div>
<script type='text/javascript'>
$(document).ready(function () {
$('body').on('click','.Pending',function(){
// $('.JobInfo').click(function () {
var jobregister_id = $(this).data('id');
// AJAX request
$.ajax({
url: 'ajaxhomepending.php',
type: 'post',
data: { jobregister_id: jobregister_id },
success: function (response) {
// Add response in Modal body
$('.info-details').html(response);
// Display Modal
$('#doubleClick-info').modal('show');
}
});
});
});
</script>
it all seems fine. i define the javascript using class. but when the class have no value, how do i define it ? do you guys have any idea how to do it. thank you so much.
Hopefully you can help on this javascript puzzle in my code. I m still learning javascript and jquery. I admit I am a bit rusty and trying to get back into coding again. I have created a searchbox autocomplete. I have created the javascript in my main html, and created an additional php page called autocomplete.php. My auto complete is working but now I want to have is... When a user click on one of the autocomplete choices below it will pop up the value which will then put an id in the search box for our system to search easier, but I also want to add a permanent place holder or text describing what they click on along with the id, but the text cannot be read by the search. I just want to read the id. In case, that is why I thought of a permanent placeholder.
On the PHP page I have created the onclick portion of the code:
<ul id="country-list" >
<?php
while($row=pg_fetch_assoc($result)){
?> <li onClick="selectCountry('<?php echo $row["id"]; ?>'); selectPlaceholder('<?php echo $row["country"].", ".$row["state"]; ?>');"> <?php echo "<strong>(".$row["id"].")</strong> ".$row["country"].", ".$row["state"]; ?> </li>
<?php } ?>
</ul>
So I have created two type of onClicks which are selectCountry() and selectPlaceholder().
Here is my javascript code on the index page:
$(document).ready(function(){
$("#search-box").keyup(function(){
$.ajax({
type: "POST",
url: "/VCSWeb/wp-content/themes/i-excel-child/autocomplete.php",
data:'keyword='+$(this).val(),
beforeSend: function(){
$("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px");
},
success: function(data){
$("#suggesstion-box ").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background","#FFF");
}
});
});
});
function selectCountry(val) {
$("#search-box").val(val);
$("#suggesstion-box").hide();
}
function selectPlaceholder(val) {
$("placeholder").val("data-placeholder='"+val+"' ");
}
As you can see at the bottom I am trying to turn the selectPlaceholder() into a variable and then pop it into my tag to create something like data-placeholder='selectPlacehoder(value)'.
Here is my HTML
<div class="frmSearch placeholder" style="width:90%; float:left;" ---> data-placeholder='text' <---(place javascript variable here) >
<label>
<input size="59" maxlength="75" type="search" name="search" class="search_keyword" id="search-box" placeholder="Enter Jurisdiction, County, City, or Client Name" />
<div class="box" id="suggesstion-box"></div>
</label>
</div>
Here is my CSS to make the placeholder permanent in the location
.placeholder
{
position: relative;
}
.placeholder::after
{
position: absolute;
left:150px;
top: 10px;
font-size:18px;
content: attr(data-placeholder);
pointer-events: none;
opacity: 0.6;
}
Overall, need help with the javascripting turing the attribute into a variable, then taking the variable and poping it within a html div type tag.
function selectPlaceholder(val) {
$("placeholder").val("data-placeholder='"+val+"' ");
}
So is this possible? How can we do this? Do I need to create an id and then place it? Would I need to put this in a .prop? Is there a better way?
If I understand your problem, you want the user to see the text of the autocomplete option they selected, but you only want to send the row ID to the server. I would consider not making the auto-complete search box the input that gets sent to the server. Instead, I would create a hidden input with name=[search] and update that with the row ID to be sent to your server, then let the autocomplete input show the full description to the user. This is more conventional, in my opinion.
So in the PHP auto complete rows:
<ul id="country-list" >
<?php
while($row=pg_fetch_assoc($result)){
?> <li onClick="selectCountry('<?php echo $row["id"]; ?>'); updateSearchBox(this);"> <?php echo "<strong>(".$row["id"].")</strong> ".$row["country"].", ".$row["state"]; ?> </li>
<?php } ?>
</ul>
Javascript:
function selectCountry(val) {
$("#search-id").val(val);
$("#suggesstion-box").hide();
}
function updateSearchBox(el) {
$("#search-box").val($(el).html());
}
Main HTML:
<div class="frmSearch" style="width:90%; float:left;">
<label>
<input size="59" maxlength="75" type="search" class="search_keyword" id="search-box" placeholder="Enter Jurisdiction, County, City, or Client Name" />
<input type="hidden" name="search" id="search-id"/>
<div class="box" id="suggesstion-box"></div>
</label>
</div>
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->
I would like to submit the form and reload the refresh area indicated above. I know this can be achieved by using AJAX but I'm not quite sure how.
I have tried putting the refresh area in a separate ajax.php file and using JQuery but it didn't work;
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$("#divtoappend").load("ajax.php", data);
})
})
I've also tried using $.get() but to no avail.
I'm able to send the data back and forth to a seperate php page but I'm stuck trying to achieve what I am looking for.
EDIT:
The code that I posted was quickly written and the syntax isn't the issue in question, I'm merely wondering how I can refresh a <div> under the form so that it will once again do the if(isset($_GET["one"])) check and print the updated php variables.
EDIT 2:
My code is now as follows:
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<div id="append">
<!-- where I want the ajax response to show -->
</div>
...
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there's n number of divs -->
<?php } ?>
Now I want the ajax.php div to append to the #append div in index.php. There has to be a better way than altering the ajax.php and using echo:
ajax.php (with echo)
<?php
if(isset($_GET["one"])) {
echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
}
?>
So, as ajax.php could be very large, is there a better solution than
just echoing data from ajax.php to index.php?
Now this can be done in many ways.. One of them is Following.. Try this:
Index.php file
<form method="get" id="calculator_form">
<input name="one" type="text" id="one">
<input name="two" type="text" id="two">
<input type="submit" name="submit">
</form>
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#calculator_form").on('submit', function(event){
event.preventDefault();
var one = $('#one').val(); // Taking value of input one
var two = $('#two').val(); // Taking value of input two
$.get( "ajax.php", { one:one, two:two }). done( function( data ) {
$('.result').html(data); // Printing result into result class div
});
});
});
</script>
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
Use this,
$(document).ready(function() {
$(document).on('submit',"#calculator_form",function(event) {
event.preventDefault();
$.get(
'ajax.php',
function(ret_data){
$("#divtoappend").html(ret_data);
}
);
});
}) ;
The original syntax for $.get is,
$.get(
URL,
{
VAR_NAME1:VAL1,
VAR_NAME2:VAL2
},
function(response){
// your action after ajax complete
}
);
Typo: You have accidentally used $(document).read( instead of $(document).ready(! That will stop your code running.
Note: jQuery has a handy shortcut for the document ready handler:
$(function(){
// your code here
});
I'm not sure if I understand the question correctly, but here is what you can do: Assign some ID or at least the css Class name to the target div and paint the stuff you are getting from AJAX response something like below.
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$.ajax({
url: "Ajax_URL",
success: function(result) {
$("#targetDiv").html(result.one + " " + result.two); //assuming you have assigned ID to the target div.
}
});
})
})
Ok, I manage somehow to get value of checkbox, but now i have another issue.
This is my view, rssFeeds.php
<?php foreach( $feeds as $row ) : ?>
<div class="row">
<div class="col-md-2 col-sm-3 text-center">
<a class="story-title"><img alt="" src="http://www.solostream.com/wp-content/uploads/2014/06/20140110080918_0555.jpg" style="width:100px;height:100px"></a>
<label class="checkbox-inline">
<input type="checkbox" class="chkbox" value="chkbox_<?php echo $row->category; ?>_<?php echo $row->id; ?>"> Mark Read
</label>
</div>
<div clas="col-md-10 col-sm-9">
// here are my feeds....
</div>
</div>
<?php endforeach; ?>
I have this script, which take checkbox value, and send it to my controller:
<script>
$(document).ready(function(){
$(document).on('click','.chkbox',function(){
var id=this.value;
$.ajax( {
type: "POST",
context: "application/json",
data: {id:id},
url: "<?php echo site_url('rssFeedReader/markReadUnread'); ?>",
success: function(msg)
{
// what should i do here ?....
}
})
});
});
</script>
In my controller, i just load a model which change a value on my database, 0 or 1( meaning read or unread).
The problem is that nothing change on my table...
I need to put something in that .succes function in ajax ? What.. ? I just need to change one value in my database....
#James-Lalor has the answer you are looking for, but I'll expand upon it.
You can give inputs the same name (radio buttons, checkboxes) to have them interact with each other. In the case of radio buttons it's actually required to have the same name to mark and unmark others. However in this case we will use <input name=example[]> note the [], this means when you do an ajax post (or any post) it will send all the values checked as an array.
So following James' suggestion, you would do a <input name="checkbox[<?php echo $row->id?>]" to which you can post using $.post(url, data, callback), the easiest way to do this would be to put it into a form, assign the form an id, do a serialized post. You could do something like:
<form id="rss_form" method="post" action="javascript:rssUpdate();">
<input name="checkbox[<?php echo $row->id?>]" type="checkbox"/>
<input type="submit" value="submit"/>
</form>
<script>
function rssUpdate()
{
$.post(url/to/post/to, $("#rss_form").serialize());
}
</script>
I've a list of all my users in a table. The last td element will contain a form,
either a form for opening the account or a form for closing the account based on if the user
is already been closed or not. I'm using jQuery AJAX form plugin from http://malsup.com/jquery/form/ which is working.
What I'd like to do is the change the value of button before the form is been submitted.
Here's my JS for now:
$(document).ready(function() {
$('form').ajaxForm({
beforeSubmit: function() {
$('form').find('input').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});
return false;
});
and here's my HTML markup:
<td>
<?php if($user['closed'] == 0):?>
<?php $attributes = ['class' => 'account']; ?>
<?php echo form_open('admin/closeAccount', $attributes);?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="hidden" name="user_email" value="<?=$user['email']?>"/>
<input type="submit" name="close_account" class="btn btn-danger btn-sm" id="trigger" value="Close" >
<?php echo form_close();?>
<?php else:?>
<?php $attributes = ['class' => 'account'];?>
<?php echo form_open('admin/openAccount');?>
<input type="hidden" name="user_id" value="<?=$user['user_id']?>"/>
<input type="submit" data-loading-text="Odota..." name="open_account" class="btn btn-success btn-sm" id="trigger" value="Open" >
<?php echo form_close();?>
<?php endif ?>
</td>
The problem is that every time I try to submit the form, it will now change the value of all buttons to "Wait..." instead of just the one I clicked. I tried
to replace $('form') with $(this) in $('form').find('input').val('Wait...'); but that didn't help me at all.
According to the plugin documentation (http://malsup.com/jquery/form/#options-object)
$form passed to beforeSubmit callback should give you access to the current form being submitted.
try:
$('form').ajaxForm({
beforeSubmit: function(arr, $form, options) {
$form.find('.btn').val('Wait...');
},
success: function(data) {
$('body').html(data);
}
});
Just try this code
$('.btn').val('Wait...');
or
$('.btn-danger').val('Wait...');
or
$('.btn-sm').val('Wait...');
Try adding more specificity to your CSS selector. Inside your ajaxForm() call try this to change submit button value:
$(this).find('input[type="submit"]').val('Wait...');
If i understood you right you need just change your selector to - $('input[type="submit"]').
So it will be -
$('form').find('input[type="submit"]').val('Wait...');
Or
use :submit selector
Your button has an id, why aren't you using that selector?
$("#trigger").val("Wait...");
Is the form itself loaded via ajax? If so then delegate.
$(document).on("customevent", "#trigger", function() {
$(this).val("Wait...");
});
and then in the beforesubmit just $(document).trigger("customevent");