Beefy Boxes and Bandwidth Generously Provided by pair Networks
The stupid question is the question not asked
 
PerlMonks  

json no reload

by bigup401 (Pilgrim)
on May 26, 2020 at 12:31 UTC ( #11117276=perlquestion: print w/replies, xml ) Need Help??

bigup401 has asked for the wisdom of the Perl Monks concerning the following question:

here is my perl script, am trying to make my page not to reload the whole page like the whole content on page, but only some part, some div in html. like when i delete user spinner displays after user deletion div reload and spinner also disappear after operation and i have used json. but i need help, some corrections. i know this is not json help sites or community. but anyone have idea can help me. i have got a free mysql hosting account for testing in the script, to be easier for the person to understand and easy correcting and help. thanks

main.pl #!/usr/bin/perl -w use CGI; use DBI; use Template; my $cgi = CGI->new(); my $html = Template->new; my $host = "sql2.freemysqlhosting.net"; my $usr = "sql2343290"; my $pwd = "qV5*gE2%"; my $dbname = "sql2343290"; my $dbh = DBI->connect("DBI:mysql:$dbname:$host", $usr, $pwd, { AutoCommit => 0, RaiseError => 1, }) or die $DBI::errstr; my $select_names = $dbh->prepare("select id, name from names"); $select_names->execute(); my $names = $select_names->fetchall_arrayref(); $dbh->disconnect; print "Content-type: text/html\n\n"; my $temp_html = <<START_HTML; <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery +.min.js"></script> <style> #cover-spin { position:fixed; width:100%; left:0;right:0;top:0;bottom:0; background-color: rgba(255,255,255,0.7); z-index:9999; display:none; } @-webkit-keyframes spin { from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);} } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } #cover-spin::after { content:''; display:block; position:absolute; left:48%;top:40%; width:40px;height:40px; border-style:solid; border-color:black; border-top-color:transparent; border-width: 4px; border-radius:50%; -webkit-animation: spin .8s linear infinite; animation: spin .8s linear infinite; } </style> <script> \$(document).ready(function () { \$("#Submit").click(function(event) { Execute(); \$('#cover-spin').show(); }); function Execute(){ \$.ajax({ type: 'POST', url: 'delete.pl', data: { 'dbid': \$("input[name='dbid']").val() }, success: function(res) { \$('#cover-spin').hide(); \$('#result').text(res.msg); }, error: function() { alert("failed"); } }); }; }); </script> </head> <body> <p>content </p> <p>====================================================== <br /> |<br /> |content<br /> |<br /> -------------------------------------------------------<br /> <br /> after submit relond only content in this div (box) <br /> </p> <div> <! –– relond only this part of div ––> <div id="cover-spin"></div> <p>&nbsp;</p> [% FOREACH name IN list %] <p>Name: [% name.1 %] </p> <input type="hidden" name="dbid" value="[% name.0%]"> <button type="submit" id="Submit" name="delete" value="delete">Del +ete user</button> <p id="result"></p> [% END %] </div> <! –– div ends here ––> <p><br /> ---------------------------------------------------------<br /> |<br /> | content <br /> |<br /> ====================================================== </p> <p>content</p> </body> </html> START_HTML $html->process (\$temp_html, { list => $names}) or die $html->error;
delete.pl #!/usr/bin/perl -w use CGI; use DBI; use JSON; use CGI qw(:standard); my $cgi = CGI->new(); my $host = "sql2.freemysqlhosting.net"; my $usr = "sql12345678"; my $pwd = "**********"; my $dbname = "sql12345678"; my $dbh = DBI->connect("DBI:mysql:$dbname:$host", $usr, $pwd, { AutoCommit => 0, RaiseError => 1, }) or die $DBI::errstr; $db_id = $cgi->param("dbid"); if (param('delete') eq 'delete') { my $delete = $dbh->prepare("delete from names where id =?"); $delete->execute($db_id); $delete->finish(); $success = "user deleted"; my $json = encode_json( { msg => $success } ); print $cgi->header( -type => 'application/json' ),$json; } $dbh->commit; $dbh->disconnect;

Replies are listed 'Best First'.
Re: json no reload
by marto (Archbishop) on May 26, 2020 at 12:56 UTC
Re: json no reload
by hippo (Chancellor) on May 26, 2020 at 13:39 UTC
      Looks familiar

      No surprise.

      Alexander

      --
      Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so". ;-)
Re: json no reload
by perlfan (Priest) on May 26, 2020 at 12:37 UTC
    my $host = "sql2.freemysqlhosting.net"; my $usr = "sql2343290"; my $pwd = "qV5*gE2%"; my $dbname = "sql2343290";
    May want to get a new free account and try here again.
    A reply falls below the community's threshold of quality. You may see it by logging in.
Re: json no reload
by tobyink (Canon) on May 26, 2020 at 17:31 UTC

    This is really a jQuery/Javascript question, not Perl. But you want this at the end of your click handler:

    event.preventDefault();

    Or just remove the type="submit".

    A reply falls below the community's threshold of quality. You may see it by logging in.
Re: json no reload
by Anonymous Monk on May 26, 2020 at 12:56 UTC
    Why use interpolating heredocs ?
    A reply falls below the community's threshold of quality. You may see it by logging in.

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: perlquestion [id://11117276]
Approved by Marshall
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others about the Monastery: (3)
As of 2020-08-09 20:39 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?
    Which rocket would you take to Mars?










    Results (55 votes). Check out past polls.

    Notices?