Hopefully a simple question regarding dynamically populating results to a popup model rather than opening a new page.
I have a html table of results based on a php query, when I highlight a row and click the edit button a new window opens and displays more details about the selected item. This is working fine but now I would like to have to contents display in a model instead of opening a new page.
Below is the JavaScript for the edit button that does work.
$(function(){
$('#btnEdit').click(function(e) {
var value = $("#tblTickets tr.selected td:eq(4)").html();
window.open("helpdesk_ticket_details.php?ID="+value);
});
});
Now if I modify the code slightly like below the model box displays but I'm not sure how to dynamically fill it based on my table selection.
$(function() {
var modal = document.getElementById('myModal');
$('#btnEdit').click(function(e) {
var value = $("#tblTickets tr.selected td:eq(4)");
modal.style.display = 'block';
});
});
Any help on this is appreciated. If you need anymore information please let me know.
Thanks
Related
My menu links uses a jQuery script to load various HTML scripts into a div on an index.php page. Menu item 'Info' puts in sectionInfo.html into the index.php page. This script contains a short form and can bring up an alert() to the user if they misuse the form. But when the alert is accepted the page reloads to the default index.php and then the user has to select Info from the menu again to return to where the form is. How can I re-load the correct div again from the alert?
jQuery script for the menu links:
$('.trigger').click(function(){
var url = $(this).attr('href');
$('#target').load(url)
The menu link:
<ul>
<li>
Info
</li>
</ul>
The Alert:
function validateMyForm1() {
alert("Alert goes here ");
window.location = 'href="sectionInfo.html" class="trigger"';
}
The div in the body of the index.php
<div id="target"></div>
I have checked other posts and tried various alternatives. Please help and if you down click me please tell me why as I have been down clicked often and don't know why. Thank you.
https://codereview.stackexchange.com/questions/64192/loading-div-sections-from-separate-files
calling jquery from a javascript function
Go to URL after OK button in alert is pressed
The jQuery script is part of longer script which I include in this edit: The lower part of which slide down text the html files.
$('.trigger').click(function(){
var url = $(this).attr('href');
$('#target').load(url, function() {
$('#faqs h1').each(function() {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
return false;
});
A couple of issues in your JS, in your first example you need to call preventDefault() on the event to stop the link being followed:
$('.trigger').click(function(e) {
e.preventDefault();
$('#target').load($(this).attr('href'))
});
In the second code sample your string location is entirely wrong, you just need to set the URL to go to as a string. Personally I prefer to do this using the assign() method, like this:
function validateMyForm1() {
alert("Alert goes here");
window.location.assign('sectionInfo.html');
}
I have set up a pop up sign up box to show on first site arrival that is loaded using a .js file called inside the <head> tag and this all works fine.
How can i get it to re-show if a menu link is clicked?
Obviously when i link it like this below it will open the file itself containing the codes.
Mailing List
So how do i get it to carry out the function that's in popup.js when the above link is clicked?
Edit: I was able to get the pop up to show by using the below thank you all who contributed.
Mailing List
Now to complete what i'm trying to achieve is to ignore/disable the cookie being set that stops the popup from showing the next time the link is clicked.
function AlreadyBeenNewsletter()
and
function SetNewsletterCookie()
Link to the actual js file
If the JS is already included, you could use the onclick attribute. It will run JS code when a link is clicked.
Mailing List
For the second part of your question, I would create two functions. One that shows the popup without checking if the cookie is set, and another (you already have it) that checks the cookie.
Function that shows popup without checking:
function showPopup(){
var id;
id = "popupSignup";
if (jq(".popupWindow").length) {
jq(".popupWindow").prop("id", id);
} else {
jq("#aspnetForm").after('<div id="popupSignup" class="popupWindow"><a class="popupClose" href="javascript:;"></a><div class="popupDetails"></div></div><div class="backgroundPopup"></div>');
}
jq("#" + id + " .popupDetails").html('<iframe class="popupiframe" src="/user/files/newsletter.html"></iframe>');
InitialisePopup(id, 99, false, true);
ShowPopup();
CenterPopup();
}
Function that you already have popup()
jq(function popup() {
if (!AlreadyBeenNewsletter()) {
SetNewsletterCookie();
showPopup();
}
});
Then you can do the following for your link:
Mailing List
By separating the two functions apart like this you are free to show the popup without preventing it from showing again.
I am currently working in my first backbone.js app. I made a "show comment" function that renders a view in an underscore.js template and renders it to my view. The problem is, I want to "toggle" all the comments when a button is clicked, not just "show" commentView. How can I refactor this "showComment" function to not duplicate the current view? The success callback iterates over each comment in the comment view and then renders it. Using toggle, I would like it to just render 1 view, not render the same view, multiple times on each click when clicking toggle.
Example:
User clicks the show comments button, 5 comments are displayed.
User clicks the show comments button, comments are hidden.
User clicks the show comments button, 10 comments are displayed (the first 5 and since the success function renders a whole new view, the first 5 questions initially displayed are appended to the first 5, so there are 10 total now).
Here is the main function
showComments: function() {
this.commentsView = this.$el.find(".comments_container");
this.commentsView.show(); ***INSTEAD OF .show() I CAN USE .TOGGLE() but I get DUPLICATES WHENEVER THE VIEW IS RENDERED ***
this.commentCollection = new app.CommentList();
// // debugger;
var self = this;
this.commentCollection.fetch({
data: { question_id: this.$el.attr('question_id') },
success: function(collection) {
collection.each(function(comment) {
var commentView = new app.CommentView({model: comment});
var html = commentView.render().el;
self.commentsView.append(html);
});
}
});
Here is the backbone Event:
'click .show_comments': 'showComments'
Any suggestions would be appreciated, thanks!
There is a few ways that you could do it.
You could render and hide the comment view on page load and then bind the button commentsView.toggle.
OR in your showComments function you can have an evaluation that checks to see if the commentsView is already created.
If (this.commentView != null)
//toggle
else
//create your view and show it
I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.
http://geodit.com:8000/test
Here, I have a simple Google Local Search API and Google Maps code.
How do I make it so that when I click the title of a search result, I simulate the clicking of the address? My objective is to make the pop up box appear on the map by clicking the title. I binded it to this:
$(".gs-title").click(function(){
//SIMULATE MOUSE CLICK of the address HERE
$(this).parent().parent().find(".gs-address").click(); // this doesn't work!!
alert("the title was clicked!!"); //this works fine.
return false; //this also works fine. The hyperlink gets disabled because I returned false.
});
I want to be able to click the title, NOT open the link. And then, pop up the box on the map. In other words, I want to treat the the result as a whole.
Solved. I removed the A tags manually.
// Returns the HTML we display for a result before it has been "saved"
LocalResult.prototype.html = function() {
var me = this;
var container = document.createElement("div");
container.className = "unselected";
container.appendChild(me.result_.html.cloneNode(true));
$(container).find('a').replaceWith(function() { return $(this).contents(); });
return container;
}
The Html code is:
<div class="gs-title"><a target="_blank" class="gs-title" href="http://www.google.com/maps/place?source=uds&q=pizza&cid=12855512876323852687">California <b>Pizza</b> Kitchen</a></div>
<div class="gs-address">...
so I think right path coul'd be:
$("a.gs-title").click(function(){
$(this).parent().siblings('.gs-address').click();return false;
});