I am trying to see witch one i like best, Tiny MCE or CKEditor. The problem that i am getting is that i need to add a custom toolbar button (or extend the anchor button). Trying now to modify the advlink plugin to insert internal links from the CMS. So i modified the page link.htm and added one button next to the href field. This button opens up a small popup where the user can select an internal link in the CMS and then press insert. The small popup then uses javascript to send the result back to the link.htm page. The link is then inserted into the href field. My problem is that when i press insert on the link.htm page, it just reloads the page and nothing is inserted.
This is the javascript that i added to the link.htm page:
function ShowInternalLinks() {
window.open('InternalLink.aspx', 'InternalLink', 'toolbar=0,status=0,menubar=0,location=0,directories=0,resizable=0,scrollbar=0,width=400,height=200');
}
function InsertInternalLink(link) {
document.getElementById('href').value = '/1/?' + link;
}
Nothing fancy, just opens up my custom aspx page when the ShowInternalLink is clicked. Then when the user clicks on insert on that page, the page calls the javascript InsertInternalLink and then closes the small popup. Everything works when i run the page, the href gets the correct value from the popup page, but when i then press insert, the page just reloads and the href field resets itself.
Any ideas? (If i write in the URL in the href field, it works perfectly. Just doesn't work when i use my popup window)
Side question: Can this even be done easily in CKEditor?
The href field has an onchange listener that performs the following: selectByValue(this.form,'linklisthref',this.value);
Can you debug and see if this is being called. I'm thinking that it isn't, and this might be your problem.
Related
So, what I have is a lot of pages like this, with GET parameters: benchmark.php?game_id=87
that display the information about the particular game (info is in a database) and also contains an Edit button.
The Edit button opens a new window using JS window.open("edit_game.php?game_id=87",...)
The Edit window contains a few textboxes to add/modify data and a Save button.
The desired behaviour here is that when I press the Save button on the edit_game.php page, not only that the information is saved in the DB (this works) but also the benchmark.php?game_id=87 page is maybe refreshed so that the information displayed is actual. I don't know how to do the 'submit on page x, page y is aware and refreshes'.
I assume I should use AJAX for this but I don't know where to start. What I tried is something like this
setInterval( function(){
$('#refresh_station').load('game_information.php');
}, 2000);
that every 2 seconds it refreshes the information present in benchmark.php?game_id=87 but I find this very inefficient since it refreshes the info even if no modifications happened.
Is this the only way to approach this situation?
Edit: I should mention that edit_game.php?game_id=87 is not supposed to close or anything after pressing Save. So I can't just use the submit form to redirect back to benchmark.php.
Yes you should use Ajax for it also add one field in Database table last_update, now when page edit_game.php?game_id=87 load it have last_update time, ajax check this last update on some interval time if ajax see there is any update page should be refreshed.
Running a loop that checks every few seconds whether the records have changed isn't the best solution in my opinion. There's a much easier way to trigger a page refresh when you submit a form in a popup window.
Using window.opener you can perform actions on the window that opened the popup that you're currently in. In your case:
<form onsubmit="window.opener.location.reload();">
Your form here.
<input type="submit" value="Save changes">
</form>
Or in jQuery:
$('form').submit(function() {
window.opener.location.reload();
});
https://jsfiddle.net/yqv1eh8w/1/
postMessage
can communicate with the child window. Link
window.addEventListener("message", function (event) {});
will let you listen to it from a child window.
This should be help you with what you want.
The entire thing communicates with the help of events and messages.
Also, you will need to run this locally (coz I opened popups to the same window)
IMO, the best approach is to use a popup form. If your web page is already using Bootstrap, you can add a modal popup easily with the edit form as it's content. When clicking on the edit button, instead of opening a new window, you can open this popup.
Then submit this form with ajax on click of the submit button and inside the Ajax success function, add javascript/jQuery to close the modal and refresh the page content.
I am using jquery mobile in a cordova app.
I have multiple links (jquery mobile buttons), some of which follow a normal href link, others call some code in onclick.
When pressing my buttons making use of onclick, they work for multiple presses . I can press them multiple times, each time envoking the code.
However, when I press on of my buttons with a normal href link, my buttons making use of onclick seems to break. The moment I press a button following a normal href link, my other onclick buttons stop working.
It is worth noting that my buttons making use of onclick, also NEVER shows the "pressed" animation that jquery mobile adds when clicked. The normal href buttons ALWAYS shows the "pressed" animation when clicked.
My links all navigate to outside of the app, either activating an intent, or navigating to an external website using InAppBrowser. The normal href buttons always works.
I have tried to reload the page in place when a button is clicked, but this does not work.
$("#ctel").on('click', function (e) {
$.mobile.changePage("#businessCard");
});
My links:
As #Sithys was suggesting, I actually did have an error not relating directly to the jquery mobile buttons. I was re-writing my url's to point to another stats url, from which it then redirected to the appropriate url.
It seems some of the intents did not like this redirect, and probably caused an undesired effect/error somewhere in the android/cordova eco system. I removed the stats url, and by implication the redirect to the intent, and all is working as it should.
Strangely, I did however test this in Ripple emulator, and there it works perfectly fine with the stats tracking url and redirect.
I ended up doing a manual ajax post to track my clicks, and just activated the intents as per normal.
I have an aspx page on my SharePoint site, which I have included tags. For some reason, every button on the page will reload the page when clicked. Even the buttons with no attributes (id, class, etc) or functions will reload the page when clicked. How can I fix this issue? I can't even see what's going on in the debugger because I'm not calling any reload functions, so I have no idea where to place a breakpoint.
Thank you in advance for your help, I really appreciate it.
The problem here is with the <button> tag. Its default behavior is to act as a submit button unless otherwise declared and will reload.
To keep your <button> tag, add type='button' to the button element. I think that prevents the reload.
Or you could go with the ole <input> tag with a type='button'. That keeps the reload from happening as well.
Or some other html element with an onclick event will work too.
First search for a function called doPostback and set a breakpoint on the entry point and click a button. If you hit this breakpoint it could mean that auto post back is turned on for the control generating the button. However if you trigger that breakpoint you should be able to look at the stack trace to figure out how you got there.
If that doesn't work, use the F12 tools in the browser, start with the HTML section and search (Ctrl-F) for the word "click". Then go to the script tab and do the same for each JavaScript file. If all of the buttons exhibit the behavior there is most likely a click event registered. Possibly with jQuery that looks like this $('button') so that it matches all buttons on the page and registers a click handler.
If that doesn't find it, and you have access download one of the master pages from http://startermasterpages.codeplex.com/ and temporarily replace your master page with one of these. Take a screenshot of the scripts that are loading on your page first. Then add them to the starter master page one at a time until the unwanted behavior returns. Then set a breakpoint on every function entry point in that script and click a button and see where you land.
I am using Asp.net Javascript and C#
I have a content page, and left side has links in the master page.The content page has data entry form. If user leaves the page without submitting the form and click the cancel button. user should be prompt to save the changes made. I know i can use window.onbeforeleave and can show the confirm message.
Below is the issue.
The control moves to executing the code behind page of the clicked link.Reason is on clicking the link, a javascript function is being called. this function has below code.
window.location.href = 'anotherpage.aspx'
The confirm message appears later.
My query is, Is there any way to show the confirm message first.
I cannot write the confirmation message code in java script function as there are so many other links in left menu and same situation can arrise to prompt the user for confirmation message and logic is different in all pages to check the unsaved forms.
Suggestions?
I suggest you use jQuery for a 'dirty check' . And there are 2 ways to implement it.
Based on jQuery data feature : http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/
a jQuery plugin for dirty check : http://www.novogeek.com/post/2010/01/31/Check-for-unsaved-data-on-your-web-forms-using-jQuery.aspx
Is it possible to capture the right click open in new window/tab or mouse wheel open in new window/tab event using jQuery?
UPDATE 1
Here is why I need it. I have codeigniter application which uses pagination class. I use this class to display a grid. The pagination links have been bind with a method that uses AJAX to load the next page in a container div. Now some one can right click and open the next page in new tab/window which I don't want. IMHO, the only way to handle this is to some how trap the (right click or mouse wheel button click) open in new window/tab event.
UPDATE 2
I just realised all my AJAX requests are being served by one CI controller which actually acts as a proxy to other classes/libs. In this controller I can look at the request and if it isn't an AJAX request I can redirect the user to another page.
A workaround solution is to replace all applicable <a> elements with buttons, where (obviously) the buttons would call JavaScript that does the appropriate navigation.
If you're really keen you can apply CSS to make the buttons look like <a> elements, though I don't recommend it because it confuses users who might try to treat them as standard links and right- or middle-click them.
(You could even get it to work for users that don't have JavaScript enabled by, e.g., making each button a submit button in its own little form.)
At the very least you can catch a right-click, using .mousedown() (or, presumably, mouseup()). See this StackOverflow answer about right clicks for more. And by catching it, you should be able to do a standard event.preventDefault() and then do as you like from there. That may be overkill, however, as it could prevent the user from doing other things you want to allow them to do.
I almost fixed a similar issue now for a page which I am working on. My fix was to do some changes in the page if that has been opened in a new window....
Assume that you open a page "B" from page "A" in a new window.
If you want to check the page "B" is opened in a new window from page "A", then follow the below steps..
If (document.referrer == "A" && window.history.length > 1) {
alert("I am page 'B' and opened from page 'A' in a new window");
}
If you don't want people to access link the usual way or fallback when the JS is disabled, then it shouldn't be a link. Just use any element you like (span, div, button, whatever you like) and style it like a link. Then bind the action using JS. Or you can use a link with href="#" or href="javascript: void(0)". That way if users right click it and choose to open in a new window, then they will end up in the same page they were before.