I have a menu which contains a delete button to delete items from it. I put all inside an updatepanel to make partial postbacks. The problem is after i made the post back the jquery jdmenu pluggin stops work. I suppose i should include something like this
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InitializeJdMenuAgain);
function InitializeJdMenuAgain(sender, args) {
//do something here which i am not sure
}
but i am not sure what should i put in InitializeJdMenuAgain because no script is needed when using this pluggin. I was inspecting the code for pluging but i don't have too much abilities which Javascript, what i need to do?
thanks in advance.
You should reattach the menu to the DOM element that was updated by the UpdatePanel:
function InitializeJdMenuAgain(sender, args) {
$('ul.jd_menu').jdMenu();
}
Related
I have the following JS code:
<script type="text/javascript">
$(document).ready(function () {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
</script>
This populate a dropdownlist with the value Select, the thing is, this dropdownlist appears in a form that it's called once the user clicks a button and then a modal windows opens, with the form in it.
But since it is mark as
$(document).ready
This JS won't execute with the modal, since the document is already 'ready'. How can I achieve this?
Thanks in advance!
Regards,
You can easily achieve this using bootstrap modal events. You can use following code snippet to achieve your objective:
$(document).ready(function () {
$('#myModal').on('shown.bs.modal', function (e) {
var items = "<option value='0'>Select</option>";
$('#DistrictID').html(items);
});
});
For reference Please check bootstrap modal events.
A useful way to load and execute javascript after the page is loaded, like modal window show ups, is to use ajax getScript function, which Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request through a pre-defined function in main page.
function loadJS(lnk){
$.getScript(lnk);
}
it can be a general way to load any script in a fully loaded page.
One solution is to use jQuery event.on
from this blog post https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html
I will quote the author, because I think it's a very neat explanation.
We can’t register a listener to an element that doesn’t exists.
A work around is to register the listener to an element that will
always exist in the page context. The #modal-book is the closest
element. It is a little bit more complex what happen, but long story
short, the HTML events propagate to the parents elements until it
reaches the end of the document.
More here: https://api.jquery.com/on/
Try something like this:
$('#idofselectelement').change(function() {
//grab the selected option and then do what you want with it.
});
Using insert functionality of an aspx DetailsView. Would like to show a javascript modal popup window while the new record is processed and added to the database. I can hook the button click in DetailsView_ItemCommand. It's not working, so I started trying to figure out whats going on by simply displaying a javascript Alert() popup. But can't get that to even work. Here's the relevant DetailsView_ItemCommand:
protected void DetailsViewInsertFPL_ItemCommand(object sender, DetailsViewCommandEventArgs e)
{
if (e.CommandName == "Insert")
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "waitMessage", "alert('Please wait while your request is processed');", true);
return;
}
}
After the record is inserted, there is a redirect to another aspx page.
Can anyone steer me down the right path? I'll be looking at some of the aspx page and DetailsView properties next to see if something there isn't set correct.
You cant just use
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "waitMessage", "alert('Please wait while your request is processed');", true);
then preceeded by a
response.redirect("toanotherpage.aspx");
ScriptManager.RegisterStartupScript will render your script after all the elements in the page (right before the form's end tag) hence not executing it when you use response redirect on the same code block.
To achieve what you want you could do one of the following solutions,
Create a Javascript and place you the redirect or for this instance
window.location there after the Alert message you want
Create a pop-up modal using other methods like bootstrap, on the modal declare a button with a code for response.redirect.
Alex Kudryashev's suggestion to enclose the DetailView within an asp:UpdatePanel and use the asp:UpdateProgress to show the "please wait while your request is processed" gave me the solution I needed in this case.
Infrequent user here, so not sure how to give the points to Alex as his suggestion was a comment rather than an answer. Feel free to let me know how to handle the votes in that case.
Thanks!!!! I've been banging my head against the wall for a couple of days to get this one working.
I'm working on usercontrol called 'TimePicker',
This usercontrol utilizes the jquery timepicker, and wraps it to make it simple to use in asp.net.
I'm binding the jquery timepicker to a textbox using a simple script:
$('#<%= timepicker_textbox.ClientID %>').timepicker({
onClose: function() {
__doPostBack('<%= timepicker_textbox.ClientID %>', '');
}
});
I also chose to put this textbox inside an update panel, in order to avoid full page refresh after that the user chose a time and caused a postback.
The problem is that after that updatepanel reloaded, any script in the page is not running again, and therefore the jquery timepicker is not applied to the textbox.
I managed to fix this by adding the following code:
Sys.Application.add_load(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%= timepicker_textbox.ClientID %>_onControlLoad());
});
function <%= timepicker_textbox.ClientID %>_onControlLoad()
{
$('#<%= timepicker_textbox.ClientID %>').timepicker({
onClose: function() {
__doPostBack('<%= timepicker_textbox.ClientID %>', '');
}
});
}
This causes the function to be registered and then run again on each partial postback.
The problem is that this fixed the problem only for this specific timepicker,
and not for any other elements in the same page!
This is major issue to me, since I'm having more than one timepicker inside a page,
And when choosing time on one timepicker, the others aren't working...
Any suggestions are welcome.
Thanks,
Eitan.
Using the Updatepanel in the page changes the Id of the controls and jquery document.ready event did not get called proerly,
you can read more from here-
http://www.dotnetfunda.com/articles/article471-jquery-and-aspnet-ajax-updatepanel.aspx
jquery with update panel
A simple solution is to add class="timepicker" to any text box you want the functionality on, and then use this:
$(document).ready(function(){
$('.timepicker').timepicker({
onClose: function() {
__doPostBack($(this).attr('id'), '');
}
});
});
In general, learn to get away from driving client side behavior from the server because that mentality doesn't jive with jQuery's extremely simple select/add behavior paradigm. The whole update panel / postback thing is really old school as well, but if you must use that, you'd have to register the function I showed above with Sys.WebForms.PageRequestManager.getInstance().add_endRequest like you were doing. Or just put the $(document).ready inside the update panel, that might work too.
My problem is that, I want to call a code behind function from a JS. So that I can implement TextBox on Click event. I am NEW in JS so bear with me on this one...What I heard is that from the client side scripting you cannot call anything to the server (code behind). Here is my code:
<script type="text/javascript">
function callCodeBehind() {
<% txtAgentName_TextChanged(); %>
}
</script>
This is my Textbox:
<asp:TextBox ID="txtAgentName" runat="server" Onclick = "callCodeBehind()"></asp:TextBox>
This is my code behind:
protected void txtAgentName_TextChanged()
{
}
This function is getting fired on Page_Load(), which I don't want it to.
All I want is that to call this function txtAgentName_TextChanged() when user clicks on txtAgentName textbox.
Help!
For simplicity, you can use page methods. Check below articles for exact instructions.
Using Page Methods in ASP.NET AJAX
Using jQuery to directly call ASP.NET AJAX page methods
I think what you are looking for is AJAX. Check out the sample in the link.
You CAN call code behind from server using AJAX and jQuery library, just google it. e.g.
http://blogs.sitepoint.com/ajax-jquery/
A second issue is that the btn.click() will not work cross-browser.
you can insert a code behind method like this:
<% method(); &>
I have been with that a whole day..
I have a home page(index.php) and i have a small menu in it(made up of buttons) and a <div id=tab_contents></div>
i have used AJAX in such a way that whenever i click on any of these buttons, another page is loaded in the tab_contents-div.ie:home_tab0.php, home_tab1.php, home_tab2.php for each button respectively.
The page that i want to fetch with ajax should contain a <body onload=initialize()> ...</body> function.or it can contain a javascript code snippet to trigger the initilization() function.
that is when the button is clicked,the page lets say home_tab0.php is loaded, codes inside the home_tab0.php should trigger the initialization() frunction.
i have tried every possible way in my knowledge to make it work but without success...:(
please if i can get any help for this i would be so grateful.
With jQuery it's easy to call any function after the ajax call has returned, and data is loaded. I guess that's what you want to do. There are a few examples here:
http://api.jquery.com/jQuery.get/
E.g:
$.get('home_tab0.php', function(data) {
$('#tab_contents').html(data);
initialize();
});
This is a common problem. I recommend using jQuery and letting it take care of this for you. Reimplementing what they've done would be a waste of your time.
http://api.jquery.com/load/
$("#tab_contents").load("http://www.foo.com/loadContent");