jQuery remove script effect came from ajax - javascript

I have customised nested modal script (jQueryModal) to better match project need, but I'm facing some weird issue that I am unable to get
I call that modal to load some contents via ajax, and response from that ajax contains some javascript code along with html and appneds to modal body.
All those javascript code (from ajax response) works perfectly.
Then, when that modal is closed I remove whole modal block and it's content (that ajax responded html + javascript)
But when I reopen same modal, old script has left effect
Example, Modal A opened with ajax content, in that content there's [BUTTON] to call another ajax (will open another modal), lets call it Modal B
In Modal B, there's select dropdown which calls ajax on change, which is fine so far.
Now I close Modal B and reopen it by clicking that same [BUTTON] on Modal A, and then Modal B opens but this time Modal B's select dropdown will call twice upon change
I doubt remove js code on modal close is not enough
What could be problem and solution for that?
Thanks for any help in advance

Thanks to #Taplar for help, I got the problem and could able to solve it by little googleing and solution was to use jQuery's off
example:
$('.button').off('click').on('click', function(){ ... });
same way for select dropdown:
$('select').off('change').on('change', function() { ... });

Related

Need a link or button click to trigger a php function on my Codeigniter site

I want to know how I should be doing this. I feel like I'm missing something.
I have links and buttons on my main page that i want to trigger my PHP code. My PHP code varies.
I have one that uploads two xml files and loads them into my mysql table
one runs a large update query
one creates xml's from my sql table
I have them all working now. Thats not the problem. The problem is I hate how I am having to load another PHP page with just code then redirect back to the page i started on.
What i want is to be able to click the button or link and run the code then display on the page or bootstrap modal that its been done.
I was trying to have a bootstrap modal with progress bar pop up while running these functions then when done user clicks okay to close modal popup.
What is the best practice here? is this not conventional?
I have a CodeIgniter site setup with Ajax, Jquery and Bootstrap.
One other thing i looked at trying to do what using a controller or helper to do the work but i just can seem to understand the best practice.
you can create a controller specific for ajax operation and put all function in to that controller.
e.g.
class myajax extends CI_controller
{
... ... ....
function create_xml()
{
}
}
and use site_url('myajax/create_xml') as location in ajax call.

Bootstrap 3.2.0 modal remote body content update

Does someone have a working example where multiple remote links have to be loaded into the modal?
What I want is a datatable and when one clicks on a link in the row, I want to open the edit page for that row.
e.g. edit.php?id=xyz.
My example works only for the first row I want to edit, when I click on a different row, the content of the first row is loaded.
I've been searching and this topic was the closest, however it does not work for bootstrap 3.2.0
Twitter bootstrap remote modal shows same content everytime
The Bootstrap modal usage says that the remote content will be loaded one time. So, what you have to do is remove the content of the modal when you close it. That will allow new content to be loaded.
$('body').on('hidden.bs.modal', function(e) {
$(e.target).removeData('bs.modal').find('.modal-content').empty();
});

asynchronous __doPostBack

Requirement
In User control ( In single update panel) - user will change some data and click on button or link button other than save button
We prompt Dialog box to user for (Yes/No/Cancel)
On cancel we did nothing and remain on same page
On No - we redirect/process further without saving data.
On Save we have to save changes and redirect/process further.
Here the problem is with Save
We have different panels on page (same on user control)
On Selection of Yes, Here we call "_doPostBack" for save button click event (Works fine), and in same javascript function below save postback calls other "_doPostBack" to hide current panel (Panel-1) and show another one (Panel-2) and server side process.
But Its always shows (Panel-1)
However in FF, Panel-2 just prompt and hide again.
EDIT: Hide panels are at server side, as there are multiple buttons which shows/hide panels.
Expected result is : After save data, show Panel-2 and hide Panel-1
can anyone has idea how to overcome this prob ?
Without some actual code it is a bit difficult to see what is going on, but from what I understand it is a problem with timing.
When you click 'Yes', you perform the postback function and immediately after you hide the panel.
Your 'doPostback' is actually a-synchronous. Meaning the response comes a bit later (not immediately). Thus when the response comes back it updates your page and that is where you flow is breaking up.
FF is probably fast enough to actual show you what is really happening. Your hide function works ok, but is overwritten by the ajax response.
I suggest you hide the panel asynchronously, with the response that comes from the server.
Here are some links on that:
- RegisterClientScriptBlock within AJAX method call
RegisterStartupScript doesn't work with ScriptManager,Updatepanel. Why is that?
I hope this helps you get on the right track.
Good luck

nested Magnific AJAX pop-up

I'm using magnific-popup and I'm trying to call AJAX popup inside the main pop-up. I can do the nesting part if both pop-ups are inline so I can place second pop-up container outside the first one.. but The problem in AJAX is I can not place the response outside the main div so it gets hidden
Here's an example where client_view is the main popup and it has ajax-pop-up nested
Client view
<div id="client_view">
<a href="createClientAjax.php" class="ajax-pop-up" >Add Client</a>
</div>
There's no way to do this right now.
Dimitri (the creator) said he would not do this, as it is too complicated and no really useful. http://codepen.io/dimsemenov/details/hwIng
Maybe something like this will do:
https://github.com/dimsemenov/Magnific-Popup/issues/36

HTML - How do I use a popup in order to input and output a value?

I see this pattern used very often!
Click on a link
popup appears with a form
fill in form and submit
popup closes and main page populates itself with the form's data.
Any idea how this works?
Edit:
by popup I mean an actual window popup, rather than a modal window. A modal window could work nicely though I reckon.
Do you want something like this ?
http://jqueryui.com/demos/dialog/#modal-form
http://jqueryui.com/demos/dialog/modal-form.html
You can validate the form with js / jquery and then do an ajax call and post the data to the server
The only way to do this is with Javascript. Django's own admin includes a (fairly clunky) example: when you save the popup, it returns a response consisting of just a <script> tag containing Javascript which references the box in the parent form. See for example django.contrib.admin.options.ModelAdmin.response_add.
You can use somethign like facebox to create the popup. This requests a page to the server (your form). Once submitted, detect that the facebox was closed (see the API) and make a new ajax request to the server that will return the needed data to populate your page.

Categories

Resources