jquery - I am trying to get items in my dialog box selectable and on selection run more ajax -
i have button form search on click ajax , appending data dialog box. wanting make elements selectable , on selection open dialog box drilled more detail. using jquery appreciated.
html
<div class="row"> <button onclick="return search_all_forms()" type="button" class="btn btn-primary btn-sm">search forms</button> </div> <div id="dialog" title="search forms"> </div>
javascript
function search_all_forms() { //if (getcookievalue('payreg') != '99') { $.ajax({ type: "get", url: baseazureserviceurl + "/api/dynamicforms/formheader/search", //data: { add_userid: getcookievalue('userid'), empl_id: getcookievalue('emplid'), location: getcookievalue('location'), status: 'started' }, data: { add_userid: 'ujcockr' }, datatype: "json", success: function(data) { $.each(data, function(index, elements) { var strtitle = elements.form_title; var intformdatatheaderid = elements.form_data_header_id; // alert(intformdatatheaderid); var html = ''; html += '<ul id="selectable">'; html += '<li>' + strtitle + '</li>'; html += '</ul>'; $("#dialog").dialog({ autoopen: false, modal: true, draggable: true, position: [200, 150], dialogclass: "foo", show: { effect: 'fade', duration: 1000 } }); $(".ui-corner-all").css("background-color", "white"); //$("#dialog").append(strtitle + "<br>"); $("#dialog").dialog("open") $('#dialog').append(html) $('#selectable').selectable(); //alert(data); }) } }) }
i'm not sure exact problem when append elements document can use event delegation
attach event handlers elements. so:
$(document) .on("click","#selectable li", function(e){ $("#dialog").dialog.("open"); });
and dialog option auto open spelled autoopen
not autoopen
. also:
$("#dialog").dialog("open"); //<-- wrong order thing $('#dialog').append(html);
should be:
$('#dialog').append(html); $("#dialog").dialog("open");
let me know if you're closer solving problem
Comments
Post a Comment