jQuery within php file only works on frontend but delays when activated through path

Hi there Ive got a site which is mainly php.
base structure is 5 php files,
index.php
design.php
about.php
charges.php
help.php…
eg. localhost/Website/help.php

within each page I link to 3 more pages
eg. <?php include 'jQuery/index.php';?>
each use a particular function, and are in its own named folder. Within which is its own css and js and image files etc…
[jQuery] index.php
eg localhost/Website/jQuery/index.php
[crud] index.php
eg localhost/Website/crud/index.php

each of the 5 main pages share the same header footer menu etc… which I placed in a folder called inculdes, and linked them
eg. <?php include 'includes/header.php';?>

My problem is when I access this index.php from the charges.php file… the jQuery function button switch is delayed.
If I put the jQuery folder in the top end ; localhost/jQuery
when I view the index.php page the jquery glitches on the first load and shows 2 buttons for a milli second, but on second the load the second button is hidden instantly.

but when I view this index file from within the changes.php file, the buttons jQuery action is always delayed.
Im assuming its a linking issue.
Maybe I should take the jQuery out and put it in its own folder at the top end?

there are 3 sections on each page, which I link another page to.
so from charges.php jQuery folder on a sublevel the two buttons which jQuery is meant to hide always one of, they are add and view to add or view an employee.

Appologies if I havnt explained well, its all a bit confusing to me :smiley:

with the following command in the charges.php file

        <div id="homeFirst">	
		<?php include 'jQuery/index.php';?> 
	</div><!-- end of homeFirst-->

the following is imbedded into the head of the index.php file which is within the JQuery folder, and access by the charges.php file


<script type="text/javascript">
$(document).ready(function(){
  
  $("#btn-view").hide();
  
  $("#btn-add").click(function(){
  	$(".content-loader").fadeOut('slow', function()
  	{
  		$(".content-loader").fadeIn('slow');
  		$(".content-loader").load('add_form.php');
  		$("#btn-add").hide();
  		$("#btn-view").show();
  	});
  });
  
  $("#btn-view").click(function(){
  	
  	$("body").fadeOut('slow', function()
  	{
  		$("body").load('index.php');
  		$("body").fadeIn('slow');
  		window.location.href="index.php";
  	});
  });
  
});
</script>

the jQuery application which is a table displaying a database with an add employee button, and view employee button, only one is meant to be visable at a time thanks to the jQuery comand but its getting a bit delayed
I tried error code display but it didnt display any errors

This maybe too much info but there is a crud.js folder the index.php links to from within the jQuery folder

// JavaScript Document

$(document).ready(function(){
	
	/* Data Insert Starts Here */
	$(document).on('submit', '#emp-SaveForm', function() {
	  
	   $.post("create.php", $(this).serialize())
        .done(function(data){
			$("#dis").fadeOut();
			$("#dis").fadeIn('slow', function(){
				 $("#dis").html('<div class="alert alert-info">'+data+'</div>');
			     $("#emp-SaveForm")[0].reset();
		     });	
		 });   
	     return false;
    });
	/* Data Insert Ends Here */
	
	
	/* Data Delete Starts Here */
	$(".delete-link").click(function()
	{
		var id = $(this).attr("id");
		var del_id = id;
		var parent = $(this).parent("td").parent("tr");
		if(confirm('Sure to Delete ID no = ' +del_id))
		{
			$.post('delete.php', {'del_id':del_id}, function(data)
			{
				parent.fadeOut('slow');
			});	
		}
		return false;
	});
	/* Data Delete Ends Here */
	
	/* Get Edit ID  */
	$(".edit-link").click(function()
	{
		var id = $(this).attr("id");
		var edit_id = id;
		if(confirm('Sure to Edit ID no = ' +edit_id))
		{
			$(".content-loader").fadeOut('slow', function()
			 {
				$(".content-loader").fadeIn('slow');
				$(".content-loader").load('edit_form.php?edit_id='+edit_id);
				$("#btn-add").hide();
				$("#btn-view").show();
			});
		}
		return false;
	});
	/* Get Edit ID  */
	
	/* Update Record  */
	$(document).on('submit', '#emp-UpdateForm', function() {
	 
	   $.post("update.php", $(this).serialize())
        .done(function(data){
			$("#dis").fadeOut();
			$("#dis").fadeIn('slow', function(){
			     $("#dis").html('<div class="alert alert-info">'+data+'</div>');
			     $("#emp-UpdateForm")[0].reset();
				 $("body").fadeOut('slow', function()
				 {
					$("body").fadeOut('slow');
					window.location.href="index.php";
				 });				 
		     });	
		});   
	    return false;
    });
	/* Update Record  */
});

The only apparent problem (it would actually take seeing and having all the code needed to reproduce the problem), is the above line(s.) You are going to the trouble of loading content via ajax, then that line of code is telling the browser to redirect to index.php, which will cause the whole page to reload and be rendered again with whatever visibility it is setup to produce. If your goal is to use ajax to get and display content on the page, there’s no reason for the window.location.href… line(s) of code.

1 Like

Thanks so much for your reply Mabismad, I think its not a good Idea for me to use the name index.php for more than one file in each website, I did it for testing purposes.
but I found a work around where I crushed the button between two lines and its strangley stopped it flickering at all.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.