how to update dynamic form content to server

Hi experts,

I need to update  dynamic form content to server. Below is my code:

page1.php
<form class="hidden" id="updfile_form" method="post" action="save.php">
<input type="text" value="" id="wrapcount" name="wrapcount"/>
<input type="submit" value="submit"/>
</form>

Open in new window


$("#libary-save-ico").click(function (e) {
$(".savebtn").hide();
document.body.contentEditable='false';
document.designMode='off';
void 0;
$('#libary-save-ico').myfunction();
});


(function( $ ){
$.fn.myfunction = function() {

$(".flowing-wrapper").each(function() {
var i = 1;
var j = $(".flowing-wrapper").size();
var curhtmlpath = $(this).children("iframe").attr("src");
var curhtmlbody = $(this).children("iframe").contents().find("body").html();
alert(curhtmlpath);
while (i <= j) {
$('<input>').attr({type: 'text',id: 'curhtmlpath'+i,name: 'curhtmlpath'+i,value: curhtmlpath}).appendTo('#updfile_form');
$('<input>').attr({type: 'text',id: 'curhtmlbody'+i,name: 'curhtmlbody'+i,value: curhtmlbody}).appendTo('#updfile_form');
i++;
}

$("#wrapcount").val(j);

});

$("#updfile_form").submit();

}; 
})( jQuery );

Open in new window


save.php
<?php
ini_set('display_errors', TRUE);
error_reporting(E_ALL);

$i = 1;
$wrapcount = $_POST['wrapcount'];

//$wrapcount = 1;

while ($i <= $wrapcount) {

$content = $_POST['curhtmlbody'.$i]; 
$element_id = $_POST['curhtmlpath'.$i];

//$content = 'John Lourdu samy'; 
//$element_id = 'epub_content/siddhartha3/OPS/s007-Part-001.xhtml';



if (get_magic_quotes_gpc()) {
function stripslashes_gpc(&$value) {
$value = stripslashes($value);
}
array_walk_recursive($_GET, 'stripslashes_gpc');
array_walk_recursive($_POST, 'stripslashes_gpc');
array_walk_recursive($_COOKIE, 'stripslashes_gpc');
array_walk_recursive($_REQUEST, 'stripslashes_gpc');
}

$newcont='<body>'.$content.'</body>';

//get the file contents
$file = file_get_contents($element_id);
//use regex to replace what's in between the body tags
$file = preg_replace("/\<body\>(.*)\<\/body\>/Uis",$newcont, $file); 

//open the file in write mode
$myFile = $element_id;
$fh = fopen($myFile, 'w') or die("can't open file");
//write the new contents to the file
fwrite($fh, $file);
fclose($fh); 
$i++;
}
header("location:page1.php");
exit();
?>

Open in new window


In the above code, I have tried manual values in save.php, it works fine. But I have send dynamic values from page1.php It not worked. Please advice how to solve this. Also I have attached page1.php and save.php for your reference.

Regards,
John.A
pages.zip
JohnLourduAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Can't figure out what you are doing here - your partial javascript post refers to elements not in your page1.php. You seem to be adding inputs to an iframe (Which your save.php is expecting) but you are doing a post from page1.

Please explain what is supposed to be happening here and post full code.
0
JohnLourduAuthor Commented:
Hi julianH,

page1.php loading the html file from remote server using ajax and append the result in "epub-reader-container" div element.
On click the 'library-edit-btn' button, I have enable HTML5 contenteditable option to edit that html file.
On click the 'library-save-btn' button, I have created dynamic form elements with values and submit the form using jquery.
page1.php
<?php
session_start();
if ( !isset($_SESSION['login']) || $_SESSION['login'] !== true) {
header("location:index.php");
exit;
}
?>


<!DOCTYPE html>
<html>
    <head>
        <!-- EPUB module dependencies -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js" type="text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js" type="text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js" type="text/javascript"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" type="text/javascript"></script>
        <script src="modules_and_dependencies/URI.js" type="text/javascript"></script>
        <script src="modules_and_dependencies/bootstrap.min.js" type="text/javascript"></script>

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

	<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />


        <!-- Readium Web Components SimpleRWC.js -->
        <script src="modules_and_dependencies/SimpleReadium.min.js" type="text/javascript"></script>
<style type="text/css">
.savebtn {
display: none;
}

.hidden {
display: none;
}
</style>


        <!-- Example of initialization -->
        <script type="text/javascript">

            RWCDemoApp = {};

            // This function will retrieve a package document and load an EPUB
            RWCDemoApp.loadAndRenderEpub = function (packageDocumentURL, startSpineItem) {

                $(".show-on-load").show();
                $("#epub-reader-container").html("");

                var that = this;

                // Clear the viewer, if it has been defined -> to load a new epub
                RWCDemoApp.epubViewer = undefined;

                // Get the package document and load the modules
                $.ajax({
                    url : packageDocumentURL,
                    success : function (result) {

                        // Get the HTML element to bind the module reader to
                        var elementToBindReaderTo = $("#epub-reader-container");

                        // Create an object of viewer preferences
                        var viewerPreferences = {
                            fontSize : 12,
                            syntheticLayout : true,
                            currentMargin : 3,
                            tocVisible : false,
                            currentTheme : "default"
                        };
                        var currLayoutIsSynthetic = viewerPreferences.syntheticLayout;

                        if (result.nodeType) {
                            result = RWCDemoApp.parseXMLFromDOM(result);
                        }

                        // THE MOST IMPORTANT PART - INITIALIZING THE SIMPLE READIUM JS MODULE
                        RWCDemoApp.epubViewer = new SimpleReadiumJs(
                            elementToBindReaderTo, viewerPreferences, packageDocumentURL, result, "lazy"
                        );

                        // Set a fixed height for the epub viewer container, as a function of the document height
                        RWCDemoApp.setModuleContainerHeight();

                        // These are application specific handlers that wire the HTML to the SimpleReadiumJs module API

                        // Set callbacks for events triggered by SimpleReadium.js
                        RWCDemoApp.epubViewer.on("atNextPage", function () {
                            console.log("EVENT: atNextPage");
                        });
                        RWCDemoApp.epubViewer.on("atPreviousPage", function () {
                            console.log("EVENT: atPreviousPage");
                        });
                        RWCDemoApp.epubViewer.on("atFirstPage", function () {
                            console.log("EVENT: atFirstPage");
                        });
                        RWCDemoApp.epubViewer.on("atLastPage", function () {
                            console.log("EVENT: atLastPage");
                        });
                        RWCDemoApp.epubViewer.on("displayedContentChanged", function () {
                            console.log("EVENT: displayedContentChanged");
                        });

                        // Set handlers for click events
                        $("#previous-page-btn").unbind("click");
                        $("#previous-page-btn").on("click", function () {
                            RWCDemoApp.epubViewer.previousPage(function () {});
                        });

                        $("#next-page-btn").unbind("click");
                        $("#next-page-btn").on("click", function () {
                            RWCDemoApp.epubViewer.nextPage(function () {});
                        });

                        $("#toggle-synthetic-btn").unbind("click");
                        $("#toggle-synthetic-btn").on("click", function () {

                            if (currLayoutIsSynthetic) {
                                RWCDemoApp.epubViewer.setSyntheticLayout(false);
                                currLayoutIsSynthetic = false;
                                $("#single-page-ico").show();
                                $("#synthetic-page-ico").hide();
                            }
                            else {
                                RWCDemoApp.epubViewer.setSyntheticLayout(true);
                                currLayoutIsSynthetic = true;
                                $("#single-page-ico").hide();
                                $("#synthetic-page-ico").show();
                            }
                        });

                        // Render the reader
                        RWCDemoApp.epubViewer.on("epubLoaded", function () { 

                            if (startSpineItem === undefined) {
                                startSpineItem = 0;
                            }
                            // Show the first content document in the spine
                            RWCDemoApp.epubViewer.showSpineItem(startSpineItem, function () {
                                console.log("showed first spine item"); 
                            });
                            $(window).on("resize", function () {
                                RWCDemoApp.setModuleContainerHeight();
                                RWCDemoApp.epubViewer.resizeContent();
                            });

                            // APPLY A CUSTOM STYLE TO THE VIEWER
                            RWCDemoApp.epubViewer.customize("spine-divider", "box-shadow");
                        }, that);

                        RWCDemoApp.epubViewer.render(0);
                    }
                });
            };


            // When the document is ready, choose an EPUB to show.
            $(document).ready(function () {

            //alert(localStorage.curebpath);

                var that = this;
                var packageDocumentURL;

                $('#wdgt_beforeafter').fancybox({
                'width'        : '50%',
                'height'       : '100%',
                'autoScale'    : false, 
                'type'         : 'iframe',
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
                });

                // Load Moby Dick by default
                //RWCDemoApp.loadAndRenderEpub("epub_content/moby_dick/OPS/package.opf", 6);

                // Generate the library
                $.getJSON('epub_content/epub_library.json', function (data) {


                    $(".show-on-load").hide();

                    // Generate the library list in a drop-down
                    RWCDemoApp.addLibraryList($("#library-list"), data);


                    if (localStorage.curebpath) {
                    var liblistlastpath = localStorage.curebpath;
                    }
                    else {
                    var liblistlast = $("#library-list li");
                    var liblistlasttitle = liblistlast.last().children('a').text();
                    var liblistlastpath = liblistlast.last().children('a').attr('id');
                    //alert(liblistlast.last().children('a').attr('id'));
                    //$("#bkttl").text(liblistlasttitle);
                    }
                    RWCDemoApp.loadAndRenderEpub(liblistlastpath, 6);


                }).fail(function (result) {
                    console.log("The library could not be loaded");
                    RWCDemoApp.loadAndRenderEpub("epub_content/moby_dick/OPS/package.opf", 6);
                });

$("#library-edit-btn").click(function (e) {
$(".savebtn").show();
});

$("#libary-save-ico").click(function (e) {
$(".savebtn").hide();
document.body.contentEditable='false';
document.designMode='off';
void 0;
$('#libary-save-ico').myfunction();
});


(function( $ ){
$.fn.myfunction = function() {

$(".flowing-wrapper").each(function() {
var i = 1;
var j = $(".flowing-wrapper").size();
var curhtmlpath = $(this).children("iframe").attr("src");
var curhtmlbody = $(this).children("iframe").contents().find("body").html();
alert(curhtmlpath);
while (i <= j) {
$('<input>').attr({type: 'text',id: 'curhtmlpath'+i,name: 'curhtmlpath'+i,value: curhtmlpath}).appendTo('#updfile_form');
$('<input>').attr({type: 'text',id: 'curhtmlbody'+i,name: 'curhtmlbody'+i,value: curhtmlbody}).appendTo('#updfile_form');
i++;
}

$("#wrapcount").val(j);

});

$("#updfile_form").submit();

}; 
})( jQuery );



});

            
        </script>

        <!-- Demo application code -->
        <script src="modules_and_dependencies/DemoAppCode.js" type="text/javascript"></script>
    </head>

    <!-- This is all application-specific HTML -->
    <body>
       <!-- The navbar -->
        <div class="navbar navbar-fixed-top" id="toolbar-el" contenteditable="false">
            <div class="navbar-inner" id="top-bar" style="">
                <div class="container" style="width: 100%">

                    <!-- Navbar logo -->
                    <a title="Simple RWC Demo" class="brand" href="#">
                        Datamatics&#x00A0;&#x2014;&#x00A0;ePubApp&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;&#x00A0;<span id="bkttl" class="newproj"> </span>
                    </a>

                    <!-- Navbar contents -->
                    <ul class="nav pull-right">

                        <!-- Log out -->
                        <li>
                            <a accesskey="n" href="logout.php" id="btn-logout" role="button" title="Logout">
                                <img src="img/system_log_out.png" class="nav-icon" id="system-logout-ico" alt="" style="">
                            </a>
                        </li>

                        <li class="divider-vertical"></li>

                        <!-- Library page -->
                        <li>
                            <a accesskey="n" href="bkself/shelf.php" id="library-page-btn" role="button" title="Library Page">
                                <img src="img/ico_library.png" class="nav-icon" id="libary-page-ico" alt="" style="">
                            </a>
                        </li>

                        <li class="divider-vertical"></li>

                        <!-- Save page -->
                        <li class="savebtn">
                            <a accesskey="n" href="" id="library-save-btn" role="button" title="Save Page">
                                <img src="img/file_save.gif" class="nav-icon" id="libary-save-ico" alt="" style="">
                            </a>
                        </li>

                        <li class="divider-vertical"></li>


                        <!-- Edit page --> 
                        <li>
                            <a accesskey="n" href="javascript:(function () {if (document.documentElement.contentEditable === false || document.designMode === 'off') {document.body.contentEditable='true';document.designMode='on';void 0;} else if (document.documentElement.contentEditable === true || document.designMode === 'on') {document.body.contentEditable='false';document.designMode='off';void 0;}})();" id="library-edit-btn" role="button" title="Edit Page">
                                <img src="img/file_edit.png" class="nav-icon" id="libary-edit-ico" alt="" style="">
                            </a>
                        </li>

                        <li class="divider-vertical"></li>


                        <!-- Widgets -->
                        <li>
                            <a accesskey="n" href=" " id="btn-widgets" role="button" title="Widgets" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="img/Widgets.png" class="nav-icon" id="system-wdgts-ico" alt="" style="">
                            </a>
                            <ul id="wdgts-list" class="dropdown-menu" role="menu" aria-labelledby="dlabel">
                            <li><a id="wdgt_beforeafter" href="wdgts/beforeafter.php">Before and After</a></li>
                            </ul>
                        </li>

                        <li class="divider-vertical"></li>

                        <!-- Previous page -->
                        <li>
                            <a accesskey="n" href="#" id="previous-page-btn" role="button" title="Previous Page">
                                <img src="img/arrow_previous_medium.png" class="nav-icon" id="arrow-previous-ico" alt="" style="">
                            </a>
                        </li>
                        <!-- Next page -->
                        <li>
                            <a accesskey="n" href="#" id="next-page-btn" role="button" title="Next Page">
                                <img src="img/arrow_next_medium.png" class="nav-icon" id="arrow-next-ico">
                            </a>
                        </li>
                        
                        <li class="divider-vertical"></li>
                        
                        <!-- Toggle single or two pages -->
                        <li>
                            <a accesskey="n" href="#" id="toggle-synthetic-btn" role="button" title="Toggle page layout">
                                <img src="img/1page_view_toggle_medium.png" class="nav-icon" id="single-page-ico" style="display:none;">
                                <img src="img/2page_view_toggle_medium.png" class="nav-icon" id="synthetic-page-ico">
                            </a>
                        </li>

                        <li class="divider-vertical"></li>

                        <!-- The library for the sample reader -->
                        <li>
                            <a accesskey="n" href="#" id="epub-demo-library" role="button" title="Demo Library" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="img/table_of_contents_medium.png" class="nav-icon" id="library-ico">
                            </a>
                            <ul id="library-list" class="dropdown-menu" role="menu" aria-labelledby="dlabel">
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
             <!-- simple readium create dynamic iframe and post the ajax result here -->
        <div id="epub-reader-container" style="margin-top:65px;"></div>
<span id="curEditStatus"></span>
<form class="hidden" id="updfile_form" method="post" action="save.php">
<input type="text" value="" id="wrapcount" name="wrapcount"/>
<input type="submit" value="submit"/>
</form>
</body>
</html>

Open in new window

save.php
<?php
ini_set('display_errors', TRUE);
error_reporting(E_ALL);

$i = 1;
$wrapcount = $_POST['wrapcount'];

//$wrapcount = 1;

while ($i <= $wrapcount) {

$content = $_POST['curhtmlbody'.$i]; 
$element_id = $_POST['curhtmlpath'.$i];

//$content = 'John Lourdu samy'; 
//$element_id = 'epub_content/siddhartha3/OPS/s007-Part-001.xhtml';



if (get_magic_quotes_gpc()) {
function stripslashes_gpc(&$value) {
$value = stripslashes($value);
}
array_walk_recursive($_GET, 'stripslashes_gpc');
array_walk_recursive($_POST, 'stripslashes_gpc');
array_walk_recursive($_COOKIE, 'stripslashes_gpc');
array_walk_recursive($_REQUEST, 'stripslashes_gpc');
}

$newcont='<body>'.$content.'</body>';

//get the file contents
$file = file_get_contents($element_id);
//use regex to replace what's in between the body tags
$file = preg_replace("/\<body\>(.*)\<\/body\>/Uis",$newcont, $file); 

//open the file in write mode
$myFile = $element_id;
$fh = fopen($myFile, 'w') or die("can't open file");
//write the new contents to the file
fwrite($fh, $file);
fclose($fh); 
$i++;
}
header("location:page1.php");
exit();
?>

Open in new window

In the above code, I have tried manual values in save.php, it works fine. But I have send dynamic values from page1.php It not worked. Please advice how to solve this.
Regards,
John.A
0
Julian HansenCommented:
But I have send dynamic values from page1.php It not worked
Well - first figure out what is being sent to your save.php file.

With Firefox (or Chrome) open the console and see what is in the POST header when the request is sent.

That will give us an idea of what is actually being sent by the script.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JohnLourduAuthor Commented:
Thanks julianH. I have figure it out. I have used empty <a href=""> in save button. So save.php not fire. Thanks for your support.

Regards,
John.A
0
Julian HansenCommented:
You are welcome - thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.