Refreshing just part of page

Try to load()  the php file via Jquery as this:

            $('#element').on('change', function() {
                $("body").load('MainPage.php');
            });

           

Select allOpen in new window

I get a blank page when i use:

$("body").load('MainPage.php');

Select allOpen in new window

because  mainPage does not have a html structure but only:

<div class="right" id="usersWindowID">
        <p><?php echo $users ?></p>              
    </div>

Select allOpen in new window

And my mainPage.php works fine because on first load of page (headr.php), MainPage.php does operation (load of an image)  which is directed from first option of "select" element.

Here i think  also my  js code (ajax) works fine.  If i use: location.reload(); (for testing from button click) i get the result that i want, but also all the page reloads , so I am then on the  beginning.

As default first option  of "select" is "1" and the page loads first picture.
Then when  i  select "2" nothing happens, until i not click on button for location.reload();.

But i would like just to get second picture and not all changes that i have maid on a page to be lost.

On change event of "select" element i want to use MainPage.php to reload an image.

Don't think of it like that. Mainpage.php generates the original page. What you want here is to link your select items to the relevant images and use JavaScript to switch the image.

Where is the code that has the image in it?

in header.php i added

<p><?php echo $partnersHTML; ?>

so i might see my  partners (users) in top left corner of page . But $.aljax code (from Leonidas Dosas) probably has to be changed to make it work with mainPage.php.
Next is mainPage.php wher i added on the bottom also Leonidas Dosas code.

<?php
$partnersHTML = '';
$partners_view_all_link = '';
$projectName2 = $_SESSION["actualproject"];
$sql = "SELECT COUNT(id) FROM partners WHERE  (user1='$log_username ' AND accepted='1' OR user2='$log_username ' AND accepted='1') AND projectName= '$projectName2' ";
$query = mysqli_query($db_conx, $sql);
$query_count = mysqli_fetch_row($query);
$partners_count = $query_count[0];
if($partners_count < 1){
	$partnerssHTML = $log_username ." has no partners yet";
} else {
	$max = 18;
	$all_partners = array();
	$sql = "SELECT user1 FROM partners WHERE (user2='$log_username ' AND accepted='1')  AND projectName= '$projectName2'  ORDER BY RAND() LIMIT $max";
	$query = mysqli_query($db_conx, $sql);
	while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		array_push($all_partners, $row["user1"]);
	}
	$sql = "SELECT user2 FROM partners WHERE (user1='$log_username ' AND accepted='1') AND projectName= '$projectName2'  ORDER BY RAND() LIMIT $max";
	$query = mysqli_query($db_conx, $sql);
	while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		array_push($all_partners, $row["user2"]);
	}
	$partnersArrayCount = count($all_partners);
	if($partnersArrayCount > $max){
		array_splice($all_partners, $max);
	}
	if($partners_count > $max){
		$partners_view_all_link = '<a href="view_partners.php?u='.$u.'">view all</a>';
	}
	$orLogic = '';
	foreach($all_partners as $key => $user){
			$orLogic .= "username='$user' OR ";
	}
	$orLogic = chop($orLogic, "OR ");
	$sql = "SELECT username, avatar FROM users WHERE $orLogic";
	$query = mysqli_query($db_conx, $sql);
	while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		$partners_username = $row["username"];
		$partners_avatar = $row["avatar"];
			if($partners_avatar != ""){
			  
			  $partners_pic ='/wp-content/themes/net/user/'.$partners_username.'/'.$partners_avatar.'';
	

		} else {
			$partners_pic = '/wp-content/themes/net/images/avatardefault.jpg';
		}
		$partnersHTML .= '<a href="/wp-content/themes/net/user.php?u='.$partners_username.'"><img class="partnerspics2" src="'.$partners_pic.'" alt="'.$partners_username.'" title="'.$partners_username.'"></a>';
	    if(isset($_POST['query2'])){
        $arr=array();
	    array_push($arr,$partnersHTML);
        echo json_encode($arr);
        }
    /* <p><?php echo $partnersHTML; ?></p>*/
	}
}
?>


<style type="text/css">

img.partnerspics2{border:#000 1px solid; width:40px; height:40px; margin:2px;}

.right {
    position: absolute;
    top: 100px;
    left:1280px;
    width: 90px;
    height: 640px;
       padding: 5px;
  /*  margin: 0;
 
    border: solid 1px #dfdfdf;*/
}


</style>
 


  <div class="right" id="usersWindowID">
       
    </div>

Select allOpen in new window

Just to repeat myself - put all your pictures into the page and change them with JavaScript without revisiting the page. This can be done in any number of ways

Here is an example of one way of doing it
HTML (first build the select with the associated images as data items)

<div class="mynav row"><img id="target" src="" class="pull-right"/></div>
<select id="people" class="form-control">
  <option>-- Select --</option>
  <option data-img="images/foreground1.png">Micky</option>
  <option data-img="images/foreground2.png">Daffy</option>
  <option data-img="images/foreground3.png">Penguine</option>
</select>

Select allOpen in new window

jQuery - next bind to the on change and set target image src to the value of the item in the dropdown

<script>
$(function() {
  $('#people').change(function() {
    $('#target')[0].src = $(':selected', this).data('img');
  });
});
</script>

Select allOpen in new window

Working sample here

Next  code  (snippets 1.2 (entire code from customMainPage.php )) is echoing me  code snippet marked "3"  (which is text code of last part of code 2 )  into  console.
How must i modificate success: function(strdate) in ajax code (snippet 1) to get:


 <div class="right" id="usersWindowID">
        <p><?php echo $partnersHTML; ?></p>
    </div>

Julian i can not do it as you are suggesting, because i need to echo avatars of users which are login on my page.

1

     $.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/usersOnMainPage.php',
  data:  {
      "querry2":1,
       "whichProject":whichProjectToSave,
   },
   datatype: 'text',
    success: function(strdate){
    console.log(strdate);
    
     },
     error: function(error, txtStatus) {
      console.log(txtStatus);
      console.log('error');
    }
  });

Select allOpen in new window

2

<?php
$partnersHTML = '';
$partners_view_all_link = '';
$projectName2 = $_SESSION["actualproject"];
$sql = "SELECT COUNT(id) FROM partners WHERE  (user1='$log_username ' AND accepted='1' OR user2='$log_username ' AND accepted='1') AND projectName= '$projectName2' ";
$query = mysqli_query($db_conx, $sql);
$query_count = mysqli_fetch_row($query);
$partners_count = $query_count[0];

	    
if($partners_count < 1){
	$partnerssHTML = $log_username ." has no partners yet";
} else {
	$max = 18;
	$all_partners = array();
	$sql = "SELECT user1 FROM partners WHERE (user2='$log_username ' AND accepted='1')  AND projectName= '$projectName2'  ORDER BY RAND() LIMIT $max";
	$query = mysqli_query($db_conx, $sql);
	while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		array_push($all_partners, $row["user1"]);
		
	}
	$sql = "SELECT user2 FROM partners WHERE (user1='$log_username ' AND accepted='1') AND projectName= '$projectName2'  ORDER BY RAND() LIMIT $max";
	$query = mysqli_query($db_conx, $sql);
	while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		array_push($all_partners, $row["user2"]);
	}
	$partnersArrayCount = count($all_partners);
	if($partnersArrayCount > $max){
		array_splice($all_partners, $max);
	}
	if($partners_count > $max){
		$partners_view_all_link = '<a href="view_partners.php?u='.$u.'">view all</a>';
	}
	$orLogic = '';
	foreach($all_partners as $key => $user){
			$orLogic .= "username='$user' OR ";
	}
	
	$orLogic = chop($orLogic, "OR ");
	$sql = "SELECT username, avatar FROM users WHERE $orLogic";
	$query = mysqli_query($db_conx, $sql);
	while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		$partners_username = $row["username"];
	
		$partners_avatar = $row["avatar"];
			if($partners_avatar != ""){
			  
			  $partners_pic ='/wp-content/themes/netobjectnote4/user/'.$partners_username.'/'.$partners_avatar.'';
	

		} else {
			$partners_pic = '/wp-content/themes/netobjectnote4/images/avatardefault.jpg';
		
		    
		}
		$partnersHTML .= '<a href="/wp-content/themes/netobjectnote4/netTestF4/user.php?u='.$partners_username.'"><img class="partnerspics2" src="'.$partners_pic.'" alt="'.$partners_username.'" title="'.$partners_username.'"></a>';
      	
	}
}
 if(isset($_POST['querry2'])){
echo $partnersHTML;
}
?>


<style type="text/css">
img.partnerspics2{border:#000 1px solid; width:40px; height:40px; margin:2px;}
.right {
    position: absolute;
    top: 100px;
    left:1280px;
    width: 90px;
    height: 640px;
       padding: 5px;
}
</style>

  <div class="right" id="usersWindowID">
        <p><?php echo $partnersHTML; ?></p>
    </div>

Select allOpen in new window

3
<style type="text/css">
img.partnerspics2{border:#000 1px solid; width:40px; height:40px; margin:2px;}
.right {
    position: absolute;
    top: 100px;
    left:1280px;
    width: 90px;
    height: 640px;
       padding: 5px;
}
</style>

  <div class="right" id="usersWindowID">
        <p><?php echo $partnersHTML; ?></p>
    </div>

Select allOpen in new window

Next line of code ( for  Ajax) is not working :

success: function(strdate){
    console.log(strdate);
    $('#usersWindowID > p').innerHTML=strdate;
     }

Select allOpen in new window

Thank you .

Header.php on page load does "display" $partnersHTM

<body>
    <?php include_once("net4/pageTop.php");?>
    <?php include_once("net4/customMainPage.php");?>
    <?php include_once("net4/pageBottom.php");?>
   <div class="right" id="usersWindowID">
     <p><?php echo $partnersHTML;?></p>
    </div>

Select allOpen in new window

But when I am using ajax it fails , and I am not having errors.
       

success: function(strdate){
  $('#usersWindowID > p').html(strdate);
     },

Select allOpen in new window

Next is customMainPage.php.

while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		$partners_username = $row["username"];
		$partners_avatar = $row["avatar"];
			if($partners_avatar != ""){
			  $partners_pic ='/wp-content/themes/net4/user/'.$partners_username.'/'.$partners_avatar.'';
		} else {
			$partners_pic = '/wp-content/themes/net4/images/avatardefault.jpg';
		}
		$partnersHTML .= '<a href="/wp-content/themes/net4/user.php?u='.$partners_username.'"><img class="partnerspics2" src="'.$partners_pic.'" alt="'.$partners_username.'" title="'.$partners_username.'"></a>';
        if(isset($_POST['querry2'])){
        echo $partnersHTML;
        }
	}

Select allOpen in new window

As i was saying before on page load i get things working.  Why then when I use ajax nothing happens?

$.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/usersOnMainPage.php',

Select allOpen in new window

Next is customMainPage.php.

Your ajax is calling usersOnMainPage - but your code is for customMainPage.php?


Have you tried testing the AJAX URL in the browser - paste into a new window and see what you get.

I have "usersOnMainPage.php", but something else must be wrong in next code. (and take another look to header.php in my previous post, pleas)

 $.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/usersOnMainPage.php',
  data:  {
      "querry2":1,  
   },
   datatype: 'text',
    success: function(strdate){  
     $('#usersWindowID > p').html(strdate);
     },
     error: function(error, txtStatus) {
      console.log(txtStatus);
      console.log('error');
    }
  });  

Select allOpen in new window

With Yours help  with ajax code and in general  I figured out that "usersOnMainPage.php" had some variables empty.

I am glad you found a solution.