I have a user control (ascx) inside a page (aspx). The ascx has JQGrid placed. I have a button in the page. On click of button I show AJAX modal popup.
The problem is: On click of button, document.ready in ascx is also getting called which in turn loads the JQGrid. I would like to avoid this.
To summarize, I do not want to reload JQGrid inside the ascx when post back happens from hosting page.
Related
I'm trying to create a link (not actually a button, but styled as a button) that calls up the Upload.aspx for a document library but I'm running into issues once Upload.aspx loads. The main issue is that the Cancel button is non-functional. I can upload select a file and upload it (and this works), but if I were to have accidentally clicked on the initial link and want to navigate away without uploading, the Cancel button doesn't make the page go away.
Now I haven't been able to have Upload.aspx display as a dialogue box over the list page--it gets called as a full page (even though I have "Open forms in dialog" enabled). I'm wondering if that's what the Cancel button expecting. Any ideas? The link that is being called is:
/mySite/_layouts/15/Upload.aspx?List=%7B4982C5B5%2DCF88%2D497F%2DA48D%2D815D7A355F0A%7D&Source=https%3A%2F%2FmyServer%2Ecom%2FmySite%2FmyDocLibrary%2FForms%2FAllItems%2Easpx&isdlg=1"
Turns out it was the &isdlg=1 at the end of the URL that was causing the Cancel button to not work. I removed this from the URL and it works properly now.
APP.js Snapshot
contact.jade snapshot
Snapshot of Page on Chrome
When I click on Submit button nothing happens control stays on same page.
I am realy stuck at this point, any help will be apprecaited.
Thank you
You need to ensure your button is inside the form tag by indenting it.
form
button
This translates to the HTML
<form>
<button></button>
</form>
which allows the button to know which form it should submit.
As your code stands now it is
<form></form>
<button></button>
For which the button does not have a parent form.
(You similarly need to this for your input's... otherwise they won't be sent to the endpoint.)
I am using the bootstrap modal window as data picker. But when having more results to pick displaying pagination. I want to load the next pages inside the same modal window when clicking on the pagination.
Can I do it in generic way like when any link clicked inside a modal window to load the content inside the same modal window, or do I need to implement this for each link separately using AJAX feature?
Please refer this three links: There will help you for sure.
Reference-1
Reference-2
Reference-3
You could change $('modal-body').html() on click.
The modal shows/hide without changing or reloading content. So you will have to restore the original content on hide maybe.
Use $('#myModal').on('hidden.bs.modal', function () {} to restore your original content.
I have a search dialog that I am popping up and filling with jquery templates. After they make a selection I set a value on the current page. As such I don't need hashTags or anything like that, I just need a pop-up dialog that I can open and close programatically. I am currently opening the dialog with
$.mobile.changePage(dialog, { transition: "slide", changeHash: false });
and closing it with
dialog.dialog('close');
However, in certain cases (when the page is navigated to), closing the dialog refreshes the current page.
Is there a better way to interact with this?
Update:
I think I figured out what is going on. So for some reason, jquery mobile usually keeps 2 pages loaded on the DOM - one of which is invisible, you can verify this by running $('[data-role=page]') in the console. One page is the page you're on, the other is the page that you initially navigated to. Not quite sure why they choose to do that, but there you have it.
So they treat dialogs as a page navigation with a different transition even if the dialog is already in the DOM. Therefore, if you go directly to the page and then trigger a dialog, modifying the current page and closing it works fine - because the original page is always loaded in the DOM. However if you go to another page, than navigate to the page that triggers the dialog, and THEN trigger the dialog it destroys the current page so that the pages in the DOM are the initial one and the dialog. In that case it reloads that dialog-launching page entirely and you never get a chance to make any modifications.
Jeez. How do I interact with the jqm dialog widget directly?
You can try two other things. Both should work:
1 set DomChache
How about overriding JQM to keep the page your are firing the dialog from in the DOM? The docs say you can set data-dom-chache and override cleaning the page from the DOM.
If it only happens when you load this page in via AJAX (vs. loading it directly) you could make DOM-keeping dependend on your trigger page having data-page-external, assign DOM-chache="true" only when the dialog is openend and remove it again once the dialog is closed.
2 override JQM
I had the same problem you described and got it to work like this (requires hacking into JQM though...):
// inside transitionPages function
if ( !$(toPage).jqmData('internal-page')
{fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );}
}
My problem was that pagechanging to certain pages (same as dialog) caused the preceding page (where the dialog fired from) to be removed from the DOM, so I had a blank screen (when trying to go back). I added data-internal-page="true" to the pages, which should keep the preceding page intact and added the if-clause in JQM.
So now pageHide (and DOMcleanup) only fires, if I'm not going to a page labelled with data-internal-page="true"
Cheers!
I think I was having a similar problem. What I wanted to do was based on certain parameters, pop a dialog window on load (with that content on the same page), which they can close and view the page that loaded.
I could get it to pop on load using load, or the pageshow events, but when I clicked close that sent you back to the previous page in history, instead of just closing the dialog.
//target your 1st page content, here its id=success
//the modal content is in a page id=dialog and data-role="dialog"
$('#success').live('pageshow',function(){
window.setTimeout(function(){
$.mobile.changePage('#dialog','pop',false,false);
},1);
}
Its a hack, and just allows the page load to beat the dialog so it gets stuck in history. Then the default dialog close behavior for the dialog works as expected. Talk about a PITA, if they took a little more for the JQuery UI dialog it would have made things a ton easier.
And regarding your question: Have you looked at Jquery Mobile Actionsheet plugin
If you don't really require a page to be loaded, that should be ok.
Also helpful could be Cagintranet iPad popover, although you have to tweak the design to be fullscreen on mobile devices. If you require CSS/Jquery to do that let me know (I'm using this in a JQM plugin I'm writing)
Hope that helps.
I am trying to use Jquery Mobile's dialog. On the documetnation, it says that diaglog would be closed if a user clicks any links on a dialog page.
Documentation:
"When any link is clicked within in a dialog, the framework will automatically close the dialog and transition to the requested page, just as if the dialog were a normal page. To create a "cancel" button in a dialog, just link to the page that triggered the dialog to open. This pattern of linking to the previous page is also usable in non-JS devices as well."
How do I prevent it?
Don't use an <a> tag, use a <div>
<div id="my_button" data-role="button" data-theme="a">Don't Close</div>
Then you just have to programmatically attach some actions to the clicking of that div
$('#my_button').live('click', function({
// do something
}
If you add a function to onclick, that will override the default behavior. Just leave href="#" in the tag, put the function like onclick="myFunction()" and you should be good.
Then in the function you can do the close with this: $('.ui-dialog').dialog('close')
Or you can obviously navigate to another page with: $.mobile.changePage('#page')
I'm sure you've moved on by now, but hopefully this can help someone else looking for this solution.
wom's solution is good, but you don't need to change from tag to . You just need to change href like href="#" as Mar said. I have test like this, it works fine.
And if still can't prevent default action, add e.preventDefault() on button's click handler.