Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

php breakes javascript

Posted on 2013-02-03
11
Medium Priority
?
260 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 3
11 Comments
 
LVL 111

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 111

Expert Comment

by:Ray Paseur
ID: 38848777
Thanks for your kind words -- glad it's helpful!
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 111

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

636 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