I have the modal with form on click of save it saves in the temporary page and the modal has to close the values should get displayed in the div content.now it is working fine but when the page reloads the content is displaying.i don't want to reload the page
html code:
<div class="content">
<?php if($load_data): ?>
<?php foreach($load_data as $data): ?>
<div class="row modal_bg">
<div class="col-md-3">
<span class="jd_name"><?php echo $data->first_name; ?></span>
<span class="jd_name" ><?php echo $data->last_name; ?></span>
<p class="loc"><?php echo $data->location; ?></p>
</div>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
ajax code:
jQuery.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>" + "page/datapage/",
data: formData,
processData: false,
contentType: false,
success: function(res)
{
$('#myModal').modal('hide');
console.log(res);
if(res)
{
url:"<?php echo base_url(); ?>page/datapage/<?php echo $per->id; ?>";
}
},
error: function(errResponse)
{
console.log(errResponse);
}
});
how to solve this issue ,without page reload i want to display the content.can anyone suggest me how to do.
you need to use html();
success: function(res)
{
$('#yourTargetId').html(res);
Related
I am trying to implement an infinite scroll in my application but at the moment of reaching the end of my page, this throws the error that places.
This is the ajax code:
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
$.ajax(
{
url: '/loadMoreData.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
Here, is where I show the data from th DataBase:
<?php while ($post = $result -> fetch(PDO::FETCH_ASSOC)){ ?>
<div class="box-list" id="post-data">
<div class="item">
<div class="row">
<p class="post-id hidde" id="<?php echo $post['id']; ?>">
<div class="col-md-1 hidden-sm hidden-xs">
<div class="img-item"><img src="<?php echo OTRA; ?>/images/<?php echo $post['thumb']; ?>" alt=""></div>
</div>
<div class="col-md-11">
<h3 class="no-margin-top"><?php echo $post['titulo']; ?> <i class="fa fa-link color-white-mute font-1x"></i></h3>
<h5><span class="color-black"><?php echo $post['company']; ?></span> - <span class="color-white-mute"><?php echo $post['locacion']; ?></span></h5>
<p class="text-truncate "><?php echo $post['extracto']; ?></p>
<div>
<span class="color-white-mute"><?php echo fecha($post['fecha']); ?></span>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
and this id the other PHP file to load more data:
<?php session_start();
require 'extras/config.php';
require 'functions.php';
comprobarSession();
$conexion = conexion($bd_config);
$qry = "SELECT * FROM publications WHERE id > '$_GET['last_id']' ORDER BY id DESC LIMIT 8";
$result = $conexion->query($qry);
print_r ($result);
$json = include('views/empleos.php');
echo json_encode($json);
on the Developer Tool of Chrome the error that show me is
jquery.js:8706 GET http://localhost/loadMoreData.php?last_id=9 404 (Not Found)
What is the name of that php file? Sounds like it is not loadMoreData.php? Perhaps it is loadData.php, and the AJAX call should be changed?
I am trying to send data to one of my function within a controller using ajax but the error at the bottom (in the image) wont let the variables pass.
I'm using the codeigniter framework and this ajax function is in my view.
$(document).ready(function(){
function myButton(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
}
dataType : 'text',
success:function(data){
location.reload();
});
}
}
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
Uncaught ReferenceError: myButton is not defined(…)
Define the function outside of $(document).ready()
Currently, the function isn't being defined until after the dom is loaded, meaning that there is no definition when the button is setup.
This should look like this:
<script>
var myButton = function(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+id2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
},
dataType : 'text',
success:function(data){
location.reload();
}
});
};
$(document).ready(function(){
//This isn't really needed
});
</script>
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
You're declaring myButton within the inner document.ready function. You need to declare it in the global scope.
<script>
// Define in global scope
function myButton(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
}
dataType : 'text',
success:function(data){
location.reload();
});
}
</script>
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
The answer may be one charcter ; so use <?php echo base_url(); ?> this will print invalid Javascript and may be more !!!
$(document).ready(function(){
function myButton(id1, id2, id3){
$.ajax({
method: "POST",
url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+di2+"/"+id3,
data: {
id1:id1,
id2:id2,
id3:id3
}
dataType : 'text',
success:function(data){
location.reload();
});
}
}
<div align="center">
<a>
<button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
<img src="<?php echo base_url();?>images/button.png" >
</button>
</a>
</div>
After ajax load of html content I need to scroll to specific element. The element has attr data-event-id="" But sometimes this variable $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top; returns 0. Whole ajax code is:
function refreshContent(id)
{
var scrollNumber = 0;
$.ajax({
type: 'POST',
url: '<?php echo Yii::app()->createAbsoluteUrl("user/ajaxEventLoad"); ?>',
dataType:'html',
success:function(data){
$("#eventListBlock").empty().append(data);
if(id!=null) {
console.log(id);
scrollNumber = $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top;
console.log(scrollNumber);
$("html, body").animate({
scrollTo: scrollNumber
}, 1000, function() {
// alert("Finished animating");
});
}
},
error: function(data) { // if error occured
alert("Error occured. please try again");
}
});
}
and html:
<div id="eventListBlock">
<?
$this->renderPartial('/windows/timelineWindow', array(
'dataProvider'=>$dataProvider
));
?>
</div>
with rendering this part:
<div class="cd-timeline-block">
<div class="cd-timeline-icon" style="background: <? echo $data->color ?>">
<i class="fa fa-<? echo $data->icon ?>"></i>
</div>
<div class="cd-timeline-content">
<div class="timelineToolPanel" data-event-id="<? echo $data->id ?>">
<i class="fa fa-pencil timelineToolPanelEdit"></i>
<i class="fa fa-trash timelineToolPanelDelete"></i>
</div>
<h2><? echo $data->title ?></h2>
<p><? echo $data->content ?></p>
<span class="cd-date"><? echo date("d. m. Y", strtotime($data->date_event)); ?></span>
</div>
</div>
where #eventListBlock is fixed container.
custom attributes in html have to be defined with "data-*", otherwise it won't work.
http://www.w3schools.com/tags/att_global_data.asp
name your attr in "data-event-id=" and it should do the job, even when i have not proofed the JS code :D
I am actually trying to make comments and also edit option when the comment enters it will show in a 'div'through ajax.
<?php
$q="select * from discuss where rownum=1 order by id desc";
$s=oci_parse($conn, $q);
$r=oci_execute($s) or die(oci_error());
echo "<table border=1>";
while($m=oci_fetch_assoc($s))
{
echo "<tr style='background-color:red'><th style='float:left;color:white'>Name : ".$m['NAME']."</th><th style='float:right;color:white'>Date: "."".$m['DATE_TIME']."</th></tr>";
echo "<tr class='edit_option' style='width:1000px;height:10px;background- color:white'><div><td id='input_text' style='width:1000px;height:10px;background- color:white'>".$m['COMMENTS']."</div><div class='anchor_edit' id='anchor_id_edit'><span onclick=\"edit_text('".$m['COMMENTS']."')\">edit</span></div></td></tr>";
}
echo "</table>";
?>
<script>
function edit_text(edit_option){
alert(edit_option);
}
</script>
onclick the function value is coming to edit_text() function getting alert, here i am not getting how can iput logic for this comment.
when edit option is clicked the user has to get his/her comment in a input text 'value' so the user can edit comment.
onclick how can i do the edit comment, please anyone can help!!
This may be help to you
Here I take a sample array input data
PHP SCRIPT
<?php
$r=array(
array('COMMENT-ID'=>'1','NAME'=>'Comment1','COMMENTS'=>'Comment1Comment1Comment1Comment1','DATE_TIME'=>'12547896321'),
array('COMMENT-ID'=>'2','NAME'=>'Comment2','COMMENTS'=>'Comment2Comment2Comment2Comment2','DATE_TIME'=>'12547896321'),
array('COMMENT-ID'=>'3','NAME'=>'Comment3','COMMENTS'=>'Comment3Comment3Comment3Comment3','DATE_TIME'=>'12547896321'),
array('COMMENT-ID'=>'4','NAME'=>'Comment4','COMMENTS'=>'Comment4Comment4Comment4Comment4','DATE_TIME'=>'12547896321')
);
echo "<div>";
foreach($r as $m)
{ ?>
<div>
<div>
Name : <?php echo $m['NAME']; ?>
</div>
<div>
Date: <?php echo $m['DATE_TIME']; ?>
</div>
</div>
<div class="comment">
<div class="comment-text" id="comment<?php echo $m['COMMENT-ID']; ?>">
<?php echo $m['COMMENTS']; ?>
</div>
<div class="commentEditBtn">
Edit
</div>
<div class="editedText"></div>
<div class="commentInput" data-id="<?php echo $m['COMMENT-ID'] ?>">
<input type="text" name="comment" /><br/>
<button class="commentSubmit">Submit</button>
</div>
</div><br/>
<?php }
echo "</div>";
?>
jQuery
$(".commentEditBtn").on('click',function(){
$('.commentinput').hide();
var parentDiv = $(this).parent();
var commentText = parentDiv.find('.comment-text').html();
parentDiv.find('.commentInput input').val(commentText.trim());
parentDiv.find('.commentInput').show();
});
$(".commentInput > input").keypress(function(){
var commentData = $(this).val();
$(this).parent().parent().find('.editedText').html(commentData.trim()).show();
});
$(".commentInput .commentSubmit").on('click',function(){
var commentId = $(this).parent().attr('data-id');
var commentText = $(this).parent().find('input').val().trim();
$(this).parent().parent().find('.editedText').html('').hide();
$.ajax({
url: "AJAX_POST_URL",
type: "POST",
data: {
commentId: commentId,
commentText: commentText
},
dataType: 'json',
success: function (data) {
if (data.error == 'false') {
$('#comment' + commentId).html(commentText);
}
}
});
});
CSS
.commentInput{display: none;}
.editedText{display: none;}
Check out this jquery plugin: http://jsfiddle.net/2u89gnn8/1/
You can make, for example, an h1 editable when a user clicks a button:
$('h1').editable({
"enable": true,
"trigger": $('button')
});
I have a a page where I am getting data from a SQL database via a call through jQuery and Ajax. When the page loads, the script is getting the data from the PHP file. Ajax is getting the correct response (I can see that in Firebug), but is not displaying it in the div as HTML.
Frontpage:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<?php foreach($news as $item): ?>
<li style="border-top: 5px solid #a1cb2f;" class="block" id="post_<?php echo $item['date_added'] ?>">
<img class="post_user_img" src="<?php echo "/userdata/profile_pics/".$item['user_img'] ?>">
<span class="feedtext">
<div class="added_by"></div>
<script type="text/javascript">
function get_userdata() {
user_id = "<?php echo $item['added_by'] ?>";
var datastring = 'user_id='+ user_id;
$.ajax({
type: "POST",
url: "/get_userdata.php",
data: datastring,
dataType: "html",
success: function(data){
$('.added_by').html(data);
}
})
};
get_userdata();
</script>
</br>
</br>
<?php echo $item['body'] ?>
</span>
</br>
</li>
PHP:
<?php include("includes/session.php"); include("includes/connect_to_mysql.php");
if(isset($_POST['user_id'])){
$user_id = $_POST['user_id'];
$sql = mysql_query("SELECT * FROM members WHERE id='$user_id'");
$news = array();
$row = mysql_fetch_assoc($sql);
}
echo "".$row['firstname']."".$row['lastname']. "";
?>
Have tried searching a lot of places now and I have looked through a lot of questions here on Stackoverflow, but I was not able to find the answers. If there are any other questions that are exactly the same, please lead me in that direction. That would be very nice of you.
It looks like you are not returning valid HTML, try:
echo "<a href='user_profile.php?u=".$row['id']."'>" .$row['firstname']."".$row['lastname']. "</a>";
See the extra ' to close href attribute.