Solved

php breakes javascript

Posted on 2013-02-03
11
240 Views
Last Modified: 2013-02-09
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
0
Comment
Question by:Toube
  • 8
  • 3
11 Comments
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 38848698
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
 

Author Comment

by:Toube
ID: 38848745
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 38848777
Thanks for your kind words -- glad it's helpful!
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 

Author Comment

by:Toube
ID: 38852081
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
 

Author Comment

by:Toube
ID: 38852200
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
 

Author Comment

by:Toube
ID: 38852230
Ok well the above var filename outputs the whole page code.. I guess I'm way off as usually :)
0
 

Author Comment

by:Toube
ID: 38852612
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
 

Accepted Solution

by:
Toube earned 0 total points
ID: 38852658
It was as simple as this to get the imagevalue:
$("#delForm").submit(function(event) {
	filename = $("#fname").val(); 
});

Open in new window

0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 38854576
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
 

Author Comment

by:Toube
ID: 38854607
No problem got it working :)
0
 

Author Closing Comment

by:Toube
ID: 38870835
I might have asked the question the wrong way. I was using a form with post.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question