[SOLVED] Get today's date in script using JQuery

[destefanix]

Hi, I have made a lot of customizations in our script, embedded succesfully lot of JS code in vicidial.php file. The only thing that actually can not manage to obtain is to get today's date in a date input inside a form.

Code: Select all

<input class="w3-input" type="text" name="date" id="date" readonly/>

and in the vicidial.php file

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#date").attr("value", today);
});

i do need that for passing data in a google sheet. It's not working for me, any help?

[williamconley]

Where did you place this function? (in the head? in a script tag?)

Did you place input in a location that gets deleted and rewritten?

You may want to go with hidden instead of readonly. Won't screw up the layout that way.

[blackbird2306]

First of all don't use jQuery in vicidial.php. Plain javascript should be enough to obtain the intended results, only use it (jQuery) if absolutely necessary. Vicidial.php is bloated enough and jQuery will make things go wrong.
Where is this input tag located? In vicidial.php or somewhere else "Hi, I have made a lot of customizations in our script" ?

Code: Select all

<input class="w3-input" type="text" name="date" id="date" readonly/>

This should be also within script tag:
$(document).ready(function() { ... }

And the name / id from your input "date" could also be a problem. There are so many date fields, who knows. Rename it more unique.

[williamconley]

First of all don't use jQuery in vicidial.php. Plain javascript should be enough to obtain the intended results, only use it (jQuery) if absolutely necessary. Vicidial.php is bloated enough and jQuery will make things go wrong.

We disagree, blackbird and I. Nothing wrong with jQuery. Vicidial's bloat is due to all code being in a single file, not related to Web Browser capacity. We have several clients happily using jQuery in their Custom Vicidial Agent Screen. If Vicidial were to move much of their code to a .js file (or several), much of what appears to be bloat would diminish.

But jQuery will not slow the operation of the Vicidial scripts as long as you don't write code that crashes Javascript (which is always a rule, not limited to jQuery).

[mflorell]

We have encountered several clients mis-using JQuery along with vicidial.php and it has caused a lot of problems with how vicidial operates. As for bloat, years ago just to test it, I tried using JQuery's AJAX code functions in place of what we have in vicidial.php now, and it froze after a few seconds. JQuery is not designed to work in a complex multi-layered way like vicidial.php operates. Yes, we do have clients that use JQuery along with vicidial, but it is easy to write very inefficient code with it, and that's often why we don't recommend using it.

[williamconley]

Of course: Using jQuery to put a single value in a single field one time during startup is unlikely to cause any overload or instability.

It is overkill to use jQuery to drop the date into an input (hardly requires jQuery framework to be added for this simple of a function).

In our experience, even using it a great deal doesn't cause any instability ... as long as the code is clean. Just like any ther javascript code (or framework).

[destefanix]

Really thanks Matt, William and Blackbird..
Well my vicidial.php integrates a lot of functions inside, 'cause I embedded a lot of stuff in the script like fonts and icons.

https://drive.google.com/open?id=1CoW8W ... RXkyqcfevu
https://drive.google.com/open?id=1465I3 ... 6TxP3-FgEh
https://drive.google.com/open?id=1q1mPx ... 9MQI-fkiLA

I have a calendar (hosted by teamup), a html form that sends data via xmlhttprequest to calendar (js/jquery) and to a google sheet also (js/jquery).

Of course I put all the script inside the head between <script>...</script>, but this one for today's date doesn't want to work! Input field is inside the script and I also tried with others ids, id is not the problem.

Edit: I also tried a code snippet in jquery to disable submit button in the form after clich and it doesn't work also..

Code: Select all

!-- MODGDS-012: Script disabilitare il tasto dopo invio app -->

    $(document).ready(function () {

        $("#form").submit(function (e) {

            //stop submitting the form to see the disabled button effect
            e.preventDefault();

            //disable the submit button
            $("#inviaApp").attr("disabled", true);

            //disable a normal button
            //$("#btnTest").attr("disabled", true);

            return true;

        });
    });

[blackbird2306]

As I can recognize it, you have added a script in script section with all these things like calender, html form etc.? In this script there is your input with date field. Is this right? But then you inserted your date function in vicidial.php. And now you wonder, why this is not working? The problem is that your input tag or rather your complete script doesn't exist at the moment, when vicidial.php has loaded. This will only happen, when there is a "live call". Then vicidial.php starts an ajax request to vdc_script_display.php, which on the other hand pulls your custom script. Only from this time your input field / script is present.
My advice:
1. Put all your custom script code, also your date function (prefilled input tag with date would be much easier in PHP language), in a new example.php file in agc directory in order to use it as an iframe in script section
2. Add a new script like in help described (change the values for width and height as needed) with this script text:

Code: Select all

<iframe src="/agc/example.php?lead_id=--A--lead_id--B--&vendor_id=--A--vendor_lead_code--B--&list_id=--A--list_id--B--&gmt_offset_now=--A--gmt_offset_now--B--&phone_code=--A--phone_code--B--&phone_number=--A--phone_number--B--&title=--A--title--B--&first_name=--A--first_name--B--&middle_initial=--A--middle_initial--B--&last_name=--A--last_name--B--&address1=--A--address1--B--&address2=--A--address2--B--&address3=--A--address3--B--&city=--A--city--B--&state=--A--state--B--&province=--A--province--B--&postal_code=--A--postal_code--B--&country_code=--A--country_code--B--&gender=--A--gender--B--&date_of_birth=--A--date_of_birth--B--&alt_phone=--A--alt_phone--B--&email=--A--email--B--&security_phrase=--A--security_phrase--B--&comments=--A--comments--B--&user=--A--user--B--&campaign=--A--campaign--B--&phone_login=--A--phone_login--B--&fronter=--A--fronter--B--&closer=--A--user--B--&group=--A--group--B--&channel_group=--A--group--B--&SQLdate=--A--SQLdate--B--&epoch=--A--epoch--B--&uniqueid=--A--uniqueid--B--&customer_zap_channel=--A--customer_zap_channel--B--&server_ip=--A--server_ip--B--&SIPexten=--A--SIPexten--B--&session_id=--A--session_id--B--&dialed_number=--A--dialed_number--B--&dialed_label=--A--dialed_label--B--&rank=--A--rank--B--&owner=--A--owner--B--&phone=--A--phone--B--&camp_script=--A--camp_script--B--&in_script=--A--in_script--B--&script_width=--A--script_width--B--&script_height=--A--script_height--B--&recording_filename=--A--recording_filename--B--&recording_id=--A--recording_id--B--&user_custom_one=--A--user_custom_one--B--&user_custom_two=--A--user_custom_two--B--&user_custom_three=--A--user_custom_three--B--&user_custom_four=--A--user_custom_four--B--&user_custom_five=--A--user_custom_five--B--&preset_number_a=--A--preset_number_a--B--&preset_number_b=--A--preset_number_b--B--&preset_number_c=--A--preset_number_c--B--&preset_number_d=--A--preset_number_d--B--&preset_number_e=--A--preset_number_e--B--&preset_number_f=--A--preset_number_f--B--&preset_dtmf_a=--A--preset_dtmf_a--B--&preset_dtmf_b=--A--preset_dtmf_b--B--&did_id=--A--did_id--B--&did_extension=--A--did_extension--B--&did_pattern=--A--did_pattern--B--&did_description=--A--did_description--B--&closecallid=--A--closecallid--B--&xfercallid=--A--xfercallid--B--&agent_log_id=--A--agent_log_id--B--&entry_list_id=--A--entry_list_id--B--&call_id=--A--call_id--B--&&user_group=--A--user_group--B--&&" style="width:580;height:290;background-color:transparent;" scrolling="auto" frameborder="0" allowtransparency="true" id="popupFrame" name="popupFrame" width="460" height="290" STYLE="z-index:17"> </iframe>


[destefanix]

As I can recognize it, you have added a script in script section with all these things like calender, html form etc.?

Not exactly.. all scripting data (code) is written in vicidial.php file, in the head line 18800 about.. I only wrote html in script vicidial admin panel.

In this script there is your input with date field. Is this right? But then you inserted your date function in vicidial.php. And now you wonder, why this is not working? The problem is that your input tag or rather your complete script doesn't exist at the moment, when vicidial.php has loaded. This will only happen, when there is a "live call". Then vicidial.php starts an ajax request to vdc_script_display.php, which on the other hand pulls your custom script. Only from this time your input field / script is present.

And why other functions work?

My advice:
1. Put all your custom script code, also your date function (prefilled input tag with date would be much easier in PHP language), in a new example.php file in agc directory in order to use it as an iframe in script section
2. Add a new script like in help described (change the values for width and height as needed) with this script text:

I'm afraid that it could be a problem embedding an i frame, 'cause i use SSL and iframe should be on a http.. :/

Anyway... Thanks Blackbird! I'll keep on searching for a solution, if any other has some advice it'll be very appreciated!

[blackbird2306]

No there is no problem to embed ssl content in iframe like:

Code: Select all

<iframe src="https://serverip/agc/example.php?lead_id=--A--lead_id--B--...</iframe>

Where are the other functions and what do they? It's fact that input tag in script content does not exist, when vicidial.php has loaded. It would be much easier and clean to put all this things in a separate php file.
But if you don't want to go this way try this:
There is a function called "load_script_contents" in vicidial.php, which will be called to load the script contents:

Code: Select all

if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
   {
      new_script_content = xmlhttp.responseText;
      document.getElementById(script_span).innerHTML = new_script_content;
      agent_events('call_script', script_span, aec);   aec++;
        // put the part with date here (not as a function) then your date input field should be available
           var date = new Date();
           var day = date.getDate();
           var month = date.getMonth() + 1;
           var year = date.getFullYear();
           if (month < 10) month = "0" + month;
           if (day < 10) day = "0" + day;
           var today = year + "-" + month + "-" + day;
           $("#date").attr("value", today);
   }


[destefanix]

Yeah.. i tried, but no way.. I really don't understand.

https://drive.google.com/open?id=14mrn9 ... ZG7BmbUw1T

[blackbird2306]

This date input field doesn't look like normal text field with type="text". It's more like type="date". Which framework is loaded and what is this css class="w3-input". Are you sure, that you are talking of this input "<input class="w3-input" type="text" name="date" id="date" readonly/>" (find out name of this field with F12 and Ctrl + Shift + c + select field and post me html code) ? Here seems to be something wrong. I see there an italian language date field with "gg/mm/aaaa".
At least you made so much customizations, that we all don't know what happens there in your code.

[destefanix]

Solved! I had to embed all JQuery code inside a JS function that loads inside the script. For example:

Code: Select all

function accordions(id) {
   
   $( "#TOdate" ).datepicker(); // Datepicker
   
   $(document).ready(function() { // Today date
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = day + "-" + month + "-" + year;       
    $("#TOdate").attr("value", today);
    });
   
   $("#inviaApp").attr("disabled", true); // Disable button
   
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}

Hope it can be useful for others who need! Thanks all

[blackbird2306]

Thanks for the post-back!