I have a function
function reply(id) {
$('#reply_'+id).toggle();
return false;
}
And Ajax function
<script type="text/javascript">
function post()
{
var comment = document.getElementById("comment").value;
var course_id = document.getElementById("course_id").value;
var user_id = document.getElementById("user_id").value;
if(comment)
{
$.ajax
({
type: 'post',
url: 'comments.php',
data:
{
comment:comment,
course_id:course_id,
user_id:user_id
},
success: function (response)
{
document.getElementById("comment-list").innerHTML=response+document.getElementById("comment-list").innerHTML;
document.getElementById("comment").value="";
}
});
}
return false;
}
</script>
And the content that is added after ajax call
...
...
<p class="text-right"><i class="fa fa-reply"></i> reply</p>
...
...
<div class="row" id="reply_<?php echo $i; ?>" style="display: none;">
...
...
So basically that javascript functions toggle the div and it is working perfectly fine on page refresh but when adding through ajax success call the javascript toggle doesn't work. It will work after I refresh the page.
Anyway to fix this so toggle work when content added through ajax without refresh.
Thanks.
Change your content that is added after ajax call as below:
<p class="text-right">
<a href="#" data-id="<?php echo $i; ?>" class="btn btn-default btn-sm btnReply">
<i class="fa fa-reply"></i> reply</a></p>
and write jquery code as below
$("body").on("click", ".btnReply", function(event){
var id =$(this).attr('data-id');
reply(id);
});
Related
Ajax is not working while using in CodeIgniter. The alert message inside the script is working well but the controller function is not getting the call to perform.
View part
<div class="col-md-6 col-sm-6 col-xs-12">
<a class="buttons" onclick="updateExpress(<?php echo $lp->User_Id; ?>)" id="<?php echo $lp->User_Id; ?>" href="javascript:;">
<span class="button-icon"><i class="far fa-heart"></i>
</span>Express your interest</a>
</div>
script added in the view part is:
<script>
function updateExpress(partnerId){\
$.ajax({
url:"<?php echo base_url() ?>index.php/Home/add_express"+partnerId
});
alert("Expressed interest at Profile ID M"+partnerId);
}
</script>
The controller part is mentioned below:
public function add_express()
{
$partnerExp=$this->uri->segment(3);
$user=$_SESSION['userID'];
$datetoday=date("d-m-Y");
$data=array(
'NotificationTo' => $partnerExp,
'NotificationFrom' => $user,
'Notification_Id' => '6',
'date' => $datetoday,
'Is_read' => '0'
);
$data['addresult']=$this->action_data->add_express($data);
}
This function is working while calling this controller function separately. But when it is trying to call using ajax it doesn't work.
Missing ‘/‘ in the url.
add_express”+partnerId
To
add_express/“+partnerId
I'm not so sure about how to type this question title, but anyway
I have code like this in my view called content.php
<div class="fix single_content floatleft">
<h2><img src="<?php echo base_url('assets/images/New.png')?>" alt="" width="24" height="24"></img><a href="<?php echo base_url('index.php/Main_Controller/loadKeluhan')?>" >New</a> </h2>
<?php include 'tableLoad.php' ?>
<p class="viewall">view more <i class="fa fa-hand-o-right"></i></p>
</div>
And in its looks like this in tableLoad.php
<div class="fix"><ul id="newTable"><?php
$i=0;
while($i<count($array)){
echo '<li>
<div class="entry_name floatleft"><img src="assets/images/mozilla.png" alt="">'.$array[$i].'</div>
<div class="download-count floatright"><i class="fa fa-download"></i> 4578</div>
</li>';
$i++;
}
?></ul></div>
$array[i] is a forwarded variable from my controller which have list of item I need from my database.
I want to have it refreshed every 2 second so it will change the display if something changed from the database. I use my code in jQuery like this to do it:
$(document).ready(function(){setInterval(function(){
$('#newTable').html("<?php include 'tableLoad.php'; ?>")
}, 2000);});
The problem is that every time jQuery code run, it show nothing and there is no error report in browser's console. The codes in php run well, but the one from jQuery did not.
Can anybody please give me some enlightment?
Thanks in advance and sorry for my bad English
SOLVED
Solution :
I change my js code to Ajax and call function from controller with it like poonam said. The js file become like this :
$(document).ready(function(){
setInterval('autoRefresh_div()', 2000);
});
function autoRefresh_div()
{
$.ajax({
dataType:'text',
type: "POST",
url: BASE_URL+'index.php/Main_Controller/loadKeluhan',
success: function (response){
$("#newTable").html(response);
}
});}
with loadKeluhan is a function in my Main_Controller to load tableLoad view and pass new array value to it.
You should use load()
Try this:
function autoRefresh_div()
{
$("#newTable").load("tableLoad.php");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 2000); // refresh div after 2 secs
And use this:
<div class="fix single_content floatleft">
<h2><img src="<?php echo base_url('assets/images/New.png')?>" alt="" width="24" height="24"></img><a href="<?php echo base_url('index.php/Main_Controller/loadKeluhan')?>" >New</a> </h2>
<div class="fix"><ul id="newTable">
<?php include 'tableLoad.php' ?>
</ul>
</div>
<p class="viewall">view more <i class="fa fa-hand-o-right"></i></p>
</div>
Get only <li> from tableLoad.php.
Similarly you can use $.ajax() or $.post() etc instead of load() function and put the response in div or ul.
With $.ajax()
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$.ajax({
dataType:'text',
type: "POST",
url: 'url_to_your_file or function',
success: function (response){
$("#newTable").html(response);
}
});
}
setInterval('autoRefresh_div()', 2000); // refresh div after 2 secs
</script>
I am using popup for showing message based on the id of click function.so i want get the id when popup is open in php. thanks in advance
<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>
<p> </p>
<div class="modal hide" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<?php //here i want to getting script variable value for database purpose?>
</div>
</div>
and my script is
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).data('id');
$(".modal-body #bookId").val( myBookId );
});
in ajax call i am getting the id from the next page but i want value in same page
function viwpost(id) {
var pid=id;
$.ajax({
type: "POST",
url: "view_more.php",
data: "pid=" + pid ,
success: function(data)
{
$("#myModal21").html(data);
}
});
}
Since you're already using jQuery framework/API:
you can simply use the
$.get('phpfile.php' { id: myBookId }).done(function (response) { alert(response); });
your PHP file can pick the request up like this:
$_GET['id'];
If you're trying to make a live pop-up to load the data, this is an incorrect method of doing so. PHP script is only loaded once on server running and sending a request will only give you a response so ensure you research.
I'd suggest you create your PHP file to echo out the data you want to pop-up.
Demonstration of PHP file to send a response back to the request (as requested):
if(isset($_GET['id']))
{
echo 'what ever is outputted to the client will be received in the response';
}
Hey there is mistake in getting id of the link. You can use like this -
first create input type hidden and set its id bookId in model body like this:
<input type="hidden" id="bookId" />
$(document).on("click", ".open-AddBookDialog", function () {
var myBookId = $(this).attr('data-id');
$(".modal-body #bookId").val( myBookId );
});
I have the following code
jQuery(document).ready(function($)
{
$("#deleteorderb").click(function()
{
$("#deleteorder").attr('href','/deleteorder.php?id=' + $('#deleteorderb').val());
})
});
<a onclick="jQuery('#modal-2').modal('show');" id="deleteorderb" name="deleteorderb"
value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
When I click the link, it opens a popup modal, which has a but of text saying are you sure you want to delete, and then there's a link, herf, I want to update that herf to equal the the other href's value which will be a database query to get the id. the ink updates with the above but not the id. I have checked the source code and the a hrefs value IS set.
You want to grab element attribute value, so instead of
$('#deleteorderb').val()
try
$('#deleteorderb').attr('value')
Try something like this, *note the use of .attr("value") not .val():
<a onclick="dialog();" id="deleteorderb" name="deleteorderb" value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left"> Cancel</a>
<script>
$(document).ready(function() {
$("#deleteorderb").click(function() {
var a = $('#deleteorderb').attr("value");
var link = "/deleteorder.php?id=" + a;
$("#deleteorder").attr("href", link);
});
function dialog() {
$('#modal-2').modal('show');
};
});
</script>
The value attribute is normally used on form fields. So in your case it would make sense to use a data attribute as follows:
<a id="deleteorderb" name="deleteorderb" data-value="<?php echo $r['id']; ?>" .....
And in your JavaScript you could access it like so:
$('#deleteorderb').data('value');
BONUS
I would not recommend using inline JS. Instead just use jQuery to setup a click event listener in your DM ready callback:
$('#deleteorderb').on('click', function( e ) {
e.preventDefault();
$('#modal-2').modal('show');
});
Updated html:
<a
id="deleteorderb"
name="deleteorderb"
data-value="<?php echo $r['id']; ?>"
class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
I'm trying to develop my skills with Ajax
I want to change my wrapper content with a different pages wrapper content without having to refresh the page.
I'm using:
$(function () {
$("#page2btn").click(function () {
$.ajax({
url: 'page2.asp',
data: { id: $(this).attr('id') },
success: function (data) {
$('#Wrapper').html(data);
}
});
});
});
<div id="Wrapper">
<div id="menu">
<a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
<a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
<a class="navbutton" onclick="MakeRequest3()">Page3</a>
</div>
<h1>Test1</h1>
</div>
and another page called page2.asp
with a different wrapper content saying Test2
But my wrapper wont change when I click the button.
any help would be appreciated.
Try to simplify it to determine if this is a problem with your front-end or back-end code...
Try this and see of it works any better..
$('#Wrapper').load('page2.asp?id='+$(this).attr('id'));
Try this:
$(function () {
$("#page2btn").click(function () {
$.ajax({
url: 'page2.asp',
data: { id: $(this).attr('id') },
success: function (data) {
$('#dynamic_content_div').html(data);//data = <h1>Test 2</h1>
}
});
});
});
HTML:
<div id="Wrapper">
<div id="menu">
<a class="navbutton" onclick="MakeRequest1()">Home</a> <span class="navbutton">|</span>
<a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span>
<a class="navbutton" onclick="MakeRequest3()">Page3</a>
</div>
<div id="dynamic_content_div">
<h1>Test1</h1>
</div>
</div>
Javascript is case sensitive. You are using lowercase in case of assigning the event -
$(function () {
$("#page2btn").click(function () { //lowercase P
...
});
});
but using uppercase for html id
...
<a class="navbutton" id="Page2btn">Page2</a> <span class="navbutton">|</span> //upper case P
...
so, it never finds the item to bind to, thus nothing happens when you click. Either change js to -
$("#Page2btn").click(function ()
or change html to -
<a class="navbutton" id="page2btn">Page2</a> <span class="navbutton">|</span>
Other than this, I don't see the error.
Try jQuery replaceWith method, like this:
$(function () {
$("#page2btn").click(function () {
$.ajax({
url: 'page2.asp',
data: { id: $(this).attr('id') },
success: function (data) {
$("#Wrapper").replaceWith(data); //try with double qoutes
}
});
});
});
*The link below maybe helpful:
Change content of div using jQuery