Solved

php breakes javascript

Posted on 2013-02-03
11
238 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

813 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now