• Resolved kyledoesit

    (@kyledoesit)


    I have a form built with the calculated form fields plugin for selecting drive end information above a table. When selecting options from the form the information is added to the search box but the search is not activating unless I click inside it or press a key on my keyboard.

    Is there a way I can activate the search without manually interacting with the search box?

    <script type="text/javascript">
    
    
    function displayColumns() {
    
    //  console.log(jQuery("#fieldname13_1").val());
    //  jQuery("fieldname13_1").val('Ft-Lb (Foot-Pound)').trigger('change')
    //  var val='Ft-Lb (Foot-Pound)';
    //  jQuery("fieldname13_1").trigger("change").val('Ft-Lb (Foot-Pound)');
    
    
    //jQuery('.ninja_column_2').hide();
    //jQuery('.ninja_column_3').hide();
    //jQuery('.ninja_column_4').hide();
    //jQuery('.ninja_column_5').hide();
    //jQuery('.ninja_column_6').hide();
    //jQuery('.ninja_column_7').show();
    
    //jQuery('.ninja_column_2').css("display","none !important");
    //jQuery('.ninja_column_3').css("display","none !important");
    //jQuery('.ninja_column_4').css("display","none !important");
    //jQuery('.ninja_column_5').css("display","none !important");
    //jQuery('.ninja_column_6').css("display","none !important");
    //jQuery('.ninja_column_7').css("display","none !important");
    
    //jQuery('.ninja_column_2').css("visibility","hidden");
    //jQuery('.ninja_column_3').css("visibility","hidden");
    //jQuery('.ninja_column_4').css("visibility","hidden");
    //jQuery('.ninja_column_5').css("visibility","hidden");
    //jQuery('.ninja_column_6').css("visibility","hidden");
    //jQuery('.ninja_column_7').css("visibility","hidden");
    
    //jQuery(".ninja_column_2").addClass("hide_all");
    //jQuery(".ninja_column_3").addClass("hide_all");
    //jQuery(".ninja_column_4").addClass("hide_all");
    //jQuery(".ninja_column_5").addClass("hide_all");
    //jQuery(".ninja_column_6").addClass("hide_all");
    //jQuery(".ninja_column_7").addClass("hide_all");
    
    //jQuery("td .ninja_column_2").addClass("hide_all");
    //jQuery("td .ninja_column_3").addClass("hide_all");
    //jQuery("td .ninja_column_4").addClass("hide_all");
    //jQuery("td .ninja_column_5").addClass("hide_all");
    //jQuery("td .ninja_column_6").addClass("hide_all");
    //jQuery("td .ninja_column_7").addClass("hide_all");
    
    }
    
    
    
    function buildSearch() {
    
      var a=jQuery('input[name="fieldname6_1"]:checked').val();
      if(a==null)
        a="";
      else
        a='"'+a+'"';
      //var b=jQuery("#fieldname8_1").val();
      var c=jQuery("#fieldname9_1").val();
      var d=jQuery("#fieldname10_1").val();
      d=d.trim();
    
    
      var x=a + " " + c + " " + d;
    
    //console.log( "a="+a );
    //console.log( "c="+c );
    //console.log( "d="+d );
    //console.log( "x="+x );
    
      jQuery(".dataTables_filter input").val(x);
      jQuery(".dataTables_filter input").focus();
      jQuery(".dataTables_filter input").trigger("keypress").val(function(i,val){return val + ' ';});
      //displayColumns();
    }
    
    //jQuery(document).on("click", "#image1", function() {
    jQuery(document).ready(function(e) {
    
    
      //click on the first option (images)
    //  jQuery(document.body).on('click',"#fieldname6_1",function (e) {
      jQuery(document.body).on('click',"[id^=fieldname6_1]",function (e) {
    
    
    //        var radioValue = jQuery("input[name=fieldname6_1]:checked").val();
    //        if(radioValue){
    //            alert("radioValue="+radioValue);
    //        }
    
        //e.preventDefault();
        //e.stopPropagation();
        //move the screen to the next option
        
        jQuery('html, body').animate({
          scrollTop: jQuery("#fieldname9_1").offset().top-120
        }, 2000);
    
        //first unhighlight the image from all tools
        //jQuery(".dfield img").removeClass("select_tool");
    //    jQuery("#fieldname6_1_rb8").prop('disabled', true).parent().css({backgroundColor:'#fcc'});
        jQuery("#fieldname6_1_rb0").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb1").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb2").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb3").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb4").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb5").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb6").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb7").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb8").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb9").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb10").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb11").parent().css({"opacity": ".15"});
        jQuery("#fieldname6_1_rb12").parent().css({"opacity": ".15"});
    
        //highlight the image
    //console.log(this);
    //console.log(this.parent().attr('name'));
    //    jQuery(this).find("img").css("background-color","red");
    //    jQuery(this).closest("img").css("background-color","red");
    //    jQuery(this).parent().children("span").children("img").css("background-color","red");
        //jQuery(this).parent().css("background-color","red");
    //jQuery("span").parent().css({"color": "red", "border": "2px solid red"});
    jQuery(this).parent().css({"opacity": "1"});
        //jQuery("#image1").addClass("select_tool");
    
        buildSearch();
        jQuery("fieldname13_1").val('Ft-Lb (Foot-Pound)').trigger('change')
    
    
      });
    
    
      //click on the second option
      jQuery(document.body).on('change',"#fieldname8_1",function (e) {
    //    e.stopPropagation();
        //move the screen to the next option
        jQuery('html, body').animate({
          scrollTop: jQuery("#fieldname10_1").offset().top-120
        }, 2000);
        buildSearch();
        jQuery("fieldname13_1").val('Ft-Lb (Foot-Pound)').trigger('change')
      });
    
    
      //click on the third option
      jQuery(document.body).on('change',"#fieldname9_1",function (e) {
    //    e.stopPropagation();
        //move the screen to the next option
        jQuery('html, body').animate({
          scrollTop: jQuery("#fieldname13_1").offset().top-120
        }, 2000);
        buildSearch();
        jQuery("fieldname13_1").val('Ft-Lb (Foot-Pound)').trigger('change')
      });
    
    
      //click on the fourth option
      jQuery(document.body).on('change',"#fieldname10_1",function (e) {
        //e.preventDefault();
    //    e.stopPropagation();
        //move the screen to the next option
        jQuery('html, body').animate({
          scrollTop: jQuery("#drive-ends-table").offset().top-120
        }, 2000);
    	jQuery('.column-3').hide();
    	jQuery('.column-4').hide();
    	jQuery('.column-5').show();
    	jQuery('.column-6').hide();
    	jQuery('.column-7').hide();
    	jQuery('.column-8').hide();
    
    console.log(jQuery("#fieldname13_1").val());
        buildSearch();
      });
    
    /*
      //change the search box as the calculated form field changes
      jQuery(document.body).on('change',"#fieldname7_1",function (e) {
        //e.stopPropagation();
    //alert('calculated field changed');
        jQuery(".input-group input").val(jQuery("#fieldname7_1").val());
        jQuery(".input-group input").blur();
        jQuery("#fieldname7_1").focus();
    var e = jQuery.Event("keydown");
    e.which = 50; // # Some key code value
    jQuery("#fieldname7_1").trigger(e);
        jQuery("#fieldname7_1").blur();
        jQuery(".fooicon").click();
      });
    */
    
    });
    </script>

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    I just had a quick glance over your code, and I think you’ll just have to do something like

    jQuery(".dataTables_filter input").trigger("input");

    after setting the search field value. (You are triggering keypress already, so that’s where this change likely needs to be done — but trigger input after using val().)

    Regards,
    Tobias

    Thread Starter kyledoesit

    (@kyledoesit)

    Thank you for such a fast reply! I tried adding that here but no luck yet.

      jQuery(".dataTables_filter input").val(x);
      jQuery(".dataTables_filter input").focus();
      jQuery(".dataTables_filter input").trigger("keypress").val(function(i,val){return val + ' ';
      jQuery(".dataTables_filter input").trigger("input");});
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    you put that code inside the val( ... ) function. That’s not what I meant. Please replace the keypress trigger with input.

    Regards,
    Tobias

    Thread Starter kyledoesit

    (@kyledoesit)

    I think I misunderstood, after moving the line of code you gave me right under the line with val(x) it appears to be working. Thank you!!

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Activate search from form inputs’ is closed to new replies.