• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 98
  • Last Modified:

Refreshing just part of page

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
function imageRefreshOnSelectChange(){        
$.ajax({
  type: 'POST',
  url:'/wp-content/themes/net/MainPage.php'
});
}

Open in new window

 

header.php
<body>
    <?php include_once("net/pageTop.php");?>
    <?php include_once("net/MainPage.php");?>
    <?php include_once("net/pageBottom.php");?>
</body>

Open in new window



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

Open in new window



Is it possible to tell from the code i have provided what am i doing wrong?
0
Ivan Golubar
Asked:
Ivan Golubar
  • 8
  • 6
  • 2
3 Solutions
 
Leonidas DosasCommented:
Try to load()  the php file via Jquery as this:
            $('#element').on('change', function() {
                $("body").load('MainPage.php');
            });

           

Open in new window

0
 
Ivan GolubarAuthor Commented:
I get a blank page when i use:
$("body").load('MainPage.php');

Open in new window

because  mainPage does not have a html structure but only:
<div class="right" id="usersWindowID">
        <p><?php echo $users ?></p>              
    </div>

Open 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.
0
 
Ivan GolubarAuthor Commented:
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.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Leonidas DosasCommented:
Another solution is via ajax to load the image ike this:
JQuery ajax call:
function imageRefreshOnSelectChange(){       

  $.ajax({
         url: '/wp-content/themes/net/MainPage.php',
         data: {query:'trigger'},
         method:'POST',
         dataType: 'json'
       }).done(function (res){             
          console.log('success');
          $('#usersWindowID > p').innerHTML=res;
          });
}

Open in new window


Then create an another code in MainPage.php  to execute the php code like that:
php code:
if(isset($_POST['query'])){
$arr=array();
...............
............
 $users=..........;
array_push($arr,$users);
echo json_encode($arr);
}

Open in new window

0
 
Julian HansenCommented:
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?
0
 
Ivan GolubarAuthor Commented:
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>

Open in new window

0
 
Julian HansenCommented:
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>

Open 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>

Open in new window

Working sample here
0
 
Ivan GolubarAuthor Commented:
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');
    }
  });

Open 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>

Open 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>

Open in new window

0
 
Ivan GolubarAuthor Commented:
Next line of code ( for  Ajax) is not working :

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

Open in new window

0
 
Julian HansenCommented:
You are mixing jQuery and standard JavaScript
Either
$('#usersWindowID > p').html(strdate);

Open in new window

Or
$('#usersWindowID > p')[0].innerHTML=strdate;

Open in new window

A jQuery selector returns an Array - to access the actual JavaScript element you need to index it.
0
 
Ivan GolubarAuthor Commented:
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>

Open in new window

But when I am using ajax it fails , and I am not having errors.
       
success: function(strdate){
  $('#usersWindowID > p').html(strdate);
     },

Open 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;
        }
	}

Open in new window


As i was saying before on page load i get things working.  Why then when I use ajax nothing happens?
0
 
Julian HansenCommented:
$.ajax({
  method:"POST",
  url: '/wp-content/themes/net4/usersOnMainPage.php',

Open 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.
0
 
Ivan GolubarAuthor Commented:
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');
    }
  });  

Open in new window

0
 
Julian HansenCommented:
Have you tried testing the AJAX URL in the browser - paste into a new window and see what you get.
0
 
Ivan GolubarAuthor Commented:
With Yours help  with ajax code and in general  I figured out that "usersOnMainPage.php" had some variables empty.
0
 
Julian HansenCommented:
I am glad you found a solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now