php breakes javascript

Hi,

I'm using this script combined with Highslide to delete a picture:

$(document).ready(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Delete picture?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
           //console.log(data); // debugging: see if the timeout is triggered in console
	var ImageName= "<?php echo $imageName;?>";
               parent.refreshWindow(ImageName);  // this function must be declared two levels above this window
           }, 110);
           }
           });
        
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


Now i want to have this variable working var ImageName= "<?php echo $imageName;?>";
Problem here is that if I set up php before this script like this:

<?php

require_once("/home/tobiasfr/include/db_connect.php");
$user1 = $_SESSION['users_id'];
$image_id1 = $_GET['id'];
$userpictureSql1 = "select * FROM userphotos WHERE user_='$user1' and id = '$image_id1' order by id";
$resultsqlquery1 = mysql_query($userpictureSql1)or die(mysql_error());
$imageName = mysql_result($resultsqlquery1, 0, filename);

?>

Open in new window


The javascript or page goes empty and nothing is displayed.
Any idea why the php before brakes the javascript?

Regards,

Toby
ToubeAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ToubeConnect With a Mentor Author Commented:
It was as simple as this to get the imagevalue:
$("#delForm").submit(function(event) {
	filename = $("#fname").val(); 
});

Open in new window

0
 
Ray PaseurCommented:
I think it is largely a matter of the sequence of functionality.

1. The PHP runs on the server, generating the HTML document that contains the JavaScript.  Or the server sends the JavaScript, whether or not PHP has run to generate the document for the browser.  As the server is sending the JavaScript, it runs the embedded PHP which creates the value of the $imageName variable.  This is completed and the document is sent to the browser.

2. The server disconnects and waits for a request.

3. The client does something to cause a jQuery request.  But at this point, the embedded PHP has already been run, and whatever is present in the original $imageName has been embedded in the original JavaScript document.

A couple of suggestions on how to debug this... First, add error_reporting(E_ALL) to the top of all of your PHP scripts so you can be sure your script is not accidentally relying on an undefined variable.  Next use your browser's view source capability to see the generated HTML and JavaScript.  And use the JavaScript alert() function to display any variables that your script changes during execution.

You may find that you want to use an AJAX request to send some information from the jQuery to a PHP script in the background on the server.  This article teaches the "hello world" exercise about that process.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html
0
 
ToubeAuthor Commented:
Hi,

thanks will look into this..
Btw I'm using your image upload / thumbnail generator php script and it's is magnificent :)

Regards,

Toby
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 
Ray PaseurCommented:
Thanks for your kind words -- glad it's helpful!
0
 
ToubeAuthor Commented:
Hi Ray,

been coding php for a several years and never actually stop to think about that php being a server side language.. read your article and now I'm up to speed, thanks for that.

Ok tried it out and here's how I'm trying it:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#delete-button").click(function(){
	indata = $("#xinput").val(); // <input type="hidden" id="xinput" name="filename" value="'.$filename_.'" />
	        $.post("editphotos.php", {myArg:indata}, function(response){ // this is the file editphotos.php itself using $POST['PHP_SELF']
            var ImageName = $.html(response); // how do I save the response into a variable named ImageName and send it below using a function?
        });
    });
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Poista kuva?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
               parent.refreshWindow(ImageName);  // use the ImageName variable
           }, 110);
           }
           });
        
        },
        Peruuta: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window


How do I save the php response in to javascript variable called ImageName? And send further in same script using a function.

Regards,

Toby
0
 
ToubeAuthor Commented:
Ok I think this could work.. might need some adjusting thouhg am I way off or?

<script language="javascript" type="text/javascript">
var filename = null;
$(document).ready(function() {
    $('#delete-button').click(function() {
        $.ajax({
            type : 'POST',
            url : 'editphotos.php',           
            data: {
                filename : $('#fname').val() //<input type="hidden" id="fname" name="filename" value="'.$filename_.'" />
            },
            success:function (data) {
                filename = data; // Send this down below to parent.refreshWindow(filename);?
            }          
        });     
    });
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Poista kuva?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){    
               parent.refreshWindow(filename); // sen the filename variable to function
           }, 110);
           }
           });
        
        },
        Peruuta: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    
</script>

Open in new window

0
 
ToubeAuthor Commented:
Ok well the above var filename outputs the whole page code.. I guess I'm way off as usually :)
0
 
ToubeAuthor Commented:
Well trying it this way but still no go any one?

var filename;
$(document).ready(function() {
$("#delForm").submit(function(event) {
	/* stop form from submitting normally */
	event.preventDefault();
	/* get some values from elements on the page: */
	var $form = $( this ),
	filename_ = $form.find( 'input[name="filename"]' ).val(),
	url = $form.attr( 'action' );
	/* Send the data using post */
	var posting = $.post( url, { s: filename_} );
/* Put the results in variable filename*/
	posting.done(function( data ) {
	filename = $( data );
});
});
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:140,
      modal: true,
        autoOpen: false,
      buttons: {
        "Poista kuva?": function() {
          var data = $("form").serialize();
          $.ajax({
           url: window.location.href,
           data: data,
          success: function(data) {
          setTimeout(function(){
           //console.log(data); // debugging: see if the timeout is triggered in console
               $("form").submit();
               parent.refreshWindow(filename);  // this function must be declared two levels above this window
               parent.window.hs.close(); // this closes the modal window   
           }, 110);
           }
           });
        
        },
        Peruuta: function() {
          $( this ).dialog( "close" );
        }
      }
    });

 $( "#delete-button" ).click(function() {
 $( "#dialog-confirm" ).dialog( "open" );
})
})    

Open in new window

0
 
Ray PaseurCommented:
Sorry this answer wasn't helpful.  I am in the classroom teaching full time for a few weeks and do not have as much time to look at EE, so my ability to answer may be a day or two behind any posts.
0
 
ToubeAuthor Commented:
No problem got it working :)
0
 
ToubeAuthor Commented:
I might have asked the question the wrong way. I was using a form with post.
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.

All Courses

From novice to tech pro — start learning today.