Print Page | Close Window

How can submit the form in BaseLayer?

Printed From: openElement Website
Category:

openElement


Forum Name: Dynamic OE - Databases, etc
Forum Description: openElement's database management system and Element Packs
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=866
Printed Date: Mar 28 2024 at 7:56am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: How can submit the form in BaseLayer?
Posted By: djju1029
Subject: How can submit the form in BaseLayer?
Date Posted: Oct 13 2016 at 5:39pm
Hi OE team,

My webpage has a multilayer structure such as:

BaseLayer --- BaseLayer_summary ---Summary_main
                  \                                       \_Summary_system_info
                   \                                       \_Summary_laser_iinfo 
                    \_BaseLayer_system     
                     \
                      \
                       \_BaseLayer_advanced

Now, Scenario is that
    1) BaseLayer_summary has RGB control bars (three bars).
    2) These RGB control bars are shown always and can be controlled wherever user navigate under BaseLayer_summary.
    3) User need to control RGB power of laser whenever he/she need to adjust it.

However, the submit form includes only Form Elements which are used in same page, for example,
I want to submit it on Summary_main but the submit form in Summary_main show only Form Elements which are used in Summary_main page.

How can I submit the Form Element which is used in BaseLayer?



Replies:
Posted By: Dmit OE
Date Posted: Oct 13 2016 at 8:38pm
Hi,

You can't just add those several field elements onto each page? There's no simple way of including layer fields into a page's form... You can get their values with JavaScript and put into some elements present on the page and included into the form, but it's not necessarily easier


Posted By: djju1029
Date Posted: Oct 14 2016 at 3:17am
Could you give an example that getting the value from BaseLayer page at sub-layer page using JavaScript?


Posted By: Dmit OE
Date Posted: Oct 14 2016 at 8:34am
Well, for example you can use one (invisible to user) field for each base layer field on your page, note its ID as well as ID of corresponding base layer input, then do someting like


$(function(){

  $('#WEbaseLayerInput1').change(function(){ // on base layer's input change by user
    $('#WEpageInput1').val($('#WEbaseLayerInput1').val()); // copy the value to page input
});

  $('#WEbaseLayerInput2').change(function(){
    $('#WEpageInput2').val($('#WEbaseLayerInput2').val());
});

  $('#WEbaseLayerInput3').change(function(){
    $('#WEpageInput3').val($('#WEbaseLayerInput3').val());
});

});




Posted By: Dmit OE
Date Posted: Oct 14 2016 at 8:35am
And of course you need to include those 3 page inputs in the form configuration


Posted By: djju1029
Date Posted: Oct 14 2016 at 3:52pm
Dmit OE, Thank you so much! I will try it.

By the way, in order to use the slider form by JQuery Mobile, I put jquery.mobile.css and jquery.mobile.js onto Header of source such as:
// example
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

It works but I have a problem.

After putting jquery.mobile, the javascript code of coping value from Range form to Text box form does not work anymore,

// example of the javascript code of coping value from Range form to Text box form
$('.Rrange  input').change(function(){
    $('.Rrange-mirror  input').val($(this).val()); // copy value from here to "mirror" field
}); // immediately run the code "on change"

Could you advise to me what I made a mistake on it?


Posted By: Dmit OE
Date Posted: Oct 14 2016 at 4:24pm
You really need to upload your website somewhere, in some temporary location on any available hosting, and give the link to see what's wrong... (no need for PHP to work so no need to upload your datas etc. I think) Otherwise if you have no other choice, send the project to me.


Posted By: Dmit OE
Date Posted: Oct 14 2016 at 4:24pm
P.S. You shoudl remove this linefrom your code:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>


Posted By: djju1029
Date Posted: Oct 17 2016 at 12:56pm
Thanks Dmit OE,

It would be better to send whole project folder to you, personally.
Could you inform your contact information to me privately?


Posted By: djju1029
Date Posted: Oct 17 2016 at 2:02pm
1) When I remarked this line, the result was same.

2) When I remarked the jquery.mobile line as well as following, the value was copied to text box form what I want.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
<!-- <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> -->

Question? Does jquery.mobile affect the proper operation of jquery script we use in OE?




Posted By: Dmit OE
Date Posted: Oct 17 2016 at 3:08pm
Maybe, but first, try to use only the last line (jquery.mobile-1.4.5.min.js) and NOT the one with jquery-1.11.3.min.jswhich conflicts with OE-integrated jQuery.


Posted By: djju1029
Date Posted: Oct 17 2016 at 3:38pm
Yes, I have tried it.
When I used only the last line (jquery.mobile-1.4.5.min.js) and NOT the one with jquery-1.11.3.min.js which conflicts with OE-integrated jQuery, the value of slider was not copied to text box form.


Posted By: Dmit OE
Date Posted: Oct 17 2016 at 4:33pm
That complicates things. I will have to look into it, when I find some time. Meanwhile, check whether you can achieve desired result without using jQuery mobile, which is not just some jQuery addon but an entirely different library and can indeed conflict a lot.


Posted By: djju1029
Date Posted: Oct 17 2016 at 7:00pm
Thanks Dmit OE,
Your guess would be correct, jquery.mobile might conflict against default jquery in OE.

Therefore, I resolve this issue using jquery ui instead of jquery mobile as following,

//in Header of BaseLayer
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$( function() {
    $( "#Rslider" ).slider({
        range:"max",
        min:0,
        max:100,
        step:0.5,
        value:50,
        slide: function( event, ui ) {
            $( ".Rrange input" ).val( ui.value );
        }
    });
    $( ".Rrange input" ).val( $( "#Rslider" ).slider( "value" ) );
} );
</script>


//in Body of SubLayer

Text Input Field form with Custom Classes="Rrange"

Now, I need to connect this value to Database to get, update.....a lot of job....

Thanks,



Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net