Help with jQuery Function needed
I have a list view created using a 3rd party module in DNN called XMOD Pro.
I want to update a single field in each row using AJAX and a "feed" so that I can refesh the value of "STATUS" from the database without the user having to refresh the entire page. (cant use ajax for full listing as need the links and edit facility in each row)
I have created dynamic IDs on the elements I need to read from and write to.
I have managed to create a function that iterates through the list and using alerts at the moment, shows me the read from element and the write to element.
I can also get the AJAX feed to seperately write to a fixed <td> by "id".
I am struggling to understand how I can join the two functions so that the first function gets the SID and the write to ID and then passes this to the AJAX Fuction which will write the value selected using the "SID" to the <td> defined by the "id" as provided by the first function.
As The first function is iterative (due to there being N rows in the list) I need the AJAX to read then write to each <td> in the list based upon its "id" (e.g. update status for all items in list based upon value returned from database)
I hope this rambling idiot makes sense in what I'm trying to achieve. Any help would be greatly appreciated.
This is the code I have so far:
HTML before generation =
<ItemTemplate>
<tr id="[[RowNumber]]_ROW" class="rn">
<td>[[RowNumber]]</td>
<td id="[[RowNumber]]_STATUS" class="stat"></td>
<td>[[CREATEDATE]]</td>
<td id="name">
<xmod:DetailLink Text='[[DATA_NAME]]'>
<Parameter Name="SUPPRESSIONID" Value='[[SUPPRESSIONID]]' />
</xmod:DetailLink>
</td>
<td>[[DATA_DESCRIPTION]]</td>
<td>[[TOTAL]]</td>
<td>
<xmod:EditImage Text="Edit" ImageUrl="/Portals/_default/XModPro/images/edit_32_a.png" tooltip="Edit this File">
<Parameter Name="SUPPRESSIONID" Value='[[SUPPRESSIONID]]' />
</xmod:EditImage>
<xmod:DeleteImage Text="Delete" ImageUrl="/Portals/_default/XModPro/images/delete_32_a.png" tooltip="Delete this File"
OnClientClick="return confirm('Are you sure you want to permanently delete this File?');">
<Parameter Name="SUPPRESSIONID" Value='[[SUPPRESSIONID]]' />
<Parameter Name="USERID" Value='[[User:ID]]' />
</xmod:DeleteImage>
</td>
<td id="[[RowNumber]]_SID" class="SID">[[SuppressionID]]</td>
</tr>
</ItemTemplate>
HTML from Browser =
<tr id="1_ROW" class="rn">
<td style="text-align:center;">1</td>
<td id="1_STATUS" class="stat" ></td>
<td>14/04/2017 13:07:30</td>
<td id="name">
<span><a id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl00_0__lnk_0" href="javascript:__doPostBack('dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl01$ctl00$_lnk','')">Supp File 2</a></span>
</td>
<td>Testing 2nd File</td>
<td>10369</td>
<td>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_0" Text="Edit"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl01$ctl01$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_0__btn_0" title="Edit this File" src="/Portals/_default/XModPro/images/edit_32_a.png" /></span>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_0" Text="Delete"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl01$ctl02$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_0__btn_0" title="Delete this File" src="/Portals/_default/XModPro/images/delete_32_a.png" onclick="return confirm('Are you sure you want to permanently delete this File?');" /></span>
</td>
<td id="1_SID" class="SID">3G00SUP000000004</td>
</tr>
<tr id="2_ROW" class="rn">
<td style="text-align:center;">2</td>
<td id="2_STATUS" class="stat" ></td>
<td>13/04/2017 14:40:51</td>
<td>
<span><a id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl00_1__lnk_1" href="javascript:__doPostBack('dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl02$ctl00$_lnk','')">SUPP1</a></span>
</td>
<td>drgwrt</td>
<td>8601</td>
<td>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_1" Text="Edit"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl02$ctl01$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_1__btn_1" title="Edit this File" src="/Portals/_default/XModPro/images/edit_32_a.png" /></span>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_1" Text="Delete"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl02$ctl02$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_1__btn_1" title="Delete this File" src="/Portals/_default/XModPro/images/delete_32_a.png" onclick="return confirm('Are you sure you want to permanently delete this File?');" /></span>
</td>
<td id="2_SID" class="SID">3G00SUP000000001</td>
</tr>
jQuery that iterates the elements and gets the SID and the stat location =
$('.rn').each(function(i, obj) {
var SID = $(this).find(".SID").html();
var STAT = $(this).find(".stat").attr('id');
(function GetAlert() {
alert(sid);
alert(stat);
})();
});
jQuery that successfully runs the AJAX and calls the feed (hardcoded SID and STAT at present as I can't get this function to read from the other function)
function GetStatus() {
var SID = '3G00SUP000000001';
var STAT = '2_STATUS'
$.ajax({
url:"/DesktopModules/XmodPro/Feed.aspx",
type:"POST",
dataType:"HTML",
data: {
"xfd":"GetSuppression_List_Status",
"pid": 0,
"suppressionid": SID,
},
success: function(data) {
STAT.html(data).show();
}
});
}
setInterval(function() {
GetStatus();
}, 3000);
I want to update a single field in each row using AJAX and a "feed" so that I can refesh the value of "STATUS" from the database without the user having to refresh the entire page. (cant use ajax for full listing as need the links and edit facility in each row)
I have created dynamic IDs on the elements I need to read from and write to.
I have managed to create a function that iterates through the list and using alerts at the moment, shows me the read from element and the write to element.
I can also get the AJAX feed to seperately write to a fixed <td> by "id".
I am struggling to understand how I can join the two functions so that the first function gets the SID and the write to ID and then passes this to the AJAX Fuction which will write the value selected using the "SID" to the <td> defined by the "id" as provided by the first function.
As The first function is iterative (due to there being N rows in the list) I need the AJAX to read then write to each <td> in the list based upon its "id" (e.g. update status for all items in list based upon value returned from database)
I hope this rambling idiot makes sense in what I'm trying to achieve. Any help would be greatly appreciated.
This is the code I have so far:
HTML before generation =
<ItemTemplate>
<tr id="[[RowNumber]]_ROW" class="rn">
<td>[[RowNumber]]</td>
<td id="[[RowNumber]]_STATUS" class="stat"></td>
<td>[[CREATEDATE]]</td>
<td id="name">
<xmod:DetailLink Text='[[DATA_NAME]]'>
<Parameter Name="SUPPRESSIONID" Value='[[SUPPRESSIONID]]' />
</xmod:DetailLink>
</td>
<td>[[DATA_DESCRIPTION]]</td>
<td>[[TOTAL]]</td>
<td>
<xmod:EditImage Text="Edit" ImageUrl="/Portals/_default/XModPro/images/edit_32_a.png" tooltip="Edit this File">
<Parameter Name="SUPPRESSIONID" Value='[[SUPPRESSIONID]]' />
</xmod:EditImage>
<xmod:DeleteImage Text="Delete" ImageUrl="/Portals/_default/XModPro/images/delete_32_a.png" tooltip="Delete this File"
OnClientClick="return confirm('Are you sure you want to permanently delete this File?');">
<Parameter Name="SUPPRESSIONID" Value='[[SUPPRESSIONID]]' />
<Parameter Name="USERID" Value='[[User:ID]]' />
</xmod:DeleteImage>
</td>
<td id="[[RowNumber]]_SID" class="SID">[[SuppressionID]]</td>
</tr>
</ItemTemplate>
HTML from Browser =
<tr id="1_ROW" class="rn">
<td style="text-align:center;">1</td>
<td id="1_STATUS" class="stat" ></td>
<td>14/04/2017 13:07:30</td>
<td id="name">
<span><a id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl00_0__lnk_0" href="javascript:__doPostBack('dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl01$ctl00$_lnk','')">Supp File 2</a></span>
</td>
<td>Testing 2nd File</td>
<td>10369</td>
<td>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_0" Text="Edit"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl01$ctl01$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_0__btn_0" title="Edit this File" src="/Portals/_default/XModPro/images/edit_32_a.png" /></span>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_0" Text="Delete"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl01$ctl02$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_0__btn_0" title="Delete this File" src="/Portals/_default/XModPro/images/delete_32_a.png" onclick="return confirm('Are you sure you want to permanently delete this File?');" /></span>
</td>
<td id="1_SID" class="SID">3G00SUP000000004</td>
</tr>
<tr id="2_ROW" class="rn">
<td style="text-align:center;">2</td>
<td id="2_STATUS" class="stat" ></td>
<td>13/04/2017 14:40:51</td>
<td>
<span><a id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl00_1__lnk_1" href="javascript:__doPostBack('dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl02$ctl00$_lnk','')">SUPP1</a></span>
</td>
<td>drgwrt</td>
<td>8601</td>
<td>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_1" Text="Edit"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl02$ctl01$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl01_1__btn_1" title="Edit this File" src="/Portals/_default/XModPro/images/edit_32_a.png" /></span>
<span id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_1" Text="Delete"><input type="image" name="dnn$ctr3258$XModPro$ctl00$ctl03$rptrListView$ctl02$ctl02$_btn" id="dnn_ctr3258_XModPro_ctl00_ctl03_rptrListView_ctl02_1__btn_1" title="Delete this File" src="/Portals/_default/XModPro/images/delete_32_a.png" onclick="return confirm('Are you sure you want to permanently delete this File?');" /></span>
</td>
<td id="2_SID" class="SID">3G00SUP000000001</td>
</tr>
jQuery that iterates the elements and gets the SID and the stat location =
$('.rn').each(function(i, obj) {
var SID = $(this).find(".SID").html();
var STAT = $(this).find(".stat").attr('id');
(function GetAlert() {
alert(sid);
alert(stat);
})();
});
jQuery that successfully runs the AJAX and calls the feed (hardcoded SID and STAT at present as I can't get this function to read from the other function)
function GetStatus() {
var SID = '3G00SUP000000001';
var STAT = '2_STATUS'
$.ajax({
url:"/DesktopModules/XmodPro/Feed.aspx",
type:"POST",
dataType:"HTML",
data: {
"xfd":"GetSuppression_List_Status",
"pid": 0,
"suppressionid": SID,
},
success: function(data) {
STAT.html(data).show();
}
});
}
setInterval(function() {
GetStatus();
}, 3000);
Topic Participants
montyismobile
jakecigar
jtara-jquery