I'm working with Symfony 1.4 and we have a problem with IE7
We have a form and an url, when we click the url we want to display a copy of the first form.
Number maximum of forms to display is 3
Now the problem is when we click the first time the second form display. But in the third time it blocks.
Here is the AJAX script:
<script type="text/javascript">
$('a#add_contact_anchor').click( function() {
var select_default_values = new Array();
var array_counter = 0;
$(this).parents('div#activity_contact_container').find('input').each( function(){
select_default_values[array_counter] = { value: $(this).val(), name: $(this).attr('id')};
array_counter++;
});
$(this).parents('div#activity_contact_container').find('select').each( function(){
select_default_values[array_counter] = { value: $(this).val(), name: $(this).attr('id')};
array_counter++;
});
var params = { default_contact_values: select_default_values, contact_num: <?php echo $contact_num; ?> };
ajaxCallObj = { page: '<?php echo url_for('myCommunication/updateContactsForCatalog', true); ?>', data: params, update: '#activity_contact_container' };
ajaxCall(ajaxCallObj);
});
</script>
And here is the url :
<a title="<?php echo __('Add new contact 3019'); ?>" href="javascript:void(0);" id="add_contact_anchor"><?php echo __('Add new contact 3019'); ?></a>
Try and move the counter outside the click function callback, probably you're just continuing overwriting the second form.
Related
I create a load more button for load more posts from the database but when I add like button for that if one time clicks on load more button and then click on the like button, like.php file runs two times and adds two lines in likes table. if I click 2 times on load more then like.php file runs 3 times and...
I want to know how I should create a loadmore button and like the button to works fine.
this is simple of my codes:
posts.php :
<div id="comnts2"></div>
<button id="btn2" >load more</button><script>
$(document).ready(function() {
var comco2 = 2;
var offset2 = 0;
$("#btn2").click(function() {
$.ajax({
method: "POST",
url: "ld_comco.php",
data: { comnco2 : comco2, offset2 : offset2}
})
.done(function(msg2) {
$("#btn2").hide();
} else {
$("#comnts2").append(msg2);
});
offset2 = offset2 + comco2;
});
$("#btn2").trigger("click");
});
</script>
ld_comco.php:
<?php
$comnco2=$_POST['comnco2'];
$offset2=$_POST['offset2'];
$rzp=mysqli_query($conn,"SELECT * FROM `tbl_users_posts` WHERE uid = '$uid' ORDER BY id DESC limit $offset2, $comnco2");
while($rp=mysqli_fetch_assoc($rzp)){
$sid=$rz['id'];
$lik=$rz['lik'];
echo $sid."<br>";
/*like*/
echo'<img class="li_ik1" data-id="'.$sid.'" src="pc3/up.png">'.$lik.' Likes</img>';
?>
</span>
<?php }?>
<script type="text/javascript">
$(document).ready(function() {
var uid=<?php echo $uid;?>;
$(document).on("click", ".li_ik1", function() {
var psid = $(this).data('id');
$.ajax({
method: "POST",
url: "like.php",
data: {psid: psid, uid: uid}
}).done();
});
});
</script>
like.php:
<?php
$id=$_POST['psid'];
$uid=$_POST['uid'];
$Y=mysqli_query($conn,"INSERT INTO `t_plik` (pid,uid) VALUES ('$id','$uid')");
$Q=mysqli_query($conn,"UPDATE `tbl_users_posts` SET lik=lik+1 WHERE id='$id'");
?>
thanks
I think the problem is, that you bind your like button multiple times globally. Each time you load the content from ld_comco.php you also call $(document).on("click", ".li_ik1", ...) in the $(document).ready block, which means you bind all ".li_ik1" buttons on the entire document (but some of them has already been bind).
I would remove the $(document).ready(...) block from the ld_comco.php and move the logic into the posts.php right before you render your content. A further positive aspect is you have your business logic at one place.
KEEP IN MIND: You get a response of buttons in msg2, thats why you do not need to filter $msg2 anymore. But if you wrap your buttons with further html tags in ld_comco.php, your buttons will be on a deeper level, so you need to use a selector again, like you did with .on("click", ".li_ik1", ...).
posts.php
...
var $msg2 = $(msg2);
// Now you bind only the loaded buttons instead of
// the buttons in the entire document for multiple times
$msg2.on("click", function() {
var $element = $(this);
var psid = $element.data('id');
var uid = $element.data('uid');
$.ajax({
method: "POST",
url: "like.php",
data: {psid: psid, uid: uid}
}).done();
});
$("#comnts2").append($msg2);
...
In your ld_comco.php you need to add the data-uid="'.$uid.'" and remove the script block. Then your file should look like this:
<?php
$comnco2=$_POST['comnco2'];
$offset2=$_POST['offset2'];
$rzp=mysqli_query($conn,"SELECT * FROM `tbl_users_posts` WHERE uid = '$uid' ORDER BY id DESC limit $offset2, $comnco2");
while($rp=mysqli_fetch_assoc($rzp)){
$sid=$rz['id'];
$lik=$rz['lik'];
echo $sid."<br>";
/*like*/
echo'<img class="li_ik1" data-id="'.$sid.'" data-uid="'.$uid.'" src="pc3/up.png">'.$lik.' Likes</img>';
}
?>
$("#btn2").trigger("click");
this in posts.php means click the #btn2
so after clicking it, you click it again
$(document).ready(function() {
var comco2 = 2;
var offset2 = 0;
$("#btn2").click(function() {
$.ajax({
method: "POST",
url: "ld_comco.php",
data: { comnco2 : comco2, offset2 : offset2}
})
.done(function(msg2) {
$("#btn2").hide();
} else {
$("#comnts2").append(msg2);
});
offset2 = offset2 + comco2;
});
$("#btn2").trigger("click");
});
</script>
Trying to use AJAX to submit form data to a PHP file. Everything in the code seems to work except for a call to the PHP file.
I setup a Java Alert() on the PHP file and it never alerts.
I am sure it is an issue with the AJAX code but I don't know it well enough to figure out what is going wrong.
The AJAX Call:
$(document).on('click','.addItem',function(){
// Add Item To Merchant
var el = this;
var id = this.id;
var splitid = id.split("_");
// Add id's
var addid = splitid[1]; // Merchant ID
var additem = splitid[2]; // Item ID
// AJAX Request
$.ajax({
url: "jquery/addItem.php",
type: "POST",
data: { mid : addid , iit : additem },
success: function(response){
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(300, function(){
$(this).remove();
});
}
});
});
The HTML Form Call Within a Table:
<span class='addItem' id='addItem_<?php echo $m; ?>_<?php echo $list['id']; ?>' >Add Item</span>
Ok Simple PHP code that it calls to with some alerts for testing:
<?php
require_once("../includes/constants.php");
require_once("../includes/functions.php");
$iid = filter_input(INPUT_POST, 'iit', FILTER_SANITIZE_STRING); // Item ID
$mid = filter_input(INPUT_POST, 'mid', FILTER_SANITIZE_STRING); // Merchant ID
$slot = 0;
$slot = getMerchSlot($mid);
?>
<script>
alert ("Slot Value: <?php echo $slot; ?>");
</script>
<?php
$result = $pdoConn->query("INSERT INTO merchantlist (merchantid, item, slot)
VALUES
('$mid', '$iid', '$slot') ");
if ($result) {
?>
<script>
alert("Looks like it worked");
</script>
<?php
}
echo 1;
?>
I am trying to fetch events from an external php file onto the full calendar view. I had asked a similar question sometime back but I am still struggling with this thing.
CODE (JS):
<script>
$(document).ready(function() {
$('#ccategory').change(function(){
var id = $(this).val();
var user = $('#current_user').val();
var calendar = $('#calendar').fullCalendar({
events: {
url: '<?php echo get_site_url(); ?>/get_calcat_calendar.php',
data: function() { // a function that returns an object
return {
dynamic_value1: id,
dynamic_value2: user
};
}
error: function() {
alert('There was an error while fetching events.');
}
}
});
});
});
</script>
Also I am going to add the file which is generating the json file below:
PHP CODE:
while($row = mysqli_fetch_assoc($result)){
$title = get_the_title($row['ID']);
$url = get_permalink($row['ID']);
$e = array();
$e['title'] = $title;
$e['url'] = $url;
$e['start'] = $row['start_date'];
$e['end'] = $row['end_date'];
$e['color'] = '#33cc33';
array_push($events, $e);
}
echo json_encode($events);
exit();
This is the code which I am using the fetch the json from the database. Any help will be greatly appreciated. Thank You
REQUIREMENT UPDATE:
[{"title":"Timeout72","url":"http:\/\/www.goawebsites.com\/goacalendar\/event\/timeout72\/","start":"2017-11-29","end":"2017-12-31","color":"#33cc33"}]
<div id='calendar'></div>
OTHER CALENDAR SCRIPT:
<script>
$(document).ready(function() {
var user_id = $('#current_user').val();
$('#calendar').fullCalendar({
displayEventTime: false,
events: [
<?php foreach($result as $r) { ?>
{
<?php $title = get_the_title($r['event_id']); ?>
<?php $url = get_permalink($r['event_id']); ?>
title: '<?php echo html_entity_decode($title); ?>',
start: '<?php echo $r['start_date'] ?>',
end: '<?php echo $r['end_date']." 23:59:59" ?>',
url: '<?php echo $url; ?>',
color: '#33cc33'
},
<?php } ?>
]
});
});
</script>
This should be more like what you need:
1) When you first set up your calendar, define your extra "user" and "category" data parameters dynamically (using a callback function).
2) Inside your category "change" event, all you need to do now is simply tell the calendar to refetch the events. There is no need to completely re-initialise the calendar, as you have been doing.
I can't see all of the code, including where you first initialise the calendar, so this may not be 100% accurate, but this is the general idea:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: '<?php echo get_site_url(); ?>/get_calcat_calendar.php',
data: function() { //using a callback function here allows fullCalendar to fetch the latest values of these parameters every time it makes a new request to the server, rather than them being supplied statically at initialisation
return {
id: $('#ccategory').val(),
user: $('#current_user').val()
};
},
error: function() {
alert('There was an error while fetching events.');
}
}
});
$('#ccategory').change(function() {
//just tell the calendar re-fetch the events. It will automatically get the latest category ID value and send it to the server as a parameter
$("#calendar").fullCalendar("refetchEvents");
});
});
This is based on the pattern shown in the "Dynamic data parameter" section in the documentation at https://fullcalendar.io/docs/event_data/events_json_feed/
I have a dynamic login header. 2 links, login / register and profile / logout.
I have a php class function that was being used to check if logged in and displaying relevant links, it worked fine.
I then moved to an ajax login as I didn't want a page refresh and the login box drops down and rolls back up. Again, it works fine.
I've noticed a slight issue, by slight I mean very irritating :)
Once logged in, Every single page refresh on new page shows a flicker where 'profile' becomes 'login' and then flickers back again. It only happens when the page is loading and doesn't last long but it's not very nice.
Could someone help me solve it please? I'm pretty new to Ajax/jQuery and spent ages wiht the help of some guys in here getting the ajax/jquery part functional in the first place.
this is script that toggles the login divs
<script>
window.onload = function(){
$(function() {
var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
$("#loggedIn").toggle(loggedIn);
$("#loggedOut").toggle(!loggedIn);
});
}
</script>
Thanks
EDIT: Ajax
function validLogin(){
$('#error').hide();
var username = $('#username').val();
var password = $('#password').val();
if(username == ""){
$('input#username').focus();
return false;
}
if(password == ""){
$('input#password').focus();
return false;
}
var params = {username: username, password: password};
var url = "../loginProcessAjax.php";
$("#statusLogin").show();
$.ajax({
type: 'POST',
url: url,
data: params,
dataType: 'json',
beforeSend: function() {
document.getElementById("statusLogin").innerHTML= '<img src="../images/loginLoading.gif" /> checking...' ;
},
success: function(data) {
$("#statusLogin").hide();
if(data.success == true){
$('#loggedIn').show();
$('#loginContent').slideToggle();
$('#loggedOut').hide();
}else{
// alert("data.message... " + data.message);//undefined
$("#error").show().html(data.message);
}
},
error: function( error ) {
console.log(error);
}
});
}
Use PHP to hide the unwanted element by doing the following
<?php
$loggedIn = $general->loggedIn();
?>
... Some HTML
<div>
<div id="loggedIn" <?php echo ( $loggedIn ? '' : 'style="display: none;"' ); ?>>
.... Logged in stuff
</div>
<div id="loggedOut" <?php echo ( !$loggedIn ? '' : 'style="display: none;"' ); ?>>
.... Logged Out Stuff
</div>
</div>
<script>
var loggedIn = <?php echo json_encode($loggedIn); ?>;
$('#loginForm').submit(function() {
... Handle form submit
... When ajax returns true or false we can set loggedIn and then toggle the containers
});
</script>
// CSS-Stylesheet
#loggedIn,
#loggedOut {display: none}
<script>
$(document).ready(function() {
var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
if (loggedIn == true) { // i can just guess here...
$("#loggedIn").show();
}
else {
$("#loggedOut").show();
}
});
</script>
Three possible solutions:
If the script element is placed inside the body, move
it to head element.
Use the following script instead:
$(document).ready(function () {
'use strict';
var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
$('#loggedIn').toggle(loggedIn);
$('#loggedOut').toggle(!loggedIn);
});
Hide both links in the "logged in" div using $('#loggedIn
a).hide(); and then, show them on the window.onload event using
$('#loggedIn a).show();. A bit dirty, bit it may work.
I've been looking for a week now for a decent full working example of how to use AJAX with Codeigniter (I'm an AJAX novice). The posts / tuts I've seen are old - all the programming languages have moved on.
I want to have an input form on a page which returns something to the page (e.g. a variable, database query result or html formatted string) without needing to refresh the page. In this simple example is a page with an input field, which inserts the user input into a database. I'd like to load a different view once the input is submitted. If I could understand how to do this I'd be able to adapt it to do whatever I needed (and hopefully it would help others too!)
I have this in my 'test' controller:
function add(){
$name = $this->input->post('name');
if( $name ) {
$this->test_model->put( $name );
}
}
function ajax() {
$this->view_data["page_title"] = "Ajax Test";
$this->view_data["page_heading"] = "Ajax Test";
$data['names'] = $this->test_model->get(); //gets a list of names
if ( $this->input->is_ajax_request() ) {
$this->load->view('test/names_list', $data);
} else {
$this->load->view('test/default', $data);
}
}
Here is my view, named 'ajax' (so I access this through the URL www.mysite.com/test/ajax)
<script type="text/javascript">
jQuery( document ).ready( function() {
jQuery('#submit').click( function( e ) {
e.preventDefault();
var msg = jQuery('#name').val();
jQuery.post("
<?php echo base_url(); ?>
test/add", {name: msg}, function( r ) {
console.log(r);
});
});
});
</script>
<?php echo form_open("test/add"); ?>
<input type="text" name="name" id="name">
<input type="submit" value="submit" name="submit" id="submit">
<?php echo form_close(); ?>
All that happens currently is that I type in an input, updates the database and displays the view "test/default" (it doesn't refresh the page, but doesn't display "test/names_list" as desired. Many thanks in advance for any help, and for putting me out of my misery!
Set unique id to the form:
echo form_open('test/add', array('id'=>'testajax'));
I assume that you want replace a form with a view:
jQuery(document).ready(function(){
var $=jQuery;
$('#testajax').submit(function(e){
var $this=$(this);
var msg = $this.find('#name').val();
$.post($this.attr('action'), {name: msg}, function(data) {
$this.replace($(data));
});
return false;
});
better way if you return url of view in json response:
$.post("<?php echo base_url(); ?>test/add", {name: msg}, function(data) {
$this.load(data.url);
},"json");
from your last comment - I strongly not suggest to replace body, it will be very hard to support such code.
but here is anser:
$.post("<?php echo base_url(); ?>test/add", {name: msg}, function(data) {
$('body').replace(data);
});