I don't know the specifications of PHP and an ID DIV. Here's my question :
Can I put in the same time an ID DIV named #modal and an ID PHP RETURN ?
while ( $contents_print = mysqli_fetch_array( $req_print ) ) {
echo'
<div class="row print">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img data-tags="print" class="activator" src="../00_sources/images/upload/pic_min/' . $contents_print[ 'pic_min' ] . '" alt="' . $contents_print[ 'pic_min' ] . '">
<i class="material-icons">add</i>
</div>
<div class="card-content">
<span class="card-title">'.$contents_print['nom_projet'].'</span>
<p>'.$contents_print['detail_projet'].'</p>
</div>
</div>
</div>
</div>';
}
This is my jquery ajax code :
$(document).ready(function(){
$('.materialboxed').materialbox();
});
$( document ).ready( function () {
$.ajax( {
url: 'core/libs/contents-services.php?action=getFilterContent&id=3',
type: "get",
dataType: "html",
success: function ( reponse ) {
$( '#modal' ).html( reponse );
}
} );
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$( '.modal' ).modal();
} );
In my ajax code : the line url: 'core/libs/contents-services.php?action=getFilterContent&id=3', I have to use the id from the php/mysql request
I would like to make a link like this :
url: 'core/libs/contents-services.php?action=getFilterContent&id='.$_GET['id'].',
I hope I'am clear
Thanks for your help
http://portfolio.rabahbook.fr to see my working's site
As I understand you get an Id from response and trying to assign it to ajax href. If this is your case, you can do something as below(please note the url_id variable.):
var url_id =3;
$( document ).ready( function () {
$.ajax( {
url: 'core/libs/contents-services.php?action=getFilterContent&id='+url_id,
type: "get",
dataType: "html",
success: function ( reponse ) {
$( '#modal' ).html( reponse );
url_id = response.url_id;/// get url id from response and assign it to
//your href
}
});
// the "href" attribute of the modal trigger must specify the modal ID
//that wants to be triggered
$( '.modal' ).modal();
} );
</script>
$('.post .modal-action').click(function(e){
e.preventDefault();
var id_projet= $(this).data('id_projet');
var $hidennDiv = $('#' +id_projet);
// do your ajax and whatever you want to do with the hidden div
$.ajax( {
url: 'core/libs/contents-services.php?action=getFilterContent&id='+id_projet,
type: "get",
dataType: "html",
success: function ( reponse ) {
$( '#modal' ).html( reponse );
id_projet = reponse.id_projet;
}
} );
$( '.modal' ).modal();
});
This works for me
Thanks all to taking time to anwser to me !
Related
I created a side panel with buttons. On click I load specific php file assigned to each button. How to correctly add functionality that will return us to the default button list?
HTML:
<div class="sidemenu">
<div class="content">
<button data-content="first">Load first content</button>
<button data-content="second">Load second content</button>
<button data-content="third">Load third content</button>
</div>
</div>
Script:
jQuery( document ).ready( function( $ ) {
$( '.sidemenu button' ).on('click', function( event ) {
event.preventDefault();
var content = $( this ).data( 'content' );
$( '.sidemenu .content' ).empty();
$.ajax( {
url: ajaxobject.ajaxurl,
type: 'get',
dataType: 'html',
data: {
action: 'sidemenu_content',
content: content,
},
success: function( result) {
$( '.sidemenu .content' ).append( result );
console.log(result);
}
});
});
});
PHP:
function sidemenu_content() {
if( isset( $_GET['content'] ) ) {
$content= $_GET['content'];
if ( $content == 'first' ) {
require_once( get_template_directory() . '/sidemenu/first.php' );
} elseif ( $content == 'second' ) {
require_once( get_template_directory() . '/sidemenu/second.php' );
} elseif ( $content == 'third' ) {
require_once( get_template_directory() . '/sidemenu/third.php' );
}
}
wp_die();
}
I tried to add <button data-content="return">Return</button> in each of three php files and in the sidemenu_content function:
if ( $content == 'return' ) {
require_once( get_template_directory() . '/sidemenu/return.php' );
}
But unfortunately it doesn't work.
UPDATE
Almost everything works with this code. "Return" button appear but onclick doesn't really return to the button list.
var backup;
jQuery( document ).ready( function( $ ) {
$('.sidemenu button').on('click', function( event ) {
event.preventDefault();
var content = $( this ).data( 'content' );
$.ajax( {
url: ajaxobject.ajaxurl,
type: 'get',
dataType: 'html',
data: {
action: 'sidemenu_content',
content: content,
},
success: function( result) {
backup = $( '.sidemenu .content' ).innerHTML;
$( '.sidemenu .content' ).innerHTML = result;
$( '.sidemenu .content' ).empty();
$( '.sidemenu .content' ).append( '<button class="return">Return</button>' + result );
$( '.sidemenu button.return').on('click', function( event ) {
event.preventDefault();
$( '.sidemenu .content' ).innerHTML = backup;
})
}
})
})
});
I think it's good for performance if when clicked on return button browser doesn't send AJAX to get already have code. I add hidden block to backup buttons for reuse after click on return
<div class="sidemenu">
<div class="content">
<button data-content="first">Load first content</button>
<button data-content="second">Load second content</button>
<button data-content="third">Load third content</button>
</div>
<div class="hidden" style="display:none;"></div>
</div>
And jQuery:
jQuery( document ).ready( function( $ ) {
$('.sidemenu button').on('click', function( event ) {
event.preventDefault();
var content = $( this ).data( 'content' );
$.ajax( {
url: ajaxobject.ajaxurl,
type: 'get',
dataType: 'html',
data: {
action: 'sidemenu_content',
content: content,
},
success: function( result) {
$( '.sidemenu .hidden' ).append($( '.sidemenu .content button' ));
$( '.sidemenu .content' ).html(result);
$( '.sidemenu .content' ).append('<button class="return">Return</button>');
$('.sidemenu button.return').on('click', function( event ) {
event.preventDefault();
$( '.sidemenu .content' ).empty();
$( '.sidemenu .content' ).append($( '.sidemenu .hidden button' ));
})
}
})
})
});
How it Works:
Before empty all data I backupped and after successfull ajax response I empty data end append response data. After response data I append return button. If you click this button all data in .content empty and append backupped code.
P.S You can optimize this code
I need help with a button for loading more data from the database. I've found examples, but too bad ones. Here is what I have so far:
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'ajax_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.tutorial_list').append(html);
}
});
});
});
You can follow below technique to load more data with just replacing morebox html.
blog.php
<div class="tutorial_list">
<!-- LOAD YOUR PHP BLOG DATA -->
<div class="loading"><img src="fb-load.gif"/></div>
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
</div>
<script>
$(document).on('click', '.show_more', function() {
{
var ID = $(this).attr("id");
if (ID) {
$('.morebox').hide();
$('.loding').show();
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastpost=" + ID,
cache: false,
success: function(html) {
$('.loading').hide();
$('.tutorial_list').append(html);
$("#show_more" + ID).remove(); // removing old more button
}
});
} else {
$(".morebox").html('The End'); // no results
}
return false;
});
</script>
ajax_more.php
<!-- LOAD YOUR PHP BLOG DATA WITH lastpost ID and remember to add below code for load more -->
<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
more
</div>
So, I have a following ajax setup:
PHP: menu.php
<!--Menu-->
<div class="rh_menu">
Front
Other
</div>
<!--Content Div-->
<div class="rhp_hide">
<div class="rrp_container is-active" id="rhp_front_rhp_id">
<div class="spinner is-active"></div>
</div>
<div class="rrp_container" style="display:none;" id="rhp_front_ca_other_id">
<div class="spinner"></div>
</div>
</div>
01_house_rhp_id.php <-- First button which is called by the Ajax
<div class="my_shortcode">
<?php echo do_shortcode('[some_shortcode]'); ?>
</div>
Function.php
// load the javascript
wp_enqueue_script( 'ajax-script', '/03.includes/js/rh_ajax.js', array('jquery') );
wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
//Ajax call for House front page
function my_tab_callback() {
$template_part_path = 'page-parts/01_house_' . $_GET['id'];
get_template_part($template_part_path);
exit;
}
add_action('wp_ajax_my_tab', 'my_tab_callback');
add_action('wp_ajax_nopriv_my_tab', 'my_tab_callback');
rh_ajax.js
//To hide other divs
jQuery('.rh_menu a').click(function() {
var rh_id = jQuery(this).attr('id');
jQuery('[id^="rhp_front_"]').hide();
jQuery('#rhp_front_' + rh_id).show();
});
//To initiate first click
jQuery(window).load(function() {
jQuery("#rhp_id" ).trigger( 'click' );
return false;
});
//Ajax call
jQuery(document).ready(function() {
jQuery('.rh_menu a').click(function(e) {
e.preventDefault();
var tab_house_id = jQuery(this).attr('id');
jQuery.ajax({
type: "GET",
url: ajax_object.ajax_url,
dataType: 'html',
data: ({ action: 'my_tab', id: tab_house_id}),
success: function(data){
jQuery('#rhp_front_' + tab_house_id).html(data);
console.log(data);
},
error: function(data)
{
alert("Nope");
console.log(data);
return false;
}
});
});
});
So, it looks like when a shortcode is parsed by ajax, it is not recognized and gave me 500 server error.
How can I modify above setting so that I can use the shortcode within ajax setting?
Thanks!
I am trying to load content from a PHP page when user clicks on a link:
The user can click the link to get the AJAX data in the file: message.php
I currently have this code in message.php
$('#pmid<?php echo $convoData['id']; ?>').click(function(){
$.ajax({
type:"GET", //this is the default
url: "/index.php?i=pm&p=rr",
data: {id:"<?php echo $convoData['id']; ?>"}
})
.done(function( stuff ) {
$( "#name" ).html( stuff );
$( "#post" ).html( otherstuff );
$( "")
});
});
And the HTML:
Chat with <span id="name"></span> //The $name should be added to here
<ul id="post"></ul> //The $post should be added to here
The page where the AJAX is getting the data from is named: get.php, it looks like this:
$id = $_GET['id'];
$get=mysql_query("SELECT * FROM private_messages WHERE id='$id'");
$getData=mysql_fetch_assoc($get);
//Set the variables that needs to be send back to the other page.
$getUser=$user->getUserData($getData['sender_id']);
$name=$getUser['username'];
$post = '
<li>
<img width="30" height="30" src="images/avatar-male.jpg">
<div class="bubble">
<a class="user-name" href="">'.$name.'</a>
<p class="message">
'.$getData['subject'].'
</p>
<p class="time">
</p>
</div>
</li>
';
echo $name;
echo $post;
So, the problem is that currently all the data is just being printed in #name
How can I do so the $name will get printed in #name and the $post in #post?
Return the output as a json encoded array with two keys and on the response show the values based on keys like this
In your php
$arrRet = array();
$arrRet['name'] = $name;
$arrRet['post'] = $post;
echo json_encode($arrRet);
die();
In the ajax
$.ajax({
type:"GET",
url: "/index.php?i=pm&p=rr",
dataType:'json',
data: {id:"<?php echo $convoData['id']; ?>"},
success : function(res){
if(res){
$( "#name").html(res.name);
$( "#post").html(res.post);
}
}
});
I'd use json to pass the two variables:
JS:
$('#pmid<?php echo $convoData['id']; ?>').click(function(){
$.ajax({
type:"GET", //this is the default
url: "/index.php?i=pm&p=rr",
data: {id:"<?php echo $convoData['id']; ?>",},
dataType: 'json'
})
.done(function( stuff ) {
$( "#name" ).html( stuff[0] );
$( "#post" ).html( stuff[1] );
$( "")
});
});
PHP:
echo json_encode(array($name,$post));
try returning it like this:
$output = array();
$output['name'] = $name;
$output['post'] = $post;
$output = json_encode($output);
echo json_encode($output); exit;
Then with the return in js try :
function(data){
$( "#name" ).html( data.name );
$( "#post" ).html( data.post );
}
I am trying to change the value of a span after using jQuery.ajax.
JavaScript
$(document).on('click', '.kssico', function(event) {
var for_uid = $(this).parents("li").attr('data'),
for_name = $(this).parents("li").attr('unme'),
dataString = "for_uid=" + for_uid + "&for_name=" + for_name;
$.ajax({
type: "POST",
url: "include/ajax.php",
data: dataString,
success: function (html) {
if(html=="300") {
$('#myModal .modal-body p').html("Error Please Try Again.");
$('#myModal').modal('show');
}
else {
$(this).parents("li span.mi-val").html(html);
$('#myModal .modal-body p').html("The Requested Action Has Been Notified To Your Friend.");
$('#myModal').modal('show');
}
}
});
});
HTML
<li class="mispan main-span" >
<div class="thumbnail">
<h3 class="miheader">Dewashree Singh</h3>
<a >
<div class="miprofile-pic-cnt" ></div>
</a>
<div class="caption">
<p>
<a href="#" class="btn kssico miclickks">
<img src="/lisps.png"><span class="mi-val">0</span>
</a>
<a href="#" class="btn bdico miclickbd">
<img src="/besd.png"><span class="mi-val">1</span>
</a>
</p>
</div>
</div>
</li>
When I click on a.miclickks it should complete the Ajax call and return a value too be placed inside the span on the button anchor. However, nothing is being changed!
jsFiddle
I don't know what your whole code looks like, but you should be able to modify this to do what you are trying to:
$('#id').on('click', function() {
var that = this;
$.ajax({
url: 'wherever.php',
success: function(html) {
$(that).find("li span.mi-val").html(html);
}
});
It looks like you have two problems. The first is that as #Barmar posted above, mi-val is a child of micclickks, not a parent. The second is that your ajax complete function is asynchronous, so $(this) isn't what you expect it will be. Both of these are solvable though.
Your code is a bit messy and your html is missing the proper attributes, but this is I think roughly what you want:
$('.kssico').on('click', function(event) {
var for_uid = $(this).parents("li").attr('data'); //the li element in your html doesn't have a data attribute
var for_name = $(this).parents("li").attr('unme'); //the li element in your html doesn't have a 'unme' attribute
var dataString = "for_uid=" + for_uid + "&for_name=" + for_name;
$.ajax({
type: "POST",
context: this,
url: "include/ajax.php",
data: dataString,
success: function (html) {
if(html=="300")
{
$('#myModal .modal-body p').html("Error Please Try Again.");
$('#myModal').modal('show');
}
else
{
$(this).parents("li span.mi-val").html(html);
$('#myModal .modal-body p').html("The Requested Action Has Been Notified To Your Friend.");
$('#myModal').modal('show');
}
}
});
});