I have a several actions that can be taken on the screen that would cause image to be re-loaded via Ajax call (non-jQuery). I need a way to detect that image has been reloaded so that I can attach event handler to the image again. How can I do this?
An alternative way of doing it is to use the live event in jQuery.
Which binds handlers to currently existing (selected) elements and any others which may appear later on (through a XMLHttpRequest or simply DOM handling). This means you don't have to detect if an image or other element has been reloaded, it binds the events for you automatically.
It's not clear to me whether the ajax is simply updating the src of an image, or whether you have whole new chunks of html with <img> tags in them.
In any case, this should bind an onload event to any image on the page and any img that gets added to the DOM.
$('img').live("load", function(e){
// fires when an img tag has an onload event fire.
});
Related
In GTM, I'm trying to trigger on page text that's visible after a form is submitted since it does not change to another URL or refresh the page i.e. #bxAddSuccessTitle. However, the summary of events in GTM only capture the Click elements from the DataLayer. I've tried DOM, Custom JS variables, Window Load/Page View triggers and nothing populates until I click on the page.
Is there a workaround where I can trigger on something that is visible in the page source, but not necessarily in the datalayer?
enter code hereConfirmation Page
enter code hereConfirmation Page Source Code
enter code hereGTM Summary of Events
Sounds like you need a visibility trigger, probably with the "observe DOM changes" option active.
This will fire when an element comes into the viewport either by scrolling, when it is unhidden via css or, with the "observe DOM changes", when the element is created/inserted dynamically after a user interaction.
A possible caveat is that the trigger will only fire when the element is visible to the user (unhiding or inserting below the fold will not activate the trigger).
I add this in my Render method (custom webcontrol):
Me.Attributes.Add("onkeypress", "chang(event,this);")
If affects some textboxes if they have some properties. But there are times that i don't want this property to be set, so no javascript will be executed. I've tried to remove it in code-behind on page_load and i was going to try to remove it on prerender method but it happens before my controls Render method.
How can i remove this property?
Take a look at the ASP Events Lifecycle. As you can see, the render event is at the bottom of the execution list. Since no events are fired after render, and render is where you are adding this functionality, then render is also where you must remove this functionality.
You could try to move the function that adds it into a higher event (load for example) and then remove it on render. Either that, or when you are applying it, perform any checks to see if the objects requires it or not.
I have a situation where I am loading an iframe inside of a backbone view. The view has an events hash that handles click events.
events: {
'mousedown': 'toggleActive'
}
This works fine for the DOM that the view is part of. Problem is when I click inside the iframe DOM, the click event doesn't bubble up to the view (as expected). So I wrote some code that transfers the click from the iframe DOM to the parent DOM. I have the following inside the iframe body.
$("body").bind("click", function(event){
window.parent.document.$("#"+tgId).trigger(event.type);
});
This works fine for regular jquery event handlers, but for some reason it doesn't trigger the view's event handlers (from the events hash).
Does anyone have any ideas?
Have you tried adding a debugger statement inside your click handler, and then checking what window.parent.document.$("#"+tgId) actually is? It's hard to say for sure, but my guess is that that code is not selecting the element you expect. jQuery will then happily let you call trigger on an empty set, so you would't get any errors if that was the case.
I have a DIV in which I have a asp:repeater which, based on data, puts information in this div. I then use Jquery's UI dialog to display the data to the user via a button click. This all works swimmingly.
So, I want to be able to add records to the data which populates the repeater. I have another part of the screen where people can enter this data, and it is saved to the database using an ajax call. This, too, works swimmingly.
I then want to update the data on my dialog box, without having to do a full postback to the server. So, this is normally pretty easy. I put my div into an UpdatePanel, and from Jquery initiate a __doPostBack. which then refreshes the data, which too, works swimmingly up to a point.
Once the __doPostBack is complete, the div is no longer hidden. It is now displayed on my page (with the updated data mind you), but the javascript i use to show the dialog, now no longer works.
Some investigation shows that:
On initial load of the page, the javascript which tells jquery to create a dialog from a div takes the div from wherever it is on the form, and appends it to the body element.
When the update panel posts back, the div is recreated, but the javascript to turn it into a dialog either isn't executed again (which I can understand... we haven't done a full load of the page, so the javascript doesnt execute again.
This means that the div is no longer a 'dialog' but a simple div on my page, which is not what I want.
So, my questions are is:
Is there a way of injecting javascript aftr the updatepanels postback which will execute and create the dialog properly again?
The solution would be not to use Updatepanel at all and just change the innerHTML of the div with data received through a jquery ajax call.
I found another solution to this. I put the dialog initialization javascript in a separate function called SetupDialog instead of being inside the $(function () { }); block.
Then I used ScriptManager.RegisterStartupScript in Page_Load to register the script so that it runs every time the Update Panel updates:
ScriptManager.RegisterStartupScript(this, GetType(), "SetupDialog", "SetupDialog();", true);
In this case, the dialog will only work after the UpdatePanel has been updated. If you need the dialog before that, then you can call SetupDialog inside the $(function () { }); block as well.
Been pulling my hair out and doing a bit of looking on the web to try and figure out an elegant solution to my issue.
I have a ProductImages.aspx page. It shows all of the images associated with that product in a dynamically created list. Events are wired up to each picture to allow you to update it.
This works fine.
However, I have an option at the end which lets me add a new image. This is a button which fires off a call to the AddImage method.
Now what is happening is that the original controls are being create and added to the page with events. Then the button event if fired which recreates all of the existing image controls and a new one. Add this point the new image control create after the OnInit does not have events attached due to the events being added AFTER the OnInit.
I can do a Response.Redirect to reload the page and fire the OnInit to wire up the events again but this seems very inelegant and destroys the point of using update Panels.
Any ideas?
I'm thinking you could always load the picture upload control in a div and have a Javascript link to toggle the display attribute of the div.
Or perhaps use CollapsiblePanels from the AjaxToolKit to hide and show the upload form.
I think either of those ways would be more elegant than doing a post back (even if it's in an UpdatePanel) just to retrieve the picture upload form.
Your questions makes it sound like you're saying that you can't put the controls in OnInit because it is only fired on the first load of the page. This is not the case - OnInit is fired each time the page is loaded (including postbacks), so you can re-create your controls there even when using an update panel.
One property that is different between the initial load and the postbacks is the Page.IsPostback property, which you can use to just perform actions on the first load of the page.