I have two views main.php and details.php. In main.php there are numerous content and under each content there is a "view more" button. If somebody clicks view more an ajax call will dynamically load rest of the content from details.php which will fetch the data from database w.r.t the ID of the content. And it's a list style view in details.php.
In the header of main.php my main script file contains this code snippet to fetch data from details.php -
$('.view_more').click(function(e) {
$.ajax({
type: 'POST',
url: '/path/to/my/controller/method',
dataType: 'html',
success: function (html) {
$('#details_container').html(html);
}
});
});
Data is loading perfectly. But the problem is there is a add content button in details.php along with each content which has been loaded dynamically is not working. The content adding script is in my main.js added in main.php. But I have to add this particular jquery code snippet of adding the content in details.php, otherwise it's not working. So, whenever view more is being clicked it is returning html data along with a ....code for adding the content.... stick with it. Which is not at all desired.
How to solve this issue? Please help. Thanks in advance.
Here is the code of adding the content.
<script type="text/javascript">
$('.add_this').click(function(){
var t = jQuery(this);
var id_add = t.attr("id");
var content_category_id = t.attr("rel");
var add_content_id = id_add.substring(id_add.indexOf('_')+1);
var content_creator_id = t.attr("data-clip-id");
$.ajax({
type: "POST",
url: "/path/to/my/controller/method",
data: add_content_id,
cache: false,
success: function(response){
if(response)
{
$("#"+id_clip).text("Clipped");
}
}
});
});
</script>
I want to add again I am able to add the contents but to do so I have to embed this code snippet in details.php that I dont want to do. I need torun from my main script file.
This should work:
$(document).on('click','.add_this',function(){
var t = jQuery(this);
var id_add = t.attr("id");
var content_category_id = t.attr("rel");
var add_content_id = id_add.substring(id_add.indexOf('_')+1);
var content_creator_id = t.attr("data-clip-id");
$.ajax({
type: "POST",
url: "/path/to/my/controller/method",
data: add_content_id,
cache: false,
success: function(response){
if(response)
{
$("#"+id_clip).text("Clipped");
}
}
});
});
Related
i use this AJAX script to load an extern page (mpt_planningen_overzicht.php) into a div op the mainpage (mainpage.php) when people select or unselect a checkbox.
But i also want to load the data from the extern page in the div when mainpage.php is opened.
How can i do this?
Script:
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').on('click', function(){
var formData = $(":input,:hidden").serialize();
$.ajax({
type: "POST",
url: "mpt_planningen_overzicht.update.php",
data: formData,
success: function(result){ /* GET THE TO BE RETURNED DATA */
$("#resultaat").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
}
});
});
});
</script>
I thought something like this:
function onLoadSubmit() {
document.nameofForm.submit();
}
But the Ajax script that checks if a selectbox is checked/unchecked is already on mainpage.php, so when i add the script above, it will continue reloading.
If I understood the question correctly, you can try something like this:
<script type="text/javascript">
//separationg the function that loads the page in order to use it multiple times
var loadSepratePage = function(){
var formData = $(":input,:hidden").serialize();
$.ajax({
type: "POST",
url: "mpt_planningen_overzicht.update.php",
data: formData,
success: function(result){ /* GET THE TO BE RETURNED DATA */
$("#resultaat").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
}
});
}
$(document).ready(function(){
$('input[type="checkbox"]').on('click', loadSepratePage); // without paranthesis () to pass the function as a parameter
loadSepratePage() // with paranthesis () to actually call the function
});
</script>
If this is not what you mean feel free to leave comment
alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.
Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>
You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);
I'm trying to do shortcode by ajax, i'm getting page content using ajax , and shortcode's added to content are displaying like plain text. I was searching for solution but there's nothing that's help me solve this problem.
For example i have metaslider shortcode in content, and i want to display it on several pages. The main problem is that there will be diffrent slider on every page, so i need load sliders depends on their ID.
get page content method:
ajax_get_post: function(postid) {
var loader = $('#pop-single .loader');
loader.show();
var data = {
'action': 'get_single_post',
'post_id': postid
};
$.ajax({
type: 'POST',
url: ajaxurl,
data: data,
success: function(data) {
var content = $('#pop-single .popup');
loader.hide();
content.show();
//console.log(data);
var post = JSON.parse(data),
title = post.post_title,
content = post.post_content;
$('#pop-single h1.title').html(title);
$('#pop-single .content-ajax').html(content);
},
error: function(data) {
alert('nope');
}
});
},
get post php - functions.php
add_action('wp_ajax_get_single_post', 'ajax_get_single_post');
add_action('wp_ajax_nopriv_get_single_post', 'ajax_get_single_post');
function ajax_get_single_post() {
if (!empty($_POST['post_id'])) {
$id = $_POST['post_id'];
$post = get_page($id);
echo json_encode($post);
}
die();
}
Now in same way i want to display any shortode added to content, or maybe there's other way, but it should be done dynamically, that's why im using ajax.
Thank's in advice for any help or example how to do that.
so I am attempting to pass some information in a JSON object and have a php page insert the data into a database. However, I am running into some trouble. The "update" button exists in a popup window. The user then clicks "update" and the inputted data should be processed accordingly. However, I fear that I am not even reaching my .click function. None of my alerts seems to be triggered. Below I will point out where issues are occurring. Thank you!
<script>
function updateTable()
{
document.getElementById("testLand").innerHTML = "Post Json";
//echo new table values for ID = x
}
$('#update').click( function() {
alert("help!");
var popupObj = {};
popupObj["Verified_By"] = $('#popupVBy').val();
popupObj["Date_Verified"] = $('#popupDV').val();
popupObj["Comments"] = $('#popupC').val();
popupObj["Notes"] = $('#popupN').val();
var popupString = JSON.stringify(popupObj);
alert(popupString);
#.ajax({
type: "POST",
dataType: "json",
url: "popupAjax.php",
//data: 'popUpString = '+ popupString,
data: popupObj,
cache: false,
success: function(data) {
updateTable();
alert("testing tests");
}
});
});
</script>
<html>
<button onClick="openPopup(<?php echo $row['ID'];?>);"><?php echo $row['ID'];?></button> <!--opens a popup with input options-->
<button id="update">Update</button> <!-- this button is supposed to cause the javascript above to run when clicked, however none of my alerts seem to be reached.-->
</html>
Thank you for looking!
1)I can only guess that you're trying to use JQUERY?
Where do you include the library?
2 )#.ajax isnt valid Jquery function
try $.ajax instead
I was wondering if it's possible to use the $().ready function to test if another page is fully loaded.
Here I'm talking about a newsfeed updater, where the function will send a POST request to a background php page to update the database, and then, using ajax, the newsfeed will reload to grab new data.
function send_data(){
var head = $("#headline").val();
var news = $("#news").val();
var info = '&headline='+head+'&news='+news; //update string
$.ajax({
url: 'recieve_update.php', //updating php file
type: 'POST',
data: info //data string
});
$().ready(function() {
$("#newsfeed").load("load_news.php"); //reload the newsfeed viewer
});
}
Use the callback function of $.ajax():
$.ajax({
url: 'recieve_update.php', //updating php file
type: 'POST',
data: info, //data string
success: function(){
$("#newsfeed").load("load_news.php"); //reload the newsfeed viewer
}
});
I believe something alone these lines would be what you're looking for. Straight from the jQuery source. http://api.jquery.com/jQuery.ajax/
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});