单击Google图表上的条形图后，将数据表加载到引导模式

Question

The main issue I am having is I can't understand how I could attach the data-toggle and data-target attributes needed for bootstrap3 to dispatch the output from my struts action to the modal.

I have a stacked bar chart created with google charts. I was trying to load a table of the relevent data into a twitter bootstrap modal when a bar is clicked using the addlistener function. I am using struts2 to bring back the relevent data.

google.visualization.events.addListener(chart, 'select', SelectionHandler);

                function SelectionHandler() {
                     var selection = <s:property value="key"/>chart.getSelection();

                        for (var i = 0; i < selection.length; i++) {
                            var item = selection[i];
                            if (item.row != null && item.column != null) {
                                var Type = <s:property value="key"/>Data
                                        .getValue(item.row,
                                                (item.column + 1));
                            }

                        }

                        location.href = "test.action?Type="
                                + Type + "&LoB=<s:property value="key"/>";

                    }

the data being passed is all correct its mainly I dont know how to get the location.href actions output to be shown in the popup

hope someone can help, I can give any other details if need.

thanks, Jim

Answer 1

I got this working thanks to @goodyzain's advice; JS

        var chart = new google.visualization.BarChart(
                document.getElementById('<s:property value="key"/>'));
        google.visualization.events.addListener(chart, 'select', SelectionHandler);
        chart.draw(Data,
                <s:property value="key" escapeJavaScript="true"/>Options);

                    function <s:property value="key"/>SelectionHandler() {
                        var selectedItem =  chart.getSelection()[0];
                        if (selectedItem) {
                            var value =  Data.getValue(selectedItem.row, (selectedItem.column+1));
                            var key = "<s:property value='key'/>";
                        }
                        //value variable contains Type value

                        $.ajax({
                            url: "applicationFreqTesting",
                            type: "POST",
                            data: {LoB: key, Type: value},
                            dataType: "HTML",
                            error: function(XMLHttpRequest, textStatus, errorThrown){
                                alert('Error ' + textStatus);
                                alert(errorThrown);
                                alert(XMLHttpRequest.responseText);
                            },
                            success: function(data){ 
                                $("#ApplicationListBody").html(data);
                                $("#ApplicationList").modal();

                               }
                        });
                    }
                }

Struts:

   <action name="applicationFreqTesting"  class="com.bt.nfmi.action.Action" method="applicationFreqTesting">
        <result name="success">/pages/includes/popUpJourneyReportTesting.jsp</result>
    </action>