<div>
Try to load() &nbsp;the php file via Jquery as this: 

<pre><code class="code-1 nolinks" id="code-20-42364647-1"> $('#element').on('change', function() {
 $(&quot;body&quot;).load('MainPage.php');
 });

 
</code></pre>
</div>

<div>
I get a blank page when i use: 

<pre><code class="code-1 nolinks" id="code-20-42364882-1">$(&quot;body&quot;).load('MainPage.php');
</code></pre>
because &nbsp;mainPage does not have a html structure but only: 

<pre><code class="code-1 nolinks" id="code-20-42364882-2">&lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt;
 &lt;p&gt;&lt;?php echo $users ?&gt;&lt;/p&gt; 
 &lt;/div&gt;
</code></pre>
 
And my mainPage.php works fine because on first load of page (headr.php), MainPage.php does operation (load of an image) &nbsp;which is directed from first option of &quot;select&quot; element. 
 
Here i think &nbsp;also my &nbsp;js code (ajax) works fine. &nbsp;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 &nbsp;beginning.
</div>

<div>
As default first option &nbsp;of &quot;select&quot; is &quot;1&quot; and the page loads first picture. 
Then when &nbsp;i &nbsp;select &quot;2&quot; 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.
</div>

<div>
<blockquote>
On change event of &quot;select&quot; element i want to use MainPage.php to reload an image.
</blockquote>
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?
</div>

<div>
in header.php i added 
<blockquote>
&lt;p&gt;&lt;?php echo $partnersHTML; ?&gt;
</blockquote>
so i might see my &nbsp;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. 

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

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


&lt;style type=&quot;text/css&quot;&gt;

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;*/
}


&lt;/style&gt;
 


 &lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt;
 
 &lt;/div&gt;
</code></pre>
</div>

<div>
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) 

<pre><code class="code-1 nolinks" id="code-20-42365440-1">&lt;div class=&quot;mynav row&quot;&gt;&lt;img id=&quot;target&quot; src=&quot;&quot; class=&quot;pull-right&quot;/&gt;&lt;/div&gt;
&lt;select id=&quot;people&quot; class=&quot;form-control&quot;&gt;
 &lt;option&gt;-- Select --&lt;/option&gt;
 &lt;option data-img=&quot;images/foreground1.png&quot;&gt;Micky&lt;/option&gt;
 &lt;option data-img=&quot;images/foreground2.png&quot;&gt;Daffy&lt;/option&gt;
 &lt;option data-img=&quot;images/foreground3.png&quot;&gt;Penguine&lt;/option&gt;
&lt;/select&gt;
</code></pre>
jQuery - next bind to the on change and set target image src to the value of the item in the dropdown 

<pre><code class="code-1 nolinks" id="code-20-42365440-2">&lt;script&gt;
$(function() {
 $('#people').change(function() {
 $('#target')[0].src = $(':selected', this).data('img');
 });
});
&lt;/script&gt;
</code></pre>
Working sample <a href="http://www.marcorpsa.com/ee/t2810.html" rel="ugc">here</a>
</div>

<div>
Next &nbsp;code &nbsp;(snippets 1.2 (entire code from customMainPage.php )) is echoing me &nbsp;code snippet marked &quot;3&quot; &nbsp;(which is text code of last part of code 2 ) &nbsp;into &nbsp;console. 
How must i modificate success: function(strdate) in ajax code (snippet 1) to get: 
 
 
&nbsp;&lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;&lt;?php echo $partnersHTML; ?&gt;&lt;/p&gt; 
&nbsp; &nbsp; &lt;/div&gt; 
 
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 

<pre><code class="code-10 nolinks" id="code-20-42374197-1"> $.ajax({
 method:&quot;POST&quot;,
 url: '/wp-content/themes/net4/usersOnMainPage.php',
 data: {
 &quot;querry2&quot;:1,
 &quot;whichProject&quot;:whichProjectToSave,
 },
 datatype: 'text',
 success: function(strdate){
 console.log(strdate);
 
 },
 error: function(error, txtStatus) {
 console.log(txtStatus);
 console.log('error');
 }
 });
</code></pre>
 
2 

<pre><code class="code-10 nolinks" id="code-20-42374197-2">&lt;?php
$partnersHTML = '';
$partners_view_all_link = '';
$projectName2 = $_SESSION[&quot;actualproject&quot;];
$sql = &quot;SELECT COUNT(id) FROM partners WHERE (user1='$log_username ' AND accepted='1' OR user2='$log_username ' AND accepted='1') AND projectName= '$projectName2' &quot;;
$query = mysqli_query($db_conx, $sql);
$query_count = mysqli_fetch_row($query);
$partners_count = $query_count[0];

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

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


&lt;style type=&quot;text/css&quot;&gt;
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;
}
&lt;/style&gt;

 &lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt;
 &lt;p&gt;&lt;?php echo $partnersHTML; ?&gt;&lt;/p&gt;
 &lt;/div&gt;
</code></pre>
 

<pre><code class="code-10 nolinks" id="code-20-42374197-3">3
&lt;style type=&quot;text/css&quot;&gt;
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;
}
&lt;/style&gt;

 &lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt;
 &lt;p&gt;&lt;?php echo $partnersHTML; ?&gt;&lt;/p&gt;
 &lt;/div&gt;
</code></pre>
</div>

<div>
Next line of code ( for &nbsp;Ajax) is not working : 
 

<pre><code class="code-1 nolinks" id="code-20-42374240-1">success: function(strdate){
 console.log(strdate);
 $('#usersWindowID &gt; p').innerHTML=strdate;
 }
</code></pre>
</div>

<div>
Thank you . 
 
Header.php on page load does &quot;display&quot; $partnersHTM 

<pre><code class="code-1 nolinks" id="code-20-42375838-1">&lt;body&gt;
 &lt;?php include_once(&quot;net4/pageTop.php&quot;);?&gt;
 &lt;?php include_once(&quot;net4/customMainPage.php&quot;);?&gt;
 &lt;?php include_once(&quot;net4/pageBottom.php&quot;);?&gt;
 &lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt;
 &lt;p&gt;&lt;?php echo $partnersHTML;?&gt;&lt;/p&gt;
 &lt;/div&gt;
</code></pre>
But when I am using ajax it fails , and I am not having errors. 
&nbsp; &nbsp; &nbsp; &nbsp; 

<pre><code class="code-1 nolinks" id="code-20-42375838-2">success: function(strdate){
 $('#usersWindowID &gt; p').html(strdate);
 },
</code></pre>
 
Next is customMainPage.php. 

<pre><code class="code-10 nolinks" id="code-20-42375838-3">while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
		$partners_username = $row[&quot;username&quot;];
		$partners_avatar = $row[&quot;avatar&quot;];
			if($partners_avatar != &quot;&quot;){
			 $partners_pic ='/wp-content/themes/net4/user/'.$partners_username.'/'.$partners_avatar.'';
		} else {
			$partners_pic = '/wp-content/themes/net4/images/avatardefault.jpg';
		}
		$partnersHTML .= '&lt;a href=&quot;/wp-content/themes/net4/user.php?u='.$partners_username.'&quot;&gt;&lt;img class=&quot;partnerspics2&quot; src=&quot;'.$partners_pic.'&quot; alt=&quot;'.$partners_username.'&quot; title=&quot;'.$partners_username.'&quot;&gt;&lt;/a&gt;';
 if(isset($_POST['querry2'])){
 echo $partnersHTML;
 }
	}
</code></pre>
 
As i was saying before on page load i get things working. &nbsp;Why then when I use ajax nothing happens?
</div>

<div>
<pre><code class="code-1 nolinks" id="code-20-42376364-1">$.ajax({
 method:&quot;POST&quot;,
 url: '/wp-content/themes/net4/usersOnMainPage.php',
</code></pre>
 

<blockquote>
Next is customMainPage.php.
</blockquote>
 
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.
</div>

<div>
I have &quot;usersOnMainPage.php&quot;, but something else must be wrong in next code. (and take another look to header.php in my previous post, pleas) 
 

<pre><code class="code-10 nolinks" id="code-20-42385031-1"> $.ajax({
 method:&quot;POST&quot;,
 url: '/wp-content/themes/net4/usersOnMainPage.php',
 data: {
 &quot;querry2&quot;:1, 
 },
 datatype: 'text',
 success: function(strdate){ 
 $('#usersWindowID &gt; p').html(strdate);
 },
 error: function(error, txtStatus) {
 console.log(txtStatus);
 console.log('error');
 }
 }); 
</code></pre>
</div>

<div>
With Yours help &nbsp;with ajax code and in general &nbsp;I figured out that &quot;usersOnMainPage.php&quot; had some variables empty.
</div>

<div>
I am glad you found a solution.
</div>

<div>
<div class="content wysiwyg-content">
On change event of &quot;select&quot; element i want to use MainPage.php to reload an image. 
I have next code, which is not &nbsp;working; 
js &nbsp;code 

<pre><code class="code-1 nolinks" id="code-10-29067952-1">function imageRefreshOnSelectChange(){ 
$.ajax({
 type: 'POST',
 url:'/wp-content/themes/net/MainPage.php'
});
}
</code></pre>
 &nbsp; 
 
header.php 

<pre><code class="code-1 nolinks" id="code-10-29067952-2">&lt;body&gt;
 &lt;?php include_once(&quot;net/pageTop.php&quot;);?&gt;
 &lt;?php include_once(&quot;net/MainPage.php&quot;);?&gt;
 &lt;?php include_once(&quot;net/pageBottom.php&quot;);?&gt;
&lt;/body&gt;
</code></pre>
 
 
MainPage.php 

<pre><code class="code-1 nolinks" id="code-10-29067952-3">&lt;?php
...............
............
 $users=..........;
?&gt;
&lt;div class=&quot;right&quot; id=&quot;usersWindowID&quot;&gt;
 &lt;p&gt;&lt;?php echo $users ?&gt;&lt;/p&gt; 
 &lt;/div&gt;
</code></pre>
 
 
Is it possible to tell from the code i have provided what am i doing wrong?
</div>
</div>

On change event of "select" element i want to use MainPage.php to reload an image.
I have next code, which is not  working;
js  code
(CODE)
   

header.php
(CODE) 

MainPage.php
(CODE)


Is it possible to tell from the code i have provided what am i doing wrong?

Refreshing  just part of page

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.

JavaScript

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.