#StackBounty: #javascript #php #jquery #ajax #cordova PhoneGap Allow (Ajax Request) Server side PHP files access just for this app (Sec…

Bounty: 50

I have created a android app using PhoneGap (PhoneGap is a tool which supports you to create apps using the web languages like HTML, CSS, and JavaScript.).

This is my function.


    $(document).ready(function() {
        $("#insert").click(function() {
            var title = $("#title").val();
            var duration = $("#duration").val();
            var price = $("#price").val();
            var dataString = "title=" + title + "&duration=" + duration + "&price=" + price + "&insert=";
            if ($.trim(title).length > 0 & $.trim(duration).length > 0 & $.trim(price).length > 0) {
                $.ajax({
                    type: "POST",
                    url: "http://www.example.com/test/insert.php",
                    data: dataString,
                    crossDomain: true,
                    cache: false,
                    beforeSend: function() {
                        $("#insert").val('Connecting...');
                    },
                    success: function(data) {
                        if (data == "success") {
                            alert("inserted");
                            $("#insert").val('submit');
                        } else if (data == "error") {
                            alert("error");
                        }
                    }
                });
            }
            return false;
        });
    });
    

This function should update the table which is on the server using http://www.example.com/test/insert.php. It works fine without any problems when the app is installed on a android phone.

But other users could easily update my table using above function. I mean if they know the URL (http://www.example.com/test/insert.php) they can also update my table passing necessary post requests.

How do I prevent this from happening? How could I allow accessing the page http://www.example.com/test/insert.php limited to just my app. I mean if request are coming from my app http://www.example.com/test/insert.php it should work.


Get this bounty!!!

#StackBounty: #jquery #jquery-ui #jquery-ui-droppable jQuery UI's greedy droppable not working as expected

Bounty: 50

I have a list of draggables than can be dropped inside a droppable and when this happens, the draggables are cloned and converted to droppables.

This new droppables are greedy but when they receive a draggable, both drop events are fired (the drop event from the draggable and the drop event from the droppable area)

What I’m doing wrong? I need the event to fire only once (from the new droppable)

Here’s a fiddle: drag and drop an item into the red area, then drag another item and drop it into the item you already dropped. See the console log.

HTML

<ul> <li class="item" data-id="1">1</li> <li class="item" data-id="2">2</li> <li class="item" data-id="3">3</li> <li class="item" data-id="4">4</li> <li class="item" data-id="5">5</li> </ul>

JS

$(".item").data("active", false);

$(".item").draggable({
    helper: "clone",
    appendTo: "#main_droppable",
    scroll: false,
    start: function(event, ui)
    {
        if($(this).data("active") == false)
        {
            $(this).fadeTo(100, 0.2);
        }
        else
        {
            return false;
        }
    },
    revert: function(is_valid_drop)
    {
        if(!is_valid_drop)
        {
            $(this).fadeTo(100, 1).data("active", false);

            return true;
        }
        else
        {
            $(this).data("active", true);
        }
    }
});

$("#main_droppable").droppable({
    drop: function(event, ui)
    {
        console.log("drop main");

        addNewItem($(ui.helper));

        return false;
    }
});

function addNewItem($oldItem)
{
    var $newItem = $oldItem.clone(false).fadeTo(100, 1).data("active", true);

    $oldItem.remove();

    $newItem.draggable({
        containment: "parent",
    });

    $newItem.droppable({
        greedy: true,
        drop: function(event, ui)
        {
            console.log("drop item");

            $(this).fadeTo(100, 0, function()
            {
                var $originalItem = $("ul").find(".item[data-id=" + $(this).data("id") + "]");

                $originalItem.fadeTo(100, 1).data("active", false);

                $("#main_droppable").find(".item[data-id=" + $originalItem.data("id") + "]").remove();
            });

            addNewItem($(this));
        }
    });

  $("#main_droppable").append($newItem);
}

CSS

#main_droppable
{
  border: 1px solid red;
  min-height: 50px;
}

.item
{
  display: inline-block;
  border: 1px solid blue;
  width: 25px;
  height: 25px;
}


Get this bounty!!!

#StackBounty: #javascript #jquery #spring-boot show values from controller in modal page before submit

Bounty: 50

Trying to add a model confirmation page (continue/cancel) with some info in it.

The info comes from a form with a couple of inputs…

I have created a litte project, I think it ilustrates this requirement.

Before submit I want to show in modal page a value depending on the values entered in the form. In this case I have 3 input to make a simple sum.

So the modal page show the sum, and the user can decide to continue or not.

This is the link of the project. I’m stucked in index.html jquery section.

[https://github.com/davisoski/action-listener][1]

I think this is the correct approach, but I’m not able to make it in my case

[https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/][2]

Any idea

UPDATE 1

I have a simple form with 3 fields. I have a controller with a postmapping for /saveform, This method just call a service and make a sum. No problem with that.

<form action="#" th:action="@{/saveform}" th:object="${modelform}"
                    method="post">

    
</div>
</div>
</div>
</div> </form>

What I want to do is place in the middle of the process a modal page with that sum, so the user can decide if continue or cancel

I added a model like this (see index.html in the github project), I cant see the way to make a previus call to a method or something to show the value of sum in the model page. I used to do in JSF using actionListeners, but here I dont know how to do it. The blog from qtzar.com gave me an idea

UPDATE 2

It should be something like this:

$(function() {
        $.ajax({
            url : "/sum",
            success : function(data) {
                $("#modalHolder").html(data);
                $("#myModal").modal("show");
            }

        });

    }

and define in the controller a @RequestMapping

@RequestMapping("/sum")

but I can’t see how to pass parameters and where to put the return values to to modal

UPDATE 3:

Modified modal page, added th:fragment:

        <!--  Modal -->
        

Added two method in controller, one to calculate the sum to show in modal dialog and another to send to the server.

@PostMapping({ "/saveform" })
    public String saveForm(Model model, RedirectAttributes ra) {
        LOG.info("HomeController.saveForm");

        //Simulate the sum
        model.addAttribute("sum", "25");

        return "/::modalContents";

    }

    @RequestMapping("/sum")
    public String mySum(Model model) {

        model.addAttribute("sum", "24");

        return "/::modalContents";

    }

I'm think I'm close, but I'm getting error 500.


  [1]: https://github.com/davisoski/action-listener
  [2]: https://qtzar.com/2017/03/24/ajax-and-thymeleaf-for-modal-dialogs/


Get this bounty!!!

#StackBounty: #jquery #firefox #safari #web-frontend Choppy animation while scrolling up in safari and FireFox

Bounty: 50

I am building a website where i have put a scroll animation in which an icon images moves up based on the offset position of the right container content. The logic works great but the animation is choppy in safari and Firefox.

URL – http://ashirvad.xyz/qbf/

Code logic goes something like this:

$(window).scroll(function() {    
    var height = $(window).height(),
        scroll = $(window).scrollTop()
        var offsetStart = $('#cardContent').offset();      
    if (initialOffSetStartPosition.top >= (offsetStart.top -scroll - 1) ) {
        $(".nav-sticky").offset({top:offsetStart.top});     
}
});

Any help?


Get this bounty!!!

#StackBounty: #woocommerce #jquery #css Add slider to product thumbnails in WooCommerce

Bounty: 50

I want to display my product thumbnails in a slider like this one: http://flexslider.woothemes.com/thumbnail-slider.html

I found a way to add some options to the image slider itself:

// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );

function ud_update_woo_flexslider_options( $options ) {

    $options['directionNav'] = true;

    return $options;
}

But I found no way to add a slider to the thumbnails and let them sync with the image slider (like in the example).

Is there any way to do this?


Get this bounty!!!

#StackBounty: #javascript #jquery #html #datatables #codeigniter-3 How to filter data-tables using two or more dependent drop-down list?

Bounty: 50

I’m trying to apply filters to my data-table with drop-down list box which are dependent. But when i’m trying to select a value from drop-down, data-table takes value from only one drop-down.

Here is my code:

Script:


  $(document).ready(function(){
    var dataTable = $('#exampleProp').DataTable({
      "processing": true,
      "serverSide": true,
      "dom": 'lfrtip',
      "ajax": {
        "url": "",
        "dataType": "json",
        "type": "POST"
      },
      "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
      // "ordering": false,
    });

    $('#areaId').on('change', function(){
      if (this.value == 1) {
        dataTable.search("Midlands & East of England").draw();
      } else {
        dataTable.search("North East, Yorkshire & Humberside").draw();
      }
    });
    $('#cluster_id').on('change', function(){
       dataTable.search(this.value).draw();   
    });
    $('#prop_type').on('change', function(){
       dataTable.search(this.value).draw();   
    });
    $('#prop_status').on('change', function(){
       dataTable.search(this.value).draw();   
    });

  });

In this, Cluster is dependent on Area, but if I select Area, it filters using area only, and not by cluster.

Here is the code to pick a cluster list from database:

$('#areaId').change(function(){
         var form_date =
         $.ajax({
          url: "<?= base_url('Property/clusterlistAddPropertyUse'); ?>",
          data: {areaId:$(this).val()},
          method:'POST',
          dataType: 'html',
          success:function(data){
              // $('#cluster_id option:selected').each(function(){
              // $(this).prop('selected', false);
              // });
              $('#cluster_id').html(data); 
              $('.propcluster').multiselect('rebuild');                 
             }
          }); 
    });

Here is my view code:

<?php if($this->session->flashdata('success_msg')){ ?>
  
session->flashdata('success_msg'); ?>
<?php } ?> <?php if($this->session->flashdata('error_msg')){ ?>
session->flashdata('error_msg'); ?>
<?php } ?>
Property List
All area_id; ?>">area_name; ?>
All cluster_name; ?>
All property_type_name;?>
All stage_name; ?>
</div>
<!-- --> <!-- -->
Code Date Type ASYS Address1AreaCity Status Landlord Rooms Edit Action
Code Date Type ASYS No Address1AreaCity Status Landlord Rooms Edit Action
</div>

I want to filter data with both area and cluter and then type and stage also.

Edit:
**

For more details, I’m adding Controller and model code here:

**

Model

public function prop_query()
{
    # code...
    $this->db->select('property_id, property_code, property_added_date, property_updated_date, property_type, tbl_property_type.property_type_name as type, property_ASYS_no, property_address_1, property_area, tbl_area.area_name as area, property_cluster, tbl_cluster.cluster_name as cluster, property_status, tbl_property_stage.stage_name as stage, property_landlord_id, concat(tbl_landlord.landlord_first_name, tbl_landlord.landlord_middle_name, tbl_landlord.landlord_last_name) as landlord, property_postcode, count(tbl_rooms.room_property_id) as rooms,');
    $this->db->from($this->property);

    $this->db->join('tbl_property_type', 'tbl_property.property_type = tbl_property_type.property_type_id', 'left');
    $this->db->join('tbl_area', 'tbl_property.property_area = tbl_area.area_id', 'left');
    $this->db->join('tbl_cluster', 'tbl_property.property_cluster = tbl_cluster.cluster_id', 'left');
    $this->db->join('tbl_property_stage', 'tbl_property.property_status = tbl_property_stage.stage_id', 'left');
    $this->db->join('tbl_landlord', 'tbl_property.property_landlord_id = tbl_landlord.landlord_id', 'left');
    $this->db->join('tbl_rooms', 'tbl_property.property_id = tbl_rooms.room_property_id', 'left');

    // $whereArray = array('tbl_property.property_type' => $propertyType, 'tbl_property.property_area' => $area, 'tbl_property.property_status' => $stageId, 'tbl_property.property_cluster' => '$clusterString');

    // $this->db->where('tbl_property.property_type', $propertyType);
    // $this->db->where('tbl_property.property_area', $area);
    // $this->db->where('tbl_property.property_status', $stageId);
    // $this->db->where('tbl_property.property_cluster', $clusterString);

    $this->db->group_by('tbl_property.property_id');
    // $this->db->order_by("tbl_property.property_updated_date", "DESC");

    if (isset($_POST["search"]["value"])) {
        # code...
        $this->db->like("property_id", $_POST["search"]["value"]);
        $this->db->or_like("property_code", $_POST["search"]["value"]);
        $this->db->or_like("property_added_date", $_POST["search"]["value"]);
        $this->db->or_like("tbl_property_type.property_type_name", $_POST["search"]["value"]);
        $this->db->or_like("property_ASYS_no", $_POST["search"]["value"]);
        $this->db->or_like("property_address_1", $_POST["search"]["value"]);
        $this->db->or_like("tbl_area.area_name", $_POST["search"]["value"]);
        $this->db->or_like("tbl_cluster.cluster_name", $_POST["search"]["value"]);
        $this->db->or_like("tbl_property_stage.stage_name", $_POST["search"]["value"]);
        $this->db->or_like("concat(tbl_landlord.landlord_first_name, tbl_landlord.landlord_middle_name, tbl_landlord.landlord_last_name)", $_POST["search"]["value"]);
        $this->db->or_like("property_postcode", $_POST["search"]["value"]);
    }

    if (isset($_POST["order"])) {
        # code...
        // $this->db->order_by("tbl_property.property_updated_date", "DESC");
        $this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
    } else {
        # code...
        $this->db->order_by("tbl_property.property_updated_date", "DESC");
        // $this->db->order_by($this->order_column[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
    }
}

public function prop_datatables()
{
    # code...
    $this->prop_query();

    if ($_POST["length"] != -1) {
        # code...
        $this->db->limit($_POST["length"], $_POST["start"]);
    }

    $query = $this->db->get();

    return $query->result();
}

public function prop_filtered_data()
{
    # code...
    $this->prop_query();
    $query = $this->db->get();

    return $query->num_rows();
}

public function prop_all_data()
{
    # code...
    $this->db->select("*");
    $this->db->from($this->property);

    return $this->db->count_all_results();
}

Controller:

public function fetchProp()
{
    # code...
    $user = $this->ion_auth->user()->row();
    $data['username'] = $user->username;

    $data['user_id'] = $user->id;
    $user_id = $user->id;
    $data['groupId'] = $this->l->groupId($user_id);
    $data['group'] = $data['groupId']['0']->group_id;

    $fetch_prop = $this->pm->prop_datatables();

    $data = array();

    foreach ($fetch_prop as $row) {
        # code...
        $sub_array = array();
        $sub_array[] = $row->property_code;
        $sub_array[] = $row->property_added_date;
        $sub_array[] = $row->type;
        $sub_array[] = $row->property_ASYS_no;
        $sub_array[] = $row->property_address_1;
        // $sub_array[] = $row->area;
        $sub_array[] = $row->cluster;
        $sub_array[] = $row->stage;
        $sub_array[] = $row->landlord;
        $sub_array[] = $row->rooms;

            }
        }


        // $sub_array[] = '<a style="text-decoration: none;" href="'.base_url('Property/propertyDetails/'.$row->property_id).'" class="btn-warning btn-xs">View</a>&nbsp;
        // <a style="text-decoration: none;" href="'.base_url('Property/viewRoom/'.$row->property_id).'" class="btn-success btn-xs">Rooms</a>';


        $data[] = $sub_array;
    }

    $output = array(
        "draw" => intval($_POST["draw"]),
        "recordsTotal" => $this->pm->prop_all_data(),
        "recordsFiltered" => $this->pm->prop_filtered_data(),
        "data" => $data
    );

    echo json_encode($output);
}

I’m gone through this link Data-Tables, But it gives result from columns from table only, I’m not showing area column in the table.

Edit_2:

While googled, I got this link, Search API (regular expressions), Data table specific column filter with multi select drop down
, Individual column searching (select inputs)
, I’m trying to achieve result like this, But with Drop-down box.

Any kind of help is welcome. Thanks in advance.


Get this bounty!!!

#StackBounty: #javascript #jquery #reactjs #webpack #ecmascript-6 webpack use amd Define

Bounty: 50

Im trying to convert my company project, from JSPM and systemJS to webpack.
So i started a new project from scratch and instaled basic configuration.

I need to include in the project a old package that was build by former collegues. The package was develop in Jquery and use the AMD define method.

So i search and finded imports-loader.

In my webpack configuration i have:

{
      test: path.resolve(__dirname, 'vendor/module/module.js'),
      loader: "imports-loader?this=>window&define=>false"
},

And in my code i have the follow:

import Module from 'module';
new Module.WindowManager(arg1, arg2);

when i run the webpack, i got this error:

Uncaught Error: module/wm/window missing module/core/emitter

In the module that im trying to use the module/core/emitter are use here:

define('module/wm/window', 
    ['module/core/emitter'], function (Emitter) { ... });


Get this bounty!!!

#StackBounty: #javascript #jquery #html #dom #jquery-ui Create multiple parametherized JQueryUI dialog boxes

Bounty: 50

In my application, I am using a lot of jQueryUI dialog boxes.
In order to reduce the length of code, and because I am using often the very same parameterization, I was wondering about a way to efficiently and easily create multiple dialogs.

I ended up with that: I’ve created 2 functions (dialog_OkCancel and dialog_Input_OkCancel) that call the same “main” dialog_handler.
That way I avoid calling the big main function and use only the little and easier ones.

These functions are pretty simple so I don’t know what else to add. 🙂

Here is a working snippet of my code to illustrate that:

// jQuery UI dialog custom management
function dialog_Handler({
  title,
  message,
  buttons,
  input
}) {
  $("<p>" + message + "</p>").dialog({ // Could use “var dialog = ”
    //autoOpen: false,                  // false would prevents regular opening
    show: "drop",
    open: function(event, ui) {
      // Overlay parameterization
      $("div.ui-widget-overlay").css({
        "background": "#000",
        "opacity": "0.4"
      });
      $(".ui-widget-overlay").hide().fadeIn();
      // Adds some more configuration if input needed
      if (input) {
        // Adds input field right under the message
        $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
        // Binds “Enter” to press first button (usually “Ok”)
        $(this).keydown(function(event) {
          if (event.keyCode == $.ui.keyCode.ENTER) {
            $(this).parent().find("button:eq(1)").trigger("click");
            return false;
          }
        });
      }
    },
    title: title,
    buttons: buttons,
    modal: true,
    resizable: false,
    height: "auto",
    width: 400,
    hide: {
      effect: "drop",
      duration: "fast"
    },
    closeOnEscape: true,
    // Overlay fadeout
    beforeClose: function(event, ui) {
      // Wait for the overlay to be faded out to try closing again
      if ($('.ui-widget-overlay').is(":visible")) {
        $('.ui-widget-overlay').fadeOut("fast", function() {
          $('.ui-widget-overlay').hide();
          $('.ui-icon-closethick').trigger('click');
        });
        return false;
      }
    },
    close: function() {
      $(this).dialog("destroy");
    }
  });
  return;
}

function dialog_OkCancel({
  title,
  message,
  funk_Ok
}) {
  var buttons = {
    "Ok": function() {
      funk_Ok();
      $(this).dialog("close");
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  }
  dialog_Handler({
    title,
    message,
    buttons
  });
  return;
}

function dialog_Input_OkCancel({
  title,
  message,
  input,
  funk_Ok
}) {
  var buttons = {
    "Ok": function() {
      funk_Ok();
      $(this).dialog("close");
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  }
  dialog_Handler({
    title,
    message,
    buttons,
    input
  });
  return;
}

function dialog_YesNoCancel({
  title,
  message,
  funk_Yes,
  funk_No
}) {
  var buttons = {
    "Yes": function() {
      funk_Yes();
      $(this).dialog("close");
    },
    "No": function() {
      funk_No();
      $(this).dialog("close");
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  }
  dialog_Handler({
    title,
    message,
    buttons
  });
  return;
}
.dialog {
  display: block;
  margin: 8px;
  text-align: center;
  width: 120px;
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<html>

<body>

  <button class="dialog" onclick='dialog_OkCancel({
      title: "Title",
      message: "I do not have any idea for the message.",
      funk_Ok: function(){ console.log("Sorry. :("); }
    });'>Dialog<br>Ok/Cancel</button>
  <button class="dialog" onclick='dialog_Input_OkCancel({
      title: "Title",
      message: "I do not have any idea for the message.",
      input: "Type something…", 
      funk_Ok: function(){ console.log("Give me more words ! :)"); }
    });'>Dialog<br>Input</button>
  <button class="dialog" onclick='dialog_YesNoCancel({
      title: "Just talking…",
      message: "Are you fine?",
      funk_Yes: function(){ console.log("You said “Yes”! :)"); },
      funk_No: function(){ console.log("You said “No”! :("); }
    });'>Dialog<br>Yes/No/Cancel</button>
</body>

</html>

This snippet is one piece of code out of many.
I would like that piece of code to be improved… So I could improve all others.
How would you do it?
What would be your method to improve the management of multiple functions?


Get this bounty!!!

#StackBounty: #javascript #jquery Create multiple parametherized JQueryUI dialog boxes

Bounty: 50

In my application, I am using a lot of jQueryUI dialog boxes.
In order to reduce the length of code, and because I am using often the very same parameterization, I was wondering about a way to efficiently and easily create multiple dialogs.

I ended up with that: I’ve created 2 functions (dialog_OkCancel and dialog_Input_OkCancel) that call the same “main” dialog_handler.
That way I avoid calling the big main function and use only the little and easier ones.

These functions are pretty simple so I don’t know what else to add. 🙂

Here is a working snippet of my code to illustrate that:

// jQuery UI dialog custom management
function dialog_Handler({
  title,
  message,
  buttons,
  input
}) {
  $("<p>" + message + "</p>").dialog({ // Could use “var dialog = ”
    //autoOpen: false,                  // false would prevents regular opening
    show: "drop",
    open: function(event, ui) {
      // Overlay parameterization
      $("div.ui-widget-overlay").css({
        "background": "#000",
        "opacity": "0.4"
      });
      $(".ui-widget-overlay").hide().fadeIn();
      // Adds some more configuration if input needed
      if (input) {
        // Adds input field right under the message
        $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
        // Binds “Enter” to press first button (usually “Ok”)
        $(this).keydown(function(event) {
          if (event.keyCode == $.ui.keyCode.ENTER) {
            $(this).parent().find("button:eq(1)").trigger("click");
            return false;
          }
        });
      }
    },
    title: title,
    buttons: buttons,
    modal: true,
    resizable: false,
    height: "auto",
    width: 400,
    hide: {
      effect: "drop",
      duration: "fast"
    },
    closeOnEscape: true,
    // Overlay fadeout
    beforeClose: function(event, ui) {
      // Wait for the overlay to be faded out to try closing again
      if ($('.ui-widget-overlay').is(":visible")) {
        $('.ui-widget-overlay').fadeOut("fast", function() {
          $('.ui-widget-overlay').hide();
          $('.ui-icon-closethick').trigger('click');
        });
        return false;
      }
    },
    close: function() {
      $(this).dialog("destroy");
    }
  });
  return;
}

function dialog_OkCancel({
  title,
  message,
  funk_Ok
}) {
  var buttons = {
    "Ok": function() {
      funk_Ok();
      $(this).dialog("close");
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  }
  dialog_Handler({
    title,
    message,
    buttons
  });
  return;
}

function dialog_Input_OkCancel({
  title,
  message,
  input,
  funk_Ok
}) {
  var buttons = {
    "Ok": function() {
      funk_Ok();
      $(this).dialog("close");
    },
    "Cancel": function() {
      $(this).dialog("close");
    }
  }
  dialog_Handler({
    title,
    message,
    buttons,
    input
  });
  return;
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<html>

<body>

  <button onclick='dialog_OkCancel({
      title: "Title",
      message: "I do not have any idea for the message.",
      funk_Ok: function(){ console.log("Sorry. :("); }
    });'>Dialog Ok/Cancel</button>
  <button onclick='dialog_Input_OkCancel({
      title: "Title",
      message: "I do not have any idea for the message.",
      input: "Type something…", 
      funk_Ok: function(){ console.log("Give me more words ! :)"); }
    });'>Dialog Input</button>
</body>

</html>

This snippet is one piece of code out of many.
I would like that piece of code to be improved… So I could improve all others.
How you, guys, would do it?
What would be your method to improve that multiple functions management?


Get this bounty!!!

#StackBounty: #javascript #jquery #html #jquery-plugins #footable Reload data from sql footable

Bounty: 50

i am using a footable and i need to reload it on a button click but without appending html to the table, i need to reload it from sql as it is filled the first time, is that possible

i have tried to realod the div $("#BusList").load(location.href + " #BusList"); the data is loaded but the design is totally messed up

  
Name Company Bus Type Bus Model Bus Color Driver Status Bus Status
"> ">
    </td> </tr> </tfoot> </table> </div>


    Get this bounty!!!